微信开发流程总结(基于微信平台)

一、openid 和 unionid 是什么？

• openid：微信小程序的唯一标识码，就想人的身份证号码一样，能在同一主体公众号下面确定小程序
• unionid：unionid 和 openid 在本质上面是没有任何区别的。但如果在同一主体公众号下面有多个小程序的时候，openid是不一样的，但unionid永远是一样的，可以用来判断是否为同一个公众号。

二、怎么获取openid

1. 首先，想要获取到 openid，必须要通过调用微信API接口 wx.login 获取登录凭证（code)。详细文档：wx.login API。

2. 其次，在微信公众号管理平台生成 AppSecret(小程序密钥)。
   生成路径：微信公众号管理平台 => 开发 => 开发设置 => 开发者ID => AppSecret(小程序密钥)

3. 最后，通过得到的 code 和 AppSecret，使用服务端API auth.code2Session 获取openid。详细文档：服务端API auth.code2Session

获取openid的两种方式：

• 方式一：前端自己获取，不安全，不推荐
  GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
• 方式二：后台获取，安全，推荐使用
  调用后台定义的接口，将 code 和 AppSecret 传给后台，后台调用auth.code2Session获取。然后将openid传回前端即可。

三、获取微信绑定的手机号

注意：目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。需谨慎使用，若用户举报较多或被发现在不必要场景下使用，微信有权永久回收该小程序的该接口权限。
所有，要想使用API获取手机号，必须有两个前提条件：

• 小程序主体是不是企业
• 有没有进行微信认证
  否则：将报错 getPhoneNumber:fail Error: 该 appid 没有权限

小程序在主体是企业性质并且已经认证的情况下，只需要复用主体的认证资质即可，无需审核，即时通过！！！申请小程序是可选择，也可在申请后在公众号小程序管理=》小程序详情中申请

参考文章

注意：获取微信用户绑定的手机号，需先调用wx.login接口。

四、配置https

注意： 小程序在网络请求方法只支持 https 协议。

• 开发时，可以关闭 https 校验，从而使用 http 开发。
  关闭路径：微信开发者工具 => 设置菜单 => 项目设置 => 本地设置 => 勾选 不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书
• 上线时，小程序必须配置为https。
  配置流程：
  服务器域名请在 「小程序后台-开发-开发设置-服务器域名」 中进行配置
  在微信开发者工具 => 设置菜单 => 项目设置 => 项目配置 => 刷新域名信息 => 重新编译即可
• 注意: 请详细阅读文档
  必须配置端口，否则正式发布之后接口会失败。(开发版，体验版可能没有问题)

详细文档：网络配置

五、获取用户信息的两种方法wx.getUserInfo&open-data

• 自从微信接口有了新的调整之后 这个wx.getUserInfo（）便不再出现授权弹窗了，需要使用button做引导。官方文档
• 但是，你仅仅只是想展示用户信息的话，去使用wx.getUserInfo授权就比较麻烦了，那便使用open-data 吧

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>

open-data文档，注意type类型

常见报错解决

一、报错Unexpected token '...'. Expected a property name.

• 原因：浏览器不支持 es6 扩展运算符
  pc端chrome没问题，高版本ios没问题，测试机有个ios11.2 白屏报错了，打开错误提示为 Unexpected token ‘…’. Expected a property name.
• 解决方案：

1. 不用扩展预算符 …
2. babel-polyfill 对扩展运算符…支持不是太好，单独安装一个 plugin-proposal-object-rest-spread 即可

二、iview组件库中 i-input 组件在开发者工具中不能输入值

• 经测试，i-input 组件属性上带有 maxlength 属性的都可以自由输入内容
• 原因：iview 中并未对i-input 组件的 maxlength 属性设置默认值
• 解决方式：
  在i-input组件对应的index.js文件下的 props 中添加y以下代码：

maxlength: { //value 的默认值为 -1，这样 iView weapp 的 input 组件就默认无限输入了
    type : Number,
    value : -1
}

参考文章：微信小程序用iView weapp中input组件开发工具里无法输入内容

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！