How to create a page in WeChat applet development-Mini Program Development-php.cn

We have two pages, the index page and the logs page, namely the welcome page and the mini program startup log display page. They are both in the pages directory. The [path page name] of each page in the WeChat mini program needs to be written in the pages of app.json, and the first page in pages is the home page of the mini program.

Each mini program page is composed of four different suffix files with the same name in the same path, such as: index.js, index.wxml, index.wxss, index.json. Files with the .js suffix are script files, files with the .json suffix are configuration files, files with the .wxss suffix are style sheet files, and files with the .wxml suffix are page structure files.

index.wxml is the structure file of the page:

    {{userInfo.nickName}}   {{motto}}

Copy after login

In this example, , , are used to build the page structure, bind data and interactive processing functions.

index.js is the script file of the page. In this file, we can monitor and process the life cycle functions of the page, obtain mini program instances, declare and process data, respond to page interaction events, etc.

//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 }) }) } })

Copy after login

index.wxss 是页面的样式表： /**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; }

Copy after login

Copy code

The page style sheet is optional. When there is a page style sheet, the style rules in the page's style sheet will cascade over the style rules in app.wxss. If you do not specify the style sheet of the page, you can also directly use the style rules specified in app.wxss in the structure file of the page.

index.json is the configuration file of the page:

The configuration file of the page is not necessary. When there is a page configuration file, the configuration items in the page will overwrite the same configuration items in the window of app.json. If there is no specified page configuration file, the default configuration in app.json will be used directly on the page.

The page structure of logs

   {{index + 1}}. {{log}}

Copy after login

The logs page uses the control tag to organize the code, uses wx:for-items on the to bind the logs data, and loops the logs data to expand the node

//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)) }) }) } })

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!