微信小程序开发怎样创建页面

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

index.wxml 是页面的结构文件：

<font size="3" face="微软雅黑" style=""><!--index.wxml--> <view class="container">   <view  bindtap="bindViewTap" class="userinfo">     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>     <text class="userinfo-nickname">{{userInfo.nickName}}</text>   </view>   <view class="usermotto">     <text class="user-motto">{{motto}}</text>   </view> </view></font>

本例中使用了 、、 来搭建页面结构，绑定数据和交互处理函数。

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

<font size="3" face="微软雅黑" style="">//index.js // 获取应用实例 var app = getApp() Page({   data: {     motto: 'Hello World',     userInfo: {}   },   // 事件处理函数   bindViewTap: function() {     wx.navigateTo({       url: '../logs/logs'     })   },   onLoad: function () {     console.log('onLoad')     var that = this     // 调用应用实例的方法获取全局数据     app.getUserInfo(function(userInfo){       // 更新数据       that.setData({         userInfo:userInfo       })     })   } })</font>

index.wxss 是页面的样式表： <font size="3" face="微软雅黑" style="">/**index.wxss**/ .userinfo {   display: flex;   flex-direction: column;   align-items: center; } .userinfo-avatar {   width: 128rpx;   height: 128rpx;   margin: 20rpx;   border-radius: 50%; } .userinfo-nickname {   color: #aaa; } .usermotto {   margin-top: 200px; }</font>

复制代码

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

index.json 是页面的配置文件：

页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。

logs 的页面结构

<font size="3" face="微软雅黑" style=""><!--logs.wxml--> <view class="container log-list">   <block wx:for-items="{{logs}}" wx:for-item="log">     <text class="log-item">{{index + 1}}. {{log}}</text>   </block> </view></font>

logs 页面使用 控制标签来组织代码，在 上使用 wx:for-items 绑定 logs 数据，并将 logs 数据循环展开节点

<font size="3" face="微软雅黑" style="">//logs.js var util = require('../../utils/util.js') Page({   data: {     logs: []   },   onLoad: function () {     this.setData({       logs: (wx.getStorageSync('logs') || []).map(function (log) {         return util.formatTime(new Date(log))       })     })   } })</font>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

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

微信小程序开发怎样创建项目

以上就是微信小程序开发怎样创建页面的详细内容，更多内容请关注技术你好其它相关文章！