小程序的双向绑定
<!-- 输入框主要是通过 model:value="{{变量}}" 实现数据的双向绑定 -->
<view>
<view>keyword: {{keyword}}</view>
<input model:value="{{keyword}}" type="text" placeholder="输入搜索内容" />
</view>
小程序页面间有哪些传递数据的方法
- 使用全局变量实现数据传递 globaData
- 使用本地缓存 setSessionSync()
- 使用 wx.navigateTo 和 wx.redirectTo 的时候，可以将部分数据放在 url 里，并在新页面 onLoad 的时候初始化 onLoad(options)
小程序页面的生命周期函数及其App生命周期函数
页面声明周期函数：
- onLoad：监听页面加载，一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
- onReady：监听页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
- onShow：监听页面显示
- onHide：监听页面隐藏，如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
- onUnload：监听页面卸载，如 redirectTo 或 navigateBack 到其他页面时。
APP 声明周期函数：
- onLaunch：监听小程序初始化，当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。
- onShow：监听小程序启动或切前台，当小程序启动，或从后台进入前台显示，会触发 onShow。
- onHide：监听小程序切后台，当小程序从前台进入后台，会触发 onHide。
- onErro：错误监听函数，当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。
微信小程序的优劣势
优势：
- 即用即走，不用安装，省流量，省安装时间，不占用桌面；
- 依托微信流量，天生推广传播优势；
- 开发成本比 App 低。
劣势： - 用户留存，即用即走是优势，也存在一些问题；
- 入口相对传统 App 要深很多；
- 限制较多，页面大小不能超过2M。不能打开超过10个层级的页面。
bindtap 和 catchtap 的区别
相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。
不同点：他们的不同点主要是 bindtap 是不会阻止冒泡事件的，catchtap 是阻止冒泡的。
简述下 wx.navigateTo()，wx.redirectTo()，wx.switchTab()，wx.navigateBack()，wx.reLaunch()的区别
wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.redirectTo()：关闭当前页面，跳转到新的页面（类似重定向）。但是不允许跳转到 tabbar 页面。
wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
wx.navigateBack():关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面。
小程序父子组件之间的传参
父向子（属性绑定）: properties
子向父（自定义事件）：triggerEvent
哪些方法可以用来提高微信小程序的应用速度
- 提高页面加载速度
- 用户行为预测
- 减少默认
data的大小 - 组件化方案
- 分包
如何实现下拉刷新
- 首先在 app.json 中的 window 配置 enablePullDownRefresh
- 在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法
- 请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新
登录流程
首次登录
- 先调用 wx.login 获取临时登录凭证 code；
- 将这个 code 传给后台服务器，获取微信用户唯一标识 openid 及本次登录的会话密钥（session_key、token）等；
- 拿到开发者服务器传回来的会话密钥（session_key、token）之后，前端要保存
wx.setStorageSync('sessionKey', 'value')或者wx.setStorageSync('token', 'value')。
wx.login({
success (res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'https://example.com/onLogin',
data: {
code: res.code
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
二次验证
- 获取缓存中的session_key，
wx.getStorageSync('sessionKey') - 如果缓存中存在session_key，那么调用小程序 api 接口 wx.checkSession() 来判断登录态是否过期，回调成功说明当前 session_key 未过期，回调失败说明 session_key 已过期。登录态过期后前端需要再调用 wx.login() 获取新的用户的 code，然后再向开发者服务器发起登录请求。
持久登录状态：session或者token信息存放在cookie或者header的Authorization中以请求头的方式带回给服务端，放到request.js里的wx.request的header里。
小程序支付的流程
查看登录，创建订单，发送请求，后台生成订单并返回参数，包括：时间戳、随机字符串、package（prepay_id）、签名等。再调取 wx.requestPayment 进行支付
wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success (res) { },
fail (res) { }
})
支付宝支付流程
- 购物车页面点击购买按钮，将商品信息、金额等参数，传给后端服务器；
- 后台根据商品信息生成订单信息，返回给前端；
- 前端收到订单信息，向用户展示订单信息，用户确认无误后，点击支付，向后台发送支付请求；
- 后台根据订单号、金额向支付宝接口发送预支付请求；
- 支付宝收到请求，审核订单，根据订单信息，向后台返回支付链接；
- 后台收到支付链接，返回给前端；
- 前端收到支付链接，直接跳转到这个支付链接，进行支付。
授权
用户信息授权：wx.getUserProfile()文章来源：https://www.toymoban.com/news/detail-559632.html
- 新版授权：每次点击按钮，不管是否授权过，都会弹出授权窗口。
wx.getUserProfile({
desc: "获取微信头像昵称用于权限调用",
success: (data) => {
// 用户允许时触发
console.log(data);
this.setData({
useInfo: data.userInfo,
});
},
fail: (res) => {
// 用户拒绝时触发
console.log(res);
wx.showToast({
icon: "none",
title: "需要授权请重新点击",
});
},
});
- 旧版授权：必须使用固定格式的 button 才可以弹起授权窗口，如果拒绝，下次点击还可以弹出授权窗口。如果允许授权，再次点击就不再弹出授权窗口了，可以通过 “清理授权数据” 将之前的授权信息清理。
// open-type="getUserInfo" 并结合bindgetuserinfo事件，可以获取到用户信息（是否授权）
<button open-type="getUserInfo" bindgetuserinfo="oldState">旧版本 getUserInfo API</button>
// 先判断用户是否授权
wx.getSetting({ // wx.getSetting 方法获取用户的当前设置（查看是否授权）
success(res) {
//如果 res.authSetting['scope.userInfo'] 有值时，代表已授权
if (res.authSetting["scope.userInfo"]) {
wx.getUserInfo({
success(data) {
console.log(data);
},
fail(err) {
console.log("--", err);
},
});
} else {
wx.showToast({
icon: "none",
title: "请先授权",
});
}
},
fail() {},
});
普通授权：定位、录音、收货地址等。使用 wx.authorize()，这个 API 不能用于用户信息授权。文章来源地址https://www.toymoban.com/news/detail-559632.html
- wx.authorize() 会弹起授权窗口，用户 拒绝/同意 之后，再次调用不会弹出授权窗口了，需要使用 openSetting() 引导用户进入设置页面，对已经请求过的权限进行打开或关闭。
- 授权状态会一致保存在小程序后台，直到用户删除小程序，状态才会丢失。
- 在调用 wx.authorize() 之前，会先通过 getSetting() 获取当前授权状态，再决定是否进行授权。
wx.getSetting({
success(res) {
if (!res.authSetting["scope.record"]) {
// 发现没有授权过，就可以弹出授权窗口了。
wx.authorize({
scope: "scope.record", // scope表示权限范围，你要申请什么权限
success(res) {
// console.log("授权结果: ", res);
// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
// wx.startRecord()
},
fail(res) {
wx.showToast({
icon: "none",
title: '想重新授权，请在"设置-权限"中修改',
});
},
});
}
},
});
注意：
1. wx.openSetting() 打开设置页面，对用户已经向小程序请求过的权限进行二次修改；没有向小程序申请过权限的是不会展示的；
2. wx.getSetting() 获取用户权限设置列表，返回值中只包含用户已经向小程序请求过的权限和一些默认的权限信息，比如：通讯地址，发票抬头，发票等不需要 wx.authorize() 进行授权。
自定义 tabbar
- 在 app.json 中的 tabBar 项指定 custom 字段为 true，同时其余 tabBar 相关配置也补充完整。虽然原始的 tabbar 配置也要求配置完整，但是这些配置不会生效。
- 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。
- 在项目根目录下添加入口文件夹: custom-tab-bar，并创建 Component，命名为 index。
- 在 Component 组件中添加 tabbar 配置和 methods(参考示例工程)。
- 将示例工程的 wxml 和 wxss 代码赋值到项目对应的文件中。
- 在每个 tabbar 的 page 页面中，补全 onShow 函数，设定 tabbar 的选中状态，否则会导致选中状态始终是同一个 tabbar。
分包
- 按照小程序分包文档配置项目目录结构，在 app.json 中配置 subpackages；
- 将分包后的页面路径，从 pages 配置中删除，同时页面导航跳转时，也修改为分包路径；
- tabbar 对应的 Page 必须放在主包内；
- subpackages 之外的页面默认打包到主包内部。
独立分包
- 独立分包不能依赖于主包和分包的内容：比如 wxss、template、js 等；
- 独立分包可以自主运行，不会去加载主包和分包内容，因此无法获取全局的 App 实例，小程序提供了解决方案；
- 只有从主包或者分包页面进入小程序，主包才会被加载，全局 App 才会被注册；
- 一般独立分包，应用于小程序的启动页。
分包预下载
- 在进入某个页面的时候，提前对页面内部的分包进行预下载，提升进入某个分包页面时的启动速度。
- 一个包预下载的限额是 2M，如果预下载的包内有多个页面，这些页面累计下载量不能超过 2M。
"preloadRule": {
"pages/index/index": {
"network": "all", // 什么网络进行与下载，all/wifi
"packages": ["home", "cates"] // 要预下载的包名，每个包都有一个name属性。
}
},
到了这里，关于微信小程序相关知识点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
