前言：有一星期没跟新博客了，最近太忙、项目赶进度就没把时间花在博客上；今天来说说所谓的微信公众号开发和填坑记录；
微信公众号：运行在微信终端的应用 （对于开发者来说比较爽的你只需考虑兼容微信浏览器，因为它是在微信内置浏览器环境下运行的）
微信公众号开发分为两部分：
一、传统开发（前后端分离） 推荐 页面量大的时候优点就尤其突出了
1. 微信首页 （即首页菜单、跳转链接、扫二维码、消息推送回复等功能） 不要慌 这些百分之90%都是后台来配置的，他们调用下微信公众平台提供的接口就ok了；为什么是后台配置呢因为交互方式是 web用户 --> 微信服务器 --> 后台服务器；
2. H5部分 就是通过菜单跳转其他的页面皆为H5的 （说白了 开发微信公众号前端主要负责的就是H5部分（就是和平常时开发移动端一模一样没区别））
二、node.js/H5 或者 php/h5 的话 那就不好意思了 以上全部都是自己搞
这里介绍的是第一种开发模式： 所谓的微信公众号开发前端就是负责移动端而已 没什么不同的
个人觉得新项目开发选好技术栈（框架、ui框架、适配、css预编译等）重中之重，能节省很多的开发时间，
小提示：个人觉得移动端适配来说选用 px2rem 是最爽的适配，没有之一; 对于传统适配 怎么转换之类统统说白白， 插件自己会帮你转换，那叫一个爽；不懂得小伙伴可以去百度百度或者留言
遇到的坑如下： （主要说和微信相关的，移动端常见的坑这里就不多说了；若开发中遇到了可以留言）
坑1、获取用户信息（openid、UnionID、昵称、头像、性别、所在城市、语言和关注时间等等）
其中除UnionID外 其他的主要通过网页授权均可获取 （网页授权具体操作将由下面的坑解释）
开发的时候获取用户信息什么都获取到了，但就差一个UnionID 怎么试都获取不了，原因在于微信公众号一定要到微信公众开发平台绑定开放才能获取到UnionID 这个坑因为没想到这个方向所以坑了蛮久的时间
坑2、通过网页授权获取 code 再通过 code 获取用户openid、UnionID
web网页端要获取这两个信息只能通过 code 获取，后台获取的话就不同
获取code 就要通过web网页授权了 ： 具体流程是 在web页面通过调用 微信提供的接口 发起授权；微信在把code已回调链接的形式返回给你，这时你解析url的参数就能拿到code 再传给后台
部分代码如下：
1、不携带参数的情况
mounted () {
// 获取路劲参数 静默授权不提示用户 scope=snsapi_base 非静默scope=snsapi_userinfo 询问操作 http 即官方提供的回调链接
// AppId 为微信公众号的 id httpUrl 为微信所配置的网页授权回调 网页授权回调域名即发布服务器后的项目 配置/查看步骤 最下面的接触权限 --> 网页授权获取用户信息 --> 点击修改 跳转到页面最下面即可看到网页授权域名设置
let http = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.AppID}&redirect_uri=${httpUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
window.location.href = http
},
2、携带参数即从别的地方跳转要携带参数在页面显示 （主要思路是解析出要的参数在网页授权时传给微信，微信会和code一起在传回给你）
mounted () {
// 获取路劲参数 静默授权不提示用户 scope=snsapi_base 询问操作 scope=snsapi_userinfo
this.getUrlParams(decodeURI(window.location.href))
},
methods: {
// 切割处理参数
getUrlParams (url) {
let webpageUrl = window.webpageUrl
let params = {}
let arr = {}
if (url.split('?')) {
arr = url.split('?')
}
if (arr.length <= ) {
// 微信公众号首页进入
let httpUrl = encodeURIComponent(webpageUrl)
let http = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.AppID}&redirect_uri=${httpUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
window.location.href = http
} else {
// 扫描pc端二维码进入携带参数的情况
arr = arr[].split('&')
for (let i = , l = arr.length; i < l; i++) {
let a = arr[i].split('=')
params[a[]] = a[]
}
// 有参数
if (params && params.cityId) {
webpageUrl += '?'
Object.keys(params).forEach(function (key) {
webpageUrl += `${key}=` + `${params[key]}&`
})
webpageUrl = webpageUrl.substring(, webpageUrl.length - )
}
// 通过PC端扫码跳过来的情况下保存城市和小区信息
let httpUrl = encodeURIComponent(webpageUrl)
let http = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${window.AppID}&redirect_uri=${httpUrl}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
window.location.href = http
}
}
}
通过上述回调最终微信端会回调上面httpUrl 页面 code 一参数形式传过来 只需解析出 code 保存下来就行
mounted () {
// 切割 url 封装参数
let params = {}
let arr = url.split('?')
if (arr.length <= ) {
return params
}
arr.forEach(ls => {
ls = ls.split('&')
if (ls.length > ) {
for (let i = , l = ls.length; i < l; i++) {
let a = ls[i].split('=')
params[a[]] = a[]
}
}
})
console.log(params) // 参数对象 params.code 就是该用户的code 在传给后台 获取用户其他信息就行了
}
坑3、初次静默授权返回的code 去获取用户的 UnionID 会获取不到， 改为非静默授权 即询问用户是否登录 即可获取用户一切信息
坑4、关闭H5页面回到公众号首页 若你开启了eslint则会报错 WeixinJSBridgeReady undefind 因为这个方法只在微信浏览器中有 这时加上 eslint-disable-line 避免语法检查就行 项目在微信浏览器中没问题
methods: {
// 返回首页
goBack () {
if (typeof WeixinJSBridge === 'undefined') {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady)
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady)
}
} else {
WeixinJSBridge.call('closeWindow') // eslint-disable-line
}
},
onBridgeReady () {
WeixinJSBridge.call('hideOptionMenu') // eslint-disable-line
}
}
结语： 有问题欢迎留言