1.

一.用户授权和判断是否授权

2.

1.用户授权

3.

需使用button按钮，必须填写属open-type和调起授权窗口的事件bindgetuserinfo，canIUse判断小程序的api，回调,参数,组件等是否在当前版本可用，定义在当前页面的data里面

buttonwx:if"{canIUse}"open-type"getUserInfo"bindgetuserinfo"getUserInfo"/buttondata:{userInfo:{},canIUse:wx.canIUse('button.open-type.getUserInfo'),getPhone:false},4.

如果你想点击别的图片调动授权窗口，可以把button设置成和图片一样的尺寸，显示在图片上方，背景设置透明就可以

5.

比如我想点击下图中的放大镜弹出授权窗口

6.

wxml这样写

viewclass"scanCode"imagesrc"/images/index/qr_code.gif"/image/view!--调起授权弹窗--buttonopen-type"getUserInfo"bindgetuserinfo"getUserInfo"/button7.

wxss这样写（具体的页面布局根据你自己的情况写）

.scan.scanCodeimage{width:576rpx;height:396rpx;}.scanbutton{width:390rpx;height:396rpx;border-radius:50%;position:absolute;top:6rpx;left:50%;transform:translateX(-52%);background:transparent;}8.

2.判断是否授权wx.getSetting是用来判断用户是否授权的，而只有用户授权了以后才能获取用户信息

wx.getSetting({success:res{//这里的res回调值里面包含的信息很多，不只用户信息,具体看你想要的授权是什么授权if(res.authSetting['scope.userInfo']){//已经授权，可以直接调用getUserInfo获取头像昵称，不会弹框wx.getUserInfo({success:res{//可以将res发送给后台解码出unionIdthis.globalData.userInfores.userInfo//由于getUserInfo是网络请求，可能会在Page.onLoad之后才返回//所以此处加入callback以防止这种情况if(this.userInfoReadyCallback){this.userInfoReadyCallback(res)}}})}}})9.

3.授权获取用户手机号

实现思路：10.

1、通过wx.login获取code,把code传给后台，后台再去访问微信接口获取到用户的openID和sessionKey，但是后台不能直接把openID或者sessionKey发给前台（不安全），而是需要用一个单独的字段与openID和sessionKey做关联后传给前台，作为前台登录成功的标识，就相当于cookie在本地浏览器存储的session一样，前台接收到返回的标识存储在本地，也可以自己设置存储的变量名（假如是userId）

11.

2、前端通过button按钮触发getPhoneNumber事件，用户允许授权后（e.detail.errMsg'getPhoneNumber:ok'）获取encryptedData，iv

12.

3、把【encryptedData】、【iv】、【userId】通过request请求传给后台，后台接收到解密获取用户手机号，返回给前台，前台再存储在本地，以便做其他逻辑判断或者后期使用

前台遇到的问题13.

通过getPhoneNumber获取用户手机号时，如果用户绑定了手机号，0k一切顺利，如果用户没有绑定手机号，微信会提示你去绑定手机号（我专门解绑了我的手机号进行测试的），按照页面的流程操作验证就可以了，最后绑定成功就会弹出授权框了

14.

二.关于真机预览背景图片不显示的问题

15.

背景图片必须是服务器地址，https://开头的，src里面的图片地址是本地的地址

16.

三.背景图片全部显示在盒子内

background-image:URL('https://....');background-size:100%100%;17.

四.微信支付

18.

1.微信认证

19.

个人账号暂不支持微信认证,请申请企业账号

20.

因为这个业务还没做完，做完再分享。。。

21.

五.手机验证码执行流程

22.

1、单击“获取短信验证”按钮，将会对手机号进行非“空”判断。

23.

　　a)如果为空，给出提示：请输入手机号。

24.

　　b)如果不为空，判断手机号是否符合规则，不符合给出“手机号不符合规则”提示

25.

　　c)当手机号不为空并且符合规则，就进行第二步

26.

2、弹出验证码输入框。

27.

　　a)页面随机生成4位验证码（包括数字与字母）并且将手机号存放在cookie里面

28.

　　b)用户输入验证码，并且单击“确定”按钮，将会对验证码进行非“空”与匹配判断

29.

　　c)如果验证码为空或不匹配，则按钮不对其反应。

30.

　　d)如果不为空且验证码匹配，则向后台发送请求（带有手机号参数），请求“发送短信”

31.

　　e)用户收到短信验证码。并且输入验证码，点击完成注册。后台将会对手机号，验证码进行判断。当验证码与手机号不匹配，会给出提示。当两个匹配时，将注册成功。

32.

六.获取unionID

33.

unionID是用户登录小程序的唯一标识，是面向多平台的，比openId更准确，unionID的获取还是login登录后通过前台传给后台的code来获取的，如果这个用户是多平台账号，后台就会解密出unionID,再用字段关联返给前台，作为登录凭证