一。pages:
微信小程序有他自己的独特结构,大概如图:
基本目录有pages/style/utils等,然后又app.js/app.json等.
pages里面是页面,微信的页面都是解耦的,数据、样式、页面等要解耦,每个页面都有其解耦后的结果,其中wxml=html,wxss =css 。它的这个页面好比html/json/js/css,只是换了名字,里面有微信小程序自己的规范罢了。尽管名字不一样,但是在编译过后,最终输出的仍然是html吧。如图,框内就是一个index的页面。
二。app.js
上图有app.js及下面的几个是全局配置。比较重要的就是app.js
它里面一般含有这些内容:
App({
onLaunch: function () {
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
console.log(res)
....
....
}
})
},
globalData: {
userInfo: null,
token: null,
style: null
url: 'https://www.xxx.com/',
},
})
app.js会是小程序第一个要加载的东西,它就加载了一个叫做APP的对象,这个对象本身就是全局的,我们可以在其他的页面、js里去调用它,如下,我们会在APP里面放些全局的东西,就是上面代码里的globalData。那么在其他页面的js里可以直接使用它。
const app = getApp()
app.gloablData.url......
另外onLaunch是个方法,和它类似的包括下面的,都是些事件函数,事件到了自动执行。
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
这段代码可通过在微信开发者工具里,新建page而自动生成在js里面。
本段的示例代码里面:onLaunch的function里使用了wx.login方法,该方法就相当于获取到了微信的一些数据比如code。开发者可以拿到这个code换取openid以此来确定登陆者的id。wx有很多方法,请参考官方文档的 api
https://developers.weixin.qq.com/miniprogram/dev/api/
看了app.js,再回头看pages下面某个页面的js就会发现,他们和app.js是一样的,只是他们的对象不是APP,而是Page当前页