微信公众号开发之vue整理

一、公众号开发与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 分享图片：正方形）

四、参考链接

• https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3
• https://www.cnblogs.com/liupengfei13346950447/p/10879802.html
• https://www.cnblogs.com/yangjianming/p/9884277.html