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

一、openid 和 unionid 是什么？

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

二、怎么获取openid

首先，想要获取到 openid，必须要通过调用微信API接口 wx.login 获取登录凭证（code)。详细文档：wx.login API。
其次，在微信公众号管理平台生成 AppSecret(小程序密钥)。
生成路径：微信公众号管理平台 => 开发 => 开发设置 => 开发者ID => AppSecret(小程序密钥)
最后，通过得到的 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.
解决方案：

不用扩展预算符 …
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组件开发工具里无法输入内容

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

微信开发流程总结(基于微信平台)相关推荐

为微信开发填坑：微信网页支付的开发流程及填坑技巧
GitChat 作者:极笔北客原文:为微信开发填坑:微信网页支付的开发流程及填坑技巧关注微信公众号:「GitChat 技术杂谈」一本正经的讲技术 [不要错过文末彩蛋] 小程序作为微信之父张小龙钦 ...
为微信开发填坑：微信网页支付的开发流程及填坑技巧 1
GitChat 作者:极笔北客原文:为微信开发填坑:微信网页支付的开发流程及填坑技巧关注微信公众号:「GitChat 技术杂谈」一本正经的讲技术 [不要错过文末彩蛋] 小程序作为微信之父张小龙钦 ...
Uni-app开发小程序|基于微信小程序报修系统设计与实现
作者主页:编程指南针作者简介:Java领域优质创作者.CSDN博客专家 .CSDN内容合伙人.掘金特邀作者.阿里云博客专家.51CTO特邀作者.多年架构师设计经验.腾讯课堂常驻讲师主要内容:Jav ...
【前端企微开发流程】-企业微信-创建应用-开发-调试-发布
创建应用概述在企业微信中,企业应用分为基础应用.第三方应用及自建应用基础应用:企业微信本身自带的应用第三方应用:由第三方服务商提供的办公应用套件,管理员可根据企业办公需要选择安装自建应用:根 ...
微信开发实例视频教程-深入浅出微信公众平台实战开发
微信开发视频教程-深入浅出微信公众平台实战开发(微网站.LBS云.Api接口调用.服务号高级接口) 一.微信开发实例视频教程总目录: 微信开发实例视频教程讲师介绍: 易伟,现广东合桓律师事务所专职律 ...
NET C#微信个人号 HOOK 基于微信2.8.0版本全接口微信机器人淘宝客二次开发
pc微信客户端 2.8.0 最新版本 hook 可二次开发 c#调用 2020年03月10日 Update 经过大量测试,现升级协议,最新支持微信PC2.8.0.106.新增了http回调域名配置. ...
微信开发（3）微信支付
微信开发(3)微信支付一. 微信后台设置 1.添加测试授权目录和测试白名单: 在微信后台,设置测试授权目录,如http://xxx.sinaapp.com/example/,测试白名单中添加你的微信 ...
微信开发(02)之处理微信客户端发来的消息
在上一篇微信开发的博文中微信开发(01)之如何成为开发者,我们开启了微信开发者模式,本篇博文我们简单的处理微信关注者发给我们公众号的消息. 在开启微信开发者模式时,我们配置了一个URL地址,当我们提交 ...
微信小程序毕业设计基于微信图书馆借阅小程序系统开题报告功能参考
微信小程序毕业设计基于微信图书馆借阅小程序系统开题报告功能参考下面是功能实现效果图:大家可以参考

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

一、openid 和 unionid 是什么？

二、怎么获取openid

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

四、配置https

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

常见报错解决

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

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

微信开发流程总结(基于微信平台)相关推荐

最新文章

热门文章

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

一、openid 和 unionid 是什么？

二、怎么获取openid

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

四、配置https

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

常见报错解决

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

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

微信开发流程总结(基于微信平台)相关推荐

最新文章

热门文章

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