uni-app开发微信小程序初探

工具准备

要使用uni-app开发框架最好是使用它官方推荐的开发工具HBuilderX

工具下载地址www.dcloud.io/hbuilderx.h…

程序写完之后想预览和调试微信小程序的效果，要在微信开发者工具上进行。

在HBuilderX上运行程序选择微信小程序编译之后，为了顺利在微信开发者工具上预览和调试效果，需要注意下面2点。

1、在HBuilderX配置你安装的开发者工具路径，注意要选到‘微信web开发者工具’这一级

HBuilderX>工具>设置>运行配置>小程序运行配置

2、选择运行到小程序开发者工具之后，要把小程序的远程端口代开，不然HBuilderX不能唤起开发者工具，控制台会报错。

微信开发者工具>设置>安全设置>将服务端口打开

tips:

如果出现微信开发者工具启动后白屏的问题，检查是否启动多个微信开发者工具，如果是则关闭所有打开的微信开发者工具，然后再重新运行.

如果还是不能自动编译打开小程序预览界面，可以运行编译之后找到对应的weixn编译目录，手动在小程序开发者工具上打开。

一般编译后的路径：项目根目录\unpackage\dist\dev\mp-weixin

直接打开后HBuilderX会自动关联，再在HBuilderX上面的修改保存后就可以直接在微信开发者工具上预览了。

实际开发

获取小程序授权手机号登录

1、确认小程序开启了信息授权的功能，具体在小程序开发文档上查询

2、使用绑定目标小程序的开发者权限微信扫码登录微信开发者工具

3、实际代码

tips:这里获取到手机号授权之后有2种解密方案

1、前端解密需要获取到小程序的appid和appSecret明文保存在前端，不安全，不推荐这种写法。

2、后端解密，直接传加密参数等待返回就可。

<button v-if="isChecked" class="bottomBtn" type="default" 
open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">  
    <text>微信授权登录</text>
</button>

// 唤起手机号授权
onGetPhoneNumber(e) {
    if (!this.isChecked) {
        uni.showToast({
        icon:'none',
        title:'请阅读并勾选页面底部协议'
        })
       return
    }
//用户拒绝授权  
if(e.detail.errMsg=="getPhoneNumber:fail user deny"){       //拒绝授权后弹出一些提示  
    uni.showToast({
        icon:'none',
        title:'拒绝授权无法登录'
    })
}else{      
    //允许授权  调用解密的后台接口
    this.onWexiLogin(e.detail.encryptedData,e.detail.iv)
}