文档章节

微信小程序开发- 5 - 开放功能(登录、购物车)

droden
 droden
发布于 02/21 15:01
字数 1435
阅读 510
收藏 1

行业解决方案、产品招募中!想赚钱就来传!>>>

微信小程序基础到进阶(共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个:

  1. 加减商品数量
  2. 点击选择该商品
  3. 删除某个商品
  4. 全选和取消商品
  5. 统计数量和价格

获取地址授权

  1. 获取地址也是权限问题,先获取权限
  2. 通过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()
}

  1. 如果是false的话,通过wx.openSetting()手动开启授权功能
  2. 如果是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)
    }
  }
})
  • 微信小问题
  1. 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阶段可以直接使用上个页面预查询的数据;

  • 图片方案

  • 分包加载

droden
粉丝 16
博文 99
码字总数 146518
作品 0
朝阳
程序员
私信 提问
加载中
请先登录后再评论。
访问安全控制解决方案

本文是《轻量级 Java Web 框架架构设计》的系列博文。 今天想和大家简单的分享一下,在 Smart 中是如何做到访问安全控制的。也就是说,当没有登录或 Session 过期时所做的操作,会自动退回到...

黄勇
2013/11/03
3.4K
6
我的架构演化笔记 功能1: 基本的用户注册

“咚咚”,一阵急促的敲门声, 我从睡梦中惊醒,我靠,这才几点,谁这么早, 开门一看,原来我的小表弟放暑假了,来南京玩,顺便说跟我后面学习一个网站是怎么做出来的。 于是有了下面的一段...

强子哥哥
2014/05/31
976
3
beego API开发以及自动化文档

beego API开发以及自动化文档 beego1.3版本已经在上个星期发布了,但是还是有很多人不了解如何来进行开发,也是在一步一步的测试中开发,期间QQ群里面很多人都问我如何开发,我的业余时间实在...

astaxie
2014/06/25
2.7W
22
TDD的测试框架--Machine.Specification

Machine.Specification 是一个 TDD 测试驱动开发的测试框架,简化了测试,无需关心语言本身特性。 Machine.Specifications 带来的好处是不需要在代码里有注释,但同时阅读代码的人可以一目了...

匿名
2013/01/22
1K
0
mvc框架--Razor

Razor 是一个轻巧而优雅的servlet mvc框架 # 又一个轮子? no,写就她是为了证实我个人的某些想法,并在这个过程中练练手,这两种冲动碰撞在一起,自然而然地产生了Razor # Razor的现在和未来...

dtubest
2013/01/25
3K
0

没有更多内容

加载失败,请刷新页面

加载更多

数据获取的小技巧

在大数据如此火的时代,我们要获取更多数据,就要进行数据采集,过滤,然后再进行使用。比如当我们在进行一个项目并且需要大量真实数据时,就需要通过爬虫去获得,有些爬取额数据还不能直接使用,...

xiaotaomi7
42分钟前
21
0
docker cp 容器和虚拟机间的数据拷贝

容器复制到主机 docker cp {container_name}:{source_path} {target_path}#例子: docker cp php:www/php.ini /home/alex/php.ini 主机复制到容器 docker cp {source_path} {container_nam......

关元
50分钟前
25
0
spring boot整合kafaka批量消费

spring boot整合kafaka批量消费: 配置文件: kafka: producer: bootstrap-servers: 127.0.0.1:9092 batch-size: 16785 #一次最多发送数据量 retries: 1 #发送失败后的重复发送次数 buffer-m...

漫步行者
55分钟前
7
0
最新苹果多屏电脑控制技术---ios群控/苹果群控/一键实时同步操作/入门安装步骤以及功能讲解

创联苹果群控是一款通过无线发送命令来操作主控手机来带动全部被控手机,主控手机怎么操作被控手机全部同步进行相同操作,支持一键每台手机输入不一样的文字!无需连接USB数据线、无需XP框架...

osc_bodzcw38
56分钟前
10
0
NOIP模拟赛 编码

题目描述 一个字符串str的p型编码a的定义如下:把str表示成b1个c1,b2个c2…bn个cn,然后将b1,c1,b2,c2,…,bn,cn收尾拼接成的字符串中最短的字符串设为a。例如:字符串122344111可被描述为"1个...

osc_wcs4pa6z
56分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部