一、公众号开发与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 分享图片:正方形)
网友评论