消息通知

快速开发微信小程序之主要步骤

一、背景

记得11、12年的时候大家一窝蜂的开始做客户端Android、IOS开发,我是14年才开始做Andoird开发,干了两年多,然后18年左右微信小程序火了,我也做了两个小程序,一个是将原有牛奶公众号的功能迁移到小程序,用户体验得到极大的提升,另外一个是给XX做的一个简单的卖蜂蜜的小程序,当时投入3个人,两周左右搞定。

济南微信小程序开发其实还是比较简单的,小程序端代码和Vue整体架构差不多,比较复杂的就是登录和支付这两块,因为这两块涉及到三方交互(小程序端、开发者服务器、微信服务端),今天讲一下登录这块是怎么一个交互的(这个18年时候做的事情,现在微信有些接口可能有所调整,但变化不会太大)

二、一些名词概念

1、openid:普通用户标记,对当前开发者账号是唯一的,一个openid对应一个具体的应用,不同的公众号不同的小程序会给同一个微信用户分配不同的openid。

2、unionid:微信用户统一标记,一个开放平台账号下同一个微信用户unionid是唯一的,需要在微信开放平台绑定公众号/小程序。

开发小程序

案例说明:牛奶应用开始是开发公众号-服务号,这个时候用户注册到我们表里会有一个openid_1,然后小程序火起来了,我们决定开发小程序,但小程序会重新给同一个用户分配一个openid_2,这就不好了,你不能让一个用户在公众号上可以看到他自己的订单,然后跑到小程序后找不到订单是吧,咋整呢,微信还有一个开放平台,你再申请一个邮箱去注册一下开放平台,然后把公众号和小程序都在里边绑定一下,这样他就会给你分配一个统一的unionid。

3、session_key:用于用户解密微信用户数据,接口返回敏感数据是密文的,如unionId,手机号等,需要用session_key做为密钥去解密。

三、微信提供和登录相关几个主要接口

小程序端调用

1、wx.login():获取临时登录凭证CODE,有效时间为5分钟,使用后就立即失效。

2、wx.authorize():发起用户授权请求,如要获取用户信息,地理位置,保存相册、摄像头等需要调用该接口得到用户的授权。

3、wx.getUserInfo():得到加密码的用户数据,返回encryptedData数据,加密向量值IV,将数据传给服务端,服务端完成解密用户信息注册等,调用该接口前必须先调用上面两个方法。

开发者服务器调用

1、jscode2session:通过CODE获取openid、unionid、sessiooo_key。

四、调用交互图