微信小程序基础到进阶(共6节)
登录授权
登录流程
- 小程序wx.login() 获取code
- code为当前用户的临时登录凭证，有时效，5min
- wx.request()发送请求向开发者服务器，携带code
- 开发者服务器向微信服务器发送请求，通过微信凭证校验接口
- 换取ssession_key和openid
- ssession_key是用户当前会话的秘钥；这个秘钥是对用于数据进行加密签名的秘钥
- openid 是用户在小程序里面的唯一标识
- 开发者服务器将ssession_key和openid组合生成登录态标识
- 开发者服务器将ssession_key和openid和登录态标识存入到数据库
- 开发者服务器向小程序端返回登录态标识(token)
- 小程序将登录态存入storage
- 以后wx.request()发起业务请求携带登录态标识；
- 开发者服务器通过登录态标识查询到用户的ssession_key和openid
- 通过openid对用户的数据进行存取操作，同时将结果返回小程序端
前端需要做的是：通过wx.login()获取code，并将code发送给后台，后台返回token给我们，以后发送请求需要携带token
- code和session_key是一一对应关系
- 同一个code只能换取一个session_key
- session_key 有实效性
- 比code时间长
- 用户使用频率越高， session_key过期时间越长
- openId => appId
- session_key => appKey
加入购物车
- 选择商品，点击加入购物车，将商品的（id、price、number等），携带过去；
- 检查storage中的car中是否有此商品id
- 如果有，直接将该商品的number + 1
- 如果没有直接push到storage中的car；
购物车逻辑
购物车逻辑分为4个：
- 加减商品数量
- 点击选择该商品
- 删除某个商品
- 全选和取消商品
- 统计数量和价格
获取地址授权
- 获取地址也是权限问题，先获取权限
- 通过wx.getSetting() => res的authSetting
// 获取地址 res.authSetting['scope.address']
- undefind 没有获取过授权
- true 授权同意过
- false 授权拒绝过
//1. 获取授权能力
let res = await ml_getSetting()
//2. 判断
if(res.authSetting['scope.address'] === false) {
await ml_openSetting()
}else {
// 继续获取地址
this.chooseAddressByPhone()
}
- 如果是false的话，通过wx.openSetting()手动开启授权功能
- 如果是true或undefind话，通过wx.chooseAddress() 获取地址；
Page({
// 获取用户信息 => 登录
async getUserInfo(e) {
//1. 拿到 四个参数
const { encryptedData, iv, rawData, signature } = e.detail
console.log(encryptedData, iv, rawData, signature)
//2. 拿到 code
let { code } = await ml_wxlogin()
console.log('获取code的', code)
//3. 登录获取token
let res = await ml_requestToken({
data: { encryptedData, iv, rawData, signature, code }
})
console.log('获取token', res.data.message.token)
//4. 判断
if (res.data.meta.status === 200) {
//4.1 保存token到本地
wx.setStorageSync('token', res.data.message.token)
await ml_showSuccessToast('授权成功')
setTimeout(() => {
//4.2 返回到上一页
wx.navigateBack({
delta: 1
})
}, 2000)
}
}
})
- 微信小问题
- wx.showToast 和wx.navigateTo连用时，弹窗一闪而过
- 解决办法：用定时器延迟两秒处理
订阅消息
- 下发条件说明
- 支付
- 提交表单
分享转发
- 方式一 onShareAppMessage函数
- 只有页面定义了此事件处理函数，右上角才会显示转发按钮
- 用户点击转发按钮时调用
- 此事件需要retur一个object，用于自定义转发内容
- 方式二：页面内发起转发
- button的open-type="share",用户点击触发Page.onShareAppMessage函数
- 如果当前页面没有定义此事件，则点击后无效
- wx.showShareMenu
- 显示当前页面的转发按钮
- wx.hideShareMenu
- wx.updateShareMenu
- wx.getShareInfo
- 获取转发详细信息
打开app
-
主动触发
-
同一微信开发平台账号
- 登陆移动应用对应的微信开放平台，有个绑定小程序的入口，这里可以绑定对应的小程序应用，通过绑定小程序，可以将移动应用和小程序应用同属于同一微信开发平台账号之下
-
只支持分享只好友会话
-
app也需要进行相关设置
-
使用模板消息条件
- 小程序打开app流程
WePy
- npm i wepy -g
- wepy init standard wepy-demo
- build出来的dist目录，用微信开发者工具打开，可展示wepy项目
- 需要关闭开发者工具三个选项
- es6转es5
- 上传代码时样式自动补全
- 上传代码时自动压缩
小程序加载优化
- 小程序每个页面的Page方法接受个Object参数，
- 在小程序启动时，会将所有页面来调用page方法注册页面时，传入的Object对象存入队列，
- 每次进行页面访问的时候，微信小程序都会创建一个新的对象实例，这里创建对象实例的方式是通过深拷贝的方式来实现；
- 基于这样的加载方式，就给了我们优化的空间
- 在跳转下个页面行为触发的时候，可以预先加载下个页面的数据
- 在下个页面onLoad阶段可以直接使用上个页面预查询的数据；
-
图片方案
-
分包加载
