微信小程序之页面剖析

1、我们首先看app.json里面的内容，这是小程序的重中之重，大家一定要记住！

pages：是整个微信小程序的路由控制器，如果你页面在这个数组里面没有路径，说明你没有注册成功，整个小程序会报错，一般不存在这种情况。不要随意的去改动，在做项目之前自己规划好要做哪些模块，有哪些页面。

window：微信小程序全局顶部导航的样式，以下样式是顶部导航的全部属性，大家可以根据自己得喜好设计自己喜欢的样式。当然，enablePullDownRefresh onReachBottomDistance这二个属性我不建议在全局里面使用，如果你有列表页，在列表页里面的json文件夹使用，做小程序上拉加载，下拉刷新用的，后面我也会给大家分享。

tabBar其实分为二个部分，一部分是导航栏的属性，另一部分就是list。

另一部分就是list，list要注意的是，里面最少有二个选项，最多可以放五个。图片关于属性解析的很清楚了，大家可以参考了！

2、我们分析一下一个页面的组成：拿index来分析。

 

首先需要创建一个文件夹，文件夹下有js组成 Page相当于在程序里面注册了这个页面，其他的函数都有注释，大家可以看注释

Page({

/** * 页面的初始数据*/

data: {},

/*** 生命周期函数--监听页面加载*/

onLoad: function (options) {},

/** * 生命周期函数--监听页面初次渲染完成 */

onReady: function () { },

/*** 生命周期函数--监听页面显示*/

onShow: function () { },

/** * 生命周期函数--监听页面隐藏 */

onHide: function () { },

/*** 生命周期函数--监听页面卸载*/

onUnload: function () {},

/** * 页面相关事件处理函数--监听用户下拉动作 */

onPullDownRefresh: function () { },

/*** 页面上拉触底事件的处理函数*/

onReachBottom: function () { },

/*** 用户点击右上角分享*/

onShareAppMessage: function () {}

})

json 文件本页面顶部导航的信息，当然index.json会被app.json覆盖掉；其他页面的是当前页面覆盖app的。：

{

"window": {

"navigationBarBackgroundColor": "#ffffff",

"navigationBarTextStyle": "black",

"navigationBarTitleText": "小米",

"backgroundColor": "#eeeeee",

"backgroundTextStyle": "light",

"enablePullDownRefresh": false

}

}

wxml就相当于html

wxss 相当于css文件。

好了今天的就到这里了，下次给大家分享微信小程序的wxml的页面 以及wxss .

学习小程序 多看文档 多看文档 多看文档 重要的事情说三遍！

转载于:https://juejin.im/post/5bc936d76fb9a05cf2302d3d