首页 » 技术分享 » 微信小程序开发中遇到的问题(一)

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

 

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

    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,再用字段关联返给前台,作为登录凭证

转载自原文链接, 如需删除请联系管理员。

原文链接:微信小程序开发中遇到的问题(一),转载请注明来源!

0