小程序的js有些额外的成员
- App 方法 用于定义应用程序实例对象
- Page 方法 用于定义页面对象
- getApp 方法 用于获取全局应用程序对象
- getCurrentPages 方法 用来获取当前页面的调用栈（数组，最后一个就是当前页面）
- wx 对象 用来提供核心API的
配置小程序
全局配置
在小程序根目录下的app.json 文件用来设置全局配置，完整的配置参数参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
页面配置
在每一个page文件下都有一个.json文件，是页面的配置文件，完整的配置参数参考：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
sitemap 配置
小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。
场景值
场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表：https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html。
获取场景值
在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync 中获取上述场景值。
注册小程序
每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等
代码示例如下：
//app.js
App({
onLaunch (options) {
// 小程序初始化完成时触发，全局只触发一次
},
onShow(options){
// 小程序启动，或从后台进入前台显示时触发
},
onHide(){
// 小程序从前台进入后台时触发
},
onError (msg) {
// 小程序发生脚本错误或 API 调用报错时触发
console.log(msg)
},
onPageNotFound(){
// 小程序要打开的页面不存在时触发
}
})
注册页面
对于小程序中的每个页面，都需要在页面对应的 js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等
注册页面的三种方式：
- 使用page构造器注册页面
- 在页面中使用behavior
- 使用Component构造器构造页面
三者适用的场景
| 描述 | |
|---|---|
| page | 简单的页面可以使用 Page() 进行构造 |
| behavior | 页面可以引用 behaviors,behaviors 可以用来让多个页面有相同的数据字段和方法 |
| Component | 复杂的页面使用 Component 构造器来构造页面。 Component 构造器的主要区别是：方法需要放在 methods: { } 里面 |
page构造器注册页面使用示例：
Page({
data: {
number: 1
},
onLoad: function (options) {
// 页面创建时执行
},
onShow: function () {
// 页面出现在前台时执行
},
onReady: function () {
// 页面首次渲染完毕时执行
},
onHide: function () {
// 页面从前台变为后台时执行
},
onUnload: function () {
// 页面销毁时执行
},
onPullDownRefresh: function () {
// 触发下拉刷新时执行
},
onReachBottom: function () {
// 页面触底时执行
},
onShareAppMessage: function () {
// 页面被用户分享时执行
},
onPageScroll: function () {
// 页面滚动时执行
},
onResize: function () {
// 页面尺寸变化时执行
},
onTabItemTap(item) {
// tab 点击时执行
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// 事件响应函数
viewTap: function () {
this.setData({
number: this.data.number + 1
}, function () {
// this is setData callback
})
},
// 自由数据
customData: {
hi: 'MINA'
}
})
页面路由
在微信小程序中，路由的跳转有五个：
- wx.switchTab() 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面参数
- wx.reLaunch() 关闭所有页面，打开到应用内的某个页面
- wx.redirectTo() 关闭所有页面，打开到应用内的某个页面
- wx.navigateTo() 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
- wx.navigateBack() 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层
组件
组件需要放在components 文件下
Component 创建自定义组件
组件的生命周期
created->lifetimes.attached()->pagelifetimes.show()->ready
(组件创建-》组件实例进入页面节点树时-》页面被显示-》组件布局完成后)
组件间的传值
父组件向子组件传值
通过 属性名="{{属性值}}"
在父组件.json 文件中导入子组件
"usingComponents": {
"child":"../components/child/index"
}
在父组件.wxml文件中以组件名作为标签使用组件
<child childItem="{{item}}"></child>
子组件在js中通过properties接收，可以指定接收数据类型
properties: {
childItem: {
type: String,
value: "测试"
}
},
子组件向父组件传值
自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项
子组件用this.triggerEvent('父组件自定义事件', '要传递的参数'，'事件选项')，触发父组件传过来的自定义事件
this.triggerEvent('childFn',"子组件向父组件传值")
在父组件的子组件标签自定义事件，传给子组件
<child childItem="{{item}}" bind:childFn="getChildFn"></child>
或者
<child childItem="{{item}}" bindchildFn="getChildFn"></child>
执行父组件自定义事件绑定的函数就可以接受子组件传过来的数据
getChildFn:function(event){
// 获取子组件传过来的值
console.log(event.detail)
}
Behavior
behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”
网友评论