1.项目结构:
1.1如图
1.2. app.js结构:
//app.js
App({
//小程序生命周期函数
onLaunch: function () {
},
//全局变量
globalData: {
userInfo: null
}
})
app.js中最外层为App({}), 方面需要一个对象,对象中有小程序生命周期函数、全局自定义函数、以及全局变量
1.3 index.js结构(页面js结构):
//index.js
//获取应用实例
const app = getApp()
Page({
//页面局部变量
data: {
motto: 'Hello World',
},
//事件处理函数
bindViewTap: function() {
},
//页面周期函数
onLoad: function () {
}
})
2. 事件:
2.1定义
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches
2.2 特征(小程序中bind开头,html中on开头):
点击事件:bindtap,相当于onclick
3.生命周期函数,分小程序生命周期和页面生命周期函数:
3.1 小程序生命周期函数定义在app.js中,
如: onLaunch: function(){}
3.2同时里面还可以定义全局变量,在其他页面js中通过如下方式获取全局变量:
// other.js
const app = getApp()
console.log(app.globalData) // I am global data
3.3 小程序生命周期函数详情:https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
3.4 页面生命周期函数:https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
4 组件(html标签)
https://developers.weixin.qq.com/miniprogram/dev/component/view.html
5. 逻辑层将数据渲染到视图层
MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS
直接操控 DOM
,JS
只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/index.html
6.事件
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
7.api(相当于js提供的一些原生方法)
https://developers.weixin.qq.com/miniprogram/dev/api/index.html
8.模块化,抽取公共方法或变量放到公共的js中,其他js引入:
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html