微信小程序> 微信小程序开发中遇到的问题(一)

微信小程序开发中遇到的问题(一)

浏览量:2723 时间: 来源:chongwenwen

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

    1. 用户授权   

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

<button wx:if="{canIUse}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>
data: {    userInfo: {},    canIUse: wx.canIUse('button.open-type.getUserInfo'),    getPhone:false},

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

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

           

 

    wxml这样写       

 <view class="scanCode"><image src="/images/index/qr_code.gif"></image></view> <!--调起授权弹窗 --> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>

 

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

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

 

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

   

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

  

   3.授权获取用户手机号 

  • 实现思路:

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

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

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

  • 前台遇到的问题

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

 

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

 

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

 

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

     

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

 

四.微信支付

 

   1.微信认证

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

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

 

五.手机验证码执行流程

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

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

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

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

    2、弹出验证码输入框。

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

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

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

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

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

 

六.获取unionID

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎