微信小程序笔记
文件构成
全局文件
- app.json
小程序全局配置文件，必要，自动生成
- app.js
小程序入口JS文件，一般只需申明全局变量、处理生命周期以及版本升级即可，必要
- app.wxss
小程序全局CSS样式文件，非必要
- app.wxml
小程序全局HTNL文件，非必要
页面文件
[page]为页面自定义名称，可随意，但建议具有语义性的命名
- [page].json
页面配置文件
- [page].js
页面JS文件，一般实现具体的逻辑处理、网络请求等
- [page].wxss
页面CSS样式文件
- [page].wxml
页面HTNL文件
基本原理
小程序分为两个部分 webview 和 appService 。其中webview主要用来展现UI，appService有来处理业务逻辑、数据及接口调用。
App()是小程序唯一实例，页面中可通过getApp()获取该实例，而Page()是页面实例。
// app.js
globalData: {
name: 'zzz'
}
// page.js
const name = getApp().globalData.name
生命周期
onLoad——页面加载，调一次，可在参数内获取跳转URL传递的参数
onShow——页面显示，每次打开/切入前台时页面都调用
onReady——初次渲染完成，调一次
onHide——页面隐藏/切入后台，当navigateTo或底部tab切换时调用
onUnload——页面卸载，当redirectTo或navigateBack时调用
graph LR
onLoad页面加载-->onShow页面显示
onShow页面显示-->onReady页面渲染
onReady页面渲染-->onHide页面隐藏/后台
onHide页面隐藏/后台-->onUnload页面卸载
基础语法
数据更新
小程序内数据更新必须使用setData函数异步更新
this.setData({
key: value
}, [function])
// 参数二为可选参数，接受一个函数作为异步更新数据的回调
数据获取
数据获取直接使用对象链即可
const name = this.data.name
数据绑定
插值表达式
{{ name }}
数据遍历
wx:for
wx:for="{{ array }}" wx:key="id"
// 默认：当前项item，索引index
{{ item.id }} - {{ index }}
// 可选参数
wx:for-item="myItem" wx:for-index="myIndex"
{{ myItem.id }} - {{ myIndex }}
条件
wx:if
wx:else
const isShow = true
wx:if={{ false }}
wx:else={{ isShow }}
...
跳转
内部跳转
- wx.navigateTo
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）
wx.navigateTo({
url: /pages/welcome/index?name=${name}
})
- wx.redirectTo
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.redirectTo({
url: /pages/welcome/index?name=${name}
})
- wx.switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数
wx.switchTab({
url: '/pages/index/index'
})
- wx.navigateBack
关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.navigateBack({
detal: 1
})
- wx.reLaunch
关闭所有页面，打开到应用内的某个页面
wx.reLaunch({
url: '/pages/index/index'
})
WXML标签，跳转任意页面，可添加属性实现跳转其他小程序
// page.wxml
// 跳转小程序
跳转外部小程序
- wx.navigateToMiniProgram
打开另一个小程序
wx.reLaunch({
appId: '12345678',
extraData: {} // 跳转参数
})
详细参数建议阅读 “wx.navigateToMiniProgram｜微信开放文档”
- wx.navigateBackMiniProgram
返回上一个小程序
wx.reLaunch({
extraData: {} // 返回参数
})
跳转内嵌H5
web-view
承载网页的容器，每个页面只能有一个 web-view，会自动铺满整个页面，并覆盖其他组件。
跳转至web-view页面并赋值src属性即可
// webview.wxml
// webview.js
page({
onLoad() {
this.setData({ src: 'http://xxxxx' })
}
})
详细内容建议阅读 “web-view｜微信开放文档”（重要）
通信
函数传参
小程序函数传递参数语法区别于Vue，不能直接使用bindtap=”handle(item)”，需要使用 data- 属性绑定参数
注意：参数名不支持大写，不支持驼峰命名，例如 userName –转换–> username
// page.wxml
// 1
// 2
// 多参数
// page.js
handle(e) {
const item = e.currentTarget.dataset.item // 1: item
const name = e.currentTarget.dataset.username // 2: zzz
}
跳转传参
跳转页面path上直接拼接参数即可
wx.navigateTo({
url: '/pages/welcome/index?name=zzz'
})
// welcom/index.js
onLoad(options) {
const name = options.name // zzz
}
与内嵌H5通信
小程序 –> H5
与跳转传参一致，url后拼接参数即可
// webview.js
page({
onLoad() {
this.setData({ src: 'http://xxxxx.com?data=xxx' })
}
})
H5 –> 小程序
需要先引入wxsdk
// 1.npm下载sdk，weixin-js-sdk是非官方npm包，官方并未维护微信sdk的npm包
npm i weixin-js-sdk
import wxsdk from 'weixin-js-sdk'
// 2.直接下载官方jssdk到本地
// 需要做些处理，将jssdk文件内第一个this改为window，然后在文件最后加上 export default wxsdk
import wxsdk from './lib/jweixin-1.3.2'
1.与跳转传参一致，url后拼接参数即可
wxsdk.miniProgram.navigateTo({
url: '/pages/index/index?data=111'
})
2.postMessage
// 官方api，但局限性大，只能在特定情况（小程序后退、组件销毁、分享）才会触发
wxsdk.miniProgram.navigateBack()
wxsdk.miniProgram.postMessage({
data: {
// 参数写在data里
key: value
}
})
未完待续…
Original: https://www.cnblogs.com/zh1q1/p/15243016.html
Author: 吴知木
Title: 微信小程序笔记
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/599568/
转载文章受原作者版权保护。转载请注明原作者出处！