微信公众号开发之vue整理
2020-10-11 本文已影响0人
蒋蒋_dbfe
一、公众号开发与html5移动端开发区别
从前端开发角度上来说,没有什么差别.不一样的有:1)需要网页授权登录,2)使用微信的一些方法(拍照 扫描等)需要引入wx-js sdk.
jsSdk引入步骤分为3部（此处以vue项目中为例）：
1、需要在vue项目中安装weixin-js-sdk
2、在页面中需要用到wx的一些方法中引入js-sdk,引入方法：import wx from 'weixin-js-sdk';
3、开始正在的使用wx的js-sdk
由于使用微信js需要进行授权配置，所以需要使用ajax请求从服务端获取微信jssdk的授权参数
- 首先需要向服务器发送一个ajax请求 （我们需要将当前页面路径（不包含#以及以后的数据）传给后台，从服务端获取微信jssdk的授权参数）
- 调用wx.config()方法，获取到使用js-sdk的权限,以及配置需要使用的sdk
- 使用具体的sdk方法（分两种情况a: 在wx.config()页面使用，需要确保wx.config()已经成功拿到了授权参数，常常需要在wx.ready()中调用js-sdk方法；b:页面点击按钮触发js-sdk方法,可以直接使用）
(具体有哪些方法可以查看：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html)
(在使用jsSDK一般使用hash路由模式)
借用别人写的方法：
method: 'post',
url: 'http://my.service.com/index.php/opcode/6002', //请求后端接口
data:{ url:location.href.split('#')[0] } //向服务端提供授权url参数，并且不需要#后面的部分
}).then((res)=>{
debug: true, // 开启调试模式(上线的时候需要关闭)
appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature,// 必填，签名，见附录1
jsApiList: ['scanQRCode'] // 必填，需要使用的微信API接口列表，所有JS接口列表见附录2
});
})
二、关于微信授权问题(经常需要获取微信头像和昵称)
需要进行网页授权
- 当用户关注了公众号后,默认已经授权成功咯,此时后端能够拿到客户的微信信息(头像\昵称等)
- 当用户未关注公众号,直接打开网页链接,会有授权弹框(网页授权可以由后端处理,具体情况需要前后端协商)
三、常遇问题：
1、在使用js-sdk时，需要在微信公众号平台配置相应的域名
2、在jssdk的授权参数获取成功之前调用了js-sdk方法
3、需要在wx.config中的jsApiList配置需要使用的js-sdk方法
4、分享功能需要注意：
- 使用的分享图片必须为绝对路径；
- 图片协议必须和网站一一对应（网站是http,则图片引用的也是http的图片路径）；
- 分享朋友可以设置标题、描述、图片、跳转链接；分享到朋友圈可设置标题、图片、跳转链接；
- 目前情况下，分享页文字限制（标题：最多30个 描述内容：不超过36 分享图片：正方形）
