微信小程序开发中如何创建页面(微信小程序制作页面)

我们有两个页面，索引页面和日志页面，即applet启动日志的欢迎页面和显示页面。它们都在页面目录中。微信小程序中每个页面的【路径+页面名称】都需要写在app.json的pages中，pages中的第一页就是小程序的首页。

每个小程序页面都是由四个不同的后缀文件在同一个路径下同名组成，比如:index.js，index.wxml，index.wxss，index.json文件带。js后缀是脚本文件。json后缀是配置文件，文件带有。wxss后缀是样式表文件。wxml后缀是页面结构文件。

Index.wxml是页面的结构文件:

& lt字体大小= & quot3 & quotface = & quot微软雅黑" style = & quot"& gt& lt！--index.wxml-->& ltview class = & quot容器& quot& gt& lt视图bindtap = & quotbindViewTap & quotclass = & quot用户信息& quot& gt& ltimage class = & quotuserinfo -avatar & quot；src = & quot{ { userInfo.avatarUrl } } & quotbackground -size = & quot；封面& quot& gt& lt/image & gt；& lttext class = & quotuserinfo -昵称& quot& gt{ { userInfo.nickName } } & lt/text & gt；& lt/view & gt；& ltview class = & quot用户格言& quot& gt& lttext class = & quotuser -座右铭& quot& gt{ {座右铭} } & lt/text & gt；& lt/view & gt；& lt/view & gt；& lt/font & gt；在此示例中，、用于构建页面结构、绑定数据和交互处理功能。

Index.js是页面的脚本文件。在这个文件中，我们可以监控和处理页面的生命周期功能，获取小程序实例，声明和处理数据，响应页面交互事件等。

& lt字体大小= & quot3 & quotface = & quot微软雅黑" style = & quot"& gt//index.js//获取应用实例varapp = getapp()page({ data:& # 039；你好世界& # 039；，userInfo: {} }，//事件处理程序bindviewtap:function(){ wx . navigate to({ URL:& # 039；../logs/logs & # 039；}) }，onLoad:function(){ console . log(& # 039；在线加载& # 039；)var that = this //调用应用实例的方法获取全局数据app . get userinfo(function(userinfo){//Update data that . setdata({ userinfo:userinfo })})</font & gt；Index.wxss是页面的样式表:< font size = & quot3 & quotface = & quot微软雅黑" style = & quot"& gt/**index.wxss**/。userinfo {显示:flexflex -方向:列；align -项:居中；} . userinfo -avatar { width:128 rpx；身高:128rpx保证金:20rpx边框-半径:50%；} . userinfo -昵称{ color:# AAA；}.用户座右铭{ margin -top:200 px；} & lt/font & gt；复制代码

页面的样式表是不必要的。当有页面样式表时，页面的样式表中的样式规则会叠加app.wxss中的样式规则如果不指定页面的样式表，也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。

Index.json是页面的配置文件:

页面的配置文件是不必要的。当页面存在配置文件时，该配置项将覆盖该页面上app.json窗口中的相同配置项。如果没有指定的页面配置文件，将在该页面上直接使用app.json中的默认配置。

日志的页面结构

& lt字体大小= & quot3 & quotface = & quot微软雅黑" style = & quot"& gt& lt！--logs.wxml-->& ltview class = & quot容器日志-列表& quot& gt& ltblock wx:for -items = & quot；{ { logs } } & quotwx:for -item = & quot；日志& quot& gt& lttext class = & quotlog-item & quot；& gt{{index + 1}}。{ { log } } & lt/text & gt；& lt/block & gt；& lt/view & gt；& lt/font & gt；logs页面使用控制标签来组织代码，并使用wx:for-items来绑定日志数据，并将日志数据循环展开到节点。

& lt字体大小= & quot3 & quotface = & quot微软雅黑" style = & quot"& gt//logs . jsvar util = require(& # 039；../../utils/util . js & # 039；)Page({ data: { logs: [] }，onLoad:function(){ this . setdata({ logs:(wx . getstoragesync(& # 039；日志& # 039；) || []).map(function(log){ return util . format time(new Date(log))})} })& lt；/font & gt；相信你看完这个案例已经掌握了方法。更多精彩请关注即时码站其他相关文章！

推荐阅读:

微信小程序开发获取用户基本信息

微信小程序开发中如何创建项目