独立开发者系列（19）——小程序注册与基础

   小程序和后端的交互是一个必须掌握的交互逻辑。在微信小团队的设计下，非常巧妙的设计了一套交互逻辑，保证了小程序和系统后端的安全性。示范一个常用的开发思路。

                            （1）注册篇

小程序的开发是独立开发者里面必不可少的一环，一整套注册流程非常繁琐。对于程序员而言，很多时候，并不怕代码难度有多高，而是怕各种复杂流程。仔细折腾一圈，发现不经常走流程，还是一样被折腾的很麻烦。此篇文章全部用来记录注册小程序的各种细节以及开发配置。

先走流程准备，身份证/营业执照/邮箱/手机号信息，特别说明，公众号邮箱和小程序邮箱必须是不同的，也就是账号是以邮箱为维度的。（当前的邮箱又关联了手机号，而且现在邮箱服务商没有以前那么多了，直接导致可用邮箱数量大幅度减少，推荐qq.com  163.com  88.com  三方各自注册一个使用，要不然非常容易满，我本身邮箱在之前注册公众号用完了，后面发现要注册新的，全部要搞新的）

缴费通过认证（如果是公众号认证过，可以复用公众号的认证相关信息，节省300块钱，在之前是需要分开认证的，所以默认推荐先注册一个认证公众号，再注册认证的小程序，基本有用户，还是公众号的服务更方便点）
 

设置名字（名字注意不能侵权）否则肯定是不给通过的。设置名字之后，就可以登录，需要立刻找到开发者（一般管理员）绝大部分情况下，注册信息都是客户的，你只能申请为开发者，如果你自己是管理员无所谓。立刻跳转到成员管理，将自己作为开发者加入进去。

。

体验程序:基本是其他验收人员和内部开发人员，测试体验都是内部测试人员。

备案:小程序的备案也比较复杂，按照指定流程走完。

                             （2）登录原理

   首先，用户登录小程序的时候，会通过小程序的客户端，生成一个加密openid+unionid的字段，这个字段需要发送到服务器端，服务器端可以通过appid和secret换到自己需要的相关信息。

 'https://api.weixin.qq.com/sns/jscode2session?appid='.$appid.'&secret='.$key.'&js_code='.$code.'&grant_type=authorization_code'

该接口开发文档:

小程序登录 | 微信开放文档  

主要功能:通过前端小程序基础框架wx.login接口生成一个长串的加密串，用来告诉服务器端，该微信登录了，你可以获取到我的openid和unionid。微信端返回的数据格式是json，也就是可以直接解析json就拿到微信服务器端返回的数组，如果没有获取到，表示数据格式异常，请求的数据有问题。

微信如果实现免登录功能，在这一步，拿到openid去数据库直接匹配，就可以让用户直接登录，如果是要实现30天重新登录一次，需要在用户登录的时候，更新updatetime,然后，每次登录都对比这个账号登录时间，或者生成一个30天的token，每次登录的时候，检查用户登录的token是否还存在，存在就能一直登录，不存在，就需要重新跳转到用户登录页面去登录。

  理论上，通过服务器端的接口可以直接返回openid,然后在注册页面将用户的openid参数+username+phone一起提交，出于安全性的考虑，一般不直接返回openid。这个时候，有俩种解决办法，一种是给openid进行一次对称加密处理，，然后前端传递username+phone+加密后的openid,这样用户手机号信息就和用户关联到一起了，后端对openid进行解密。这样就保护了openid的安全，又能将手机号和openid进行绑定。

第二种思路是返回一个唯一的key,这个key是一般储存到redis里面，而这个key值就储存了一个openid相关的数组。这无疑加大了技术的复杂度，因为涉及到redis的部署，如果是使用量大，还需要考虑单独的redis服务器来管理，但是用户量或者需要储存的数据量就是比较多的时候，这几乎是唯一办法。小程序端进行注册的时候，发送给服务器，通过key读取到里面储存的有openid相关信息的数组。因为储存的是数组，所以信息相对比较多，比如可以储存用户最近一次什么时候登录，登录的unionid，或者其他相关备注。而且我们可以规定，用户登录我们小程序必须有个注册时间限定，也就是用户登录了我们小程序必须在规定时间内完成注册，否则我们就假定该用户没来过。

通过上面的描述，就完成了用户openid和phone的绑定。

抓取用户的基本信息注册，方便一键头像和昵称之类的，方便识别用户对应上微信。位客服工作和客户的便捷度提供支持。调用微信小程序的客户端    wx.getUserProfile({

      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

      success: (res) => {

        this.setData({

          userInfo: res.userInfo,

          hasUserInfo: true

        })

      }

    })

将用户的头像和昵称自动填入，也可以拒绝，就是默认灰色头像。这样微信端用户小程序登录基本完成。