微信公众号jssdk 分享/App原生应用接入分享开发及应用场景


前言

一般来说,只要涉及到app开发,都会涉及到与微信分享的功能进行集成。然而在微信的官网中,提供了多种集成方式,其中用的比较多的大部分是app集成微信分享和公众号jssdk分享的两种方式。曾经我以为,jssdk分享的方式也能适用于混合移动应用模式开发的app,只要在H5端集成就可以实现app的页面的分享,然而我还是理解有偏差,即使我没有尝试过这样做,但是这种分享方式用在app端肯定是不妥的,因为这种分享方式需要申请公众号,如果分享出去想带有完整的信息,比如缩略图,那么您的公众号必须要进行认证才行。总儿言之,它生来就是为微信公众号开发服务的(微信公众号自定义分享按钮)。

一、应用场景

app内部接入微信分享必须使用原生接入的方式,这样只需要申请开发者账号即可。这里官网描述的非常详细了。
jssdk分享应用场景如下:
1、开发的网页想通过微信浏览器进行分享,比如将网页的链接发送到微信客户端,在微信客户端通过微信浏览器打开,右上角可分享,分享后自动抓取网页的title 但是缩略图是默认的缩略图(链接图),如果想此时实现缩略图展示,自定义分享标题和描述,则可使用jssdk
2、App 已经接入了分享,但是分享给A 后,A能看到缩略图及app分享时自定义的内容,但是A在微信客户端再分享给其他人,其他人就不能正确看到A 所看到的结果,此时在通过静态资源服务器发布的网页版也需要接入jssdk
3、以往微信浏览器可支持抓取网页端图片作为缩略图,但是,新版微信客户端必须要接入jssdk 才能进行自定义分享
4、公众号需要自定义分享
下面注意来介绍jssdk开发步骤。

二、Jssdk 接入准备工作

1.申请企业版微信公众号,并进行认证,并设置成为开发者

搜索“微信公众平台” 注册、登录、并进行认证,这里需要注意的是,如果自己想做测试,个人公众号也是可以用的,只是,个人公众号无法进行认证,认证不通过就无法使用最新的api。
如下图所示:
在这里插入图片描述

2.公众号配置

点击设置与开发菜单栏->功能设置中,填写js 安全域名,js 安全域名的配置需要严格按照说明进行操作,否则会导致分享失败。js安全域名配置后,需要按如下图中的注意事项进行分步配置。
在这里插入图片描述
js安全域名到底代表什么呢?答:安全域名就是我们点击分享后,分享的链接地址对应的域名,也就是说,如果我们分享了一个链接到微信朋友圈,别人点开你分享的朋友圈的地址就是用的这个安全域名。所以这个安全域名对应的虚拟主机或服务器发布的就是你分享的页面。
上图中的文件上传路径:比如js 安全域名配置为 www.aa.com/cc,默认端口80.安全域名指向 静态网页即分享出去的链接地址所在的服务器或虚拟主机。如果你的资源是通过nginx 发布,则域名的根路径指向nginx 配置文件配置的资源的路径地址 cc 下。

3.查看appid、设置密钥、并配置ip 白名单等

分享时所必须的信息。使用jssdk分享时,需要调用微信提供的服务端api,服务端api的作用是获取公众号调用服务端API的ACCESS_TOKEN。那么就需要我们提供一个服务获取access_token。这个服务的公网ip就是ip白名单配置项里需要配置的。注意:不要写内网的ip地址。
在这里插入图片描述


三、开发接入

1.服务端

access_token: 公众号授权的全局唯一标识,公众号调用接口时需要使用(主要作用于服务端接口),一次调用有效期7200 秒。由于接口的调用次数每日有数量限制,所以需要全局缓存。需要appid 和密钥 。

Jsapi_titket : 公众号调用js 接口的临时票据,需要通过access_token作为入参数进行获取。同access_token 也需要全局缓存处理

获取网页url :当前网页的url地址。
生成签名:签名算法按api 说明进行处理,签名生成后返回给前端。
辅助:可使用签名验证工具进行验证 避免出现{“errMsg”:“config:invalid signature”} 问题
签名调试工具https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

2.前端接入

1、初始化生成签名、时间戳、随机串等。初始化配置
2、验证通过后发起调用js api 进行分享处理

说明:

1、jssdk版本 jweixin-1.6.0.js 。目前应用新版接口,旧版的分享接口即将废弃。
2、个人公众号由于无法进行认证,当设置debug模式时,会出现 调用新接口权限问题:{“errMsg”:“updateTimelineShareData:permissiondenied”},原因是 需要认证的公众号
3、个人公众号尝试调用旧接口可以实现点击微信浏览器分享调用自定义分享方法,可展示自定义标题、缩略图等。但是旧接口即将废弃,需尽快申请认证的公众号来接入新接口
4、jsapiList 注意事项,虽然现在迁移到新接口了,但是旧接口的注册也是必须的,否则会导致分享无效:

jsApiList: [
    'updateAppMessageShareData',
    'updateTimelineShareData',
    'checkJsApi',
    'onMenuShareTimeline', 
    'onMenuShareAppMessage', //分享给微信朋友
    'showOptionMenu']

四、总结

1、app端集成微信分享直接集成Android、ios原生分享
2、jssdk分享适用于网页版分享和公众号自定义分享(微信浏览器的分享不满足条件的情况下)。
3、使用jssdk需要申请个人公众号或企业公众号,个人公众号无法认证,导致新js api不能使用。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在Vue2中接入微信公众号JSSDK,您需要按照以下步骤进行操作: 1. 在公众号后台配置JS接口安全域名,确保您的域名已经添加到了微信公众平台的安全域名列表中。 2. 安装使用`weixin-js-sdk`库,可以通过npm进行安装: ``` npm install weixin-js-sdk ``` 3. 在需要使用JSSDK的组件或页面中引入`weixin-js-sdk`库: ```javascript import wx from 'weixin-js-sdk'; ``` 4. 在组件或页面的`mounted`生命周期钩子函数中初始化JSSDK,并进行相关配置: ```javascript mounted() { this.initWeChatJSSDK(); }, methods: { initWeChatJSSDK() { // 异步请求后端接口获取微信配置信息 axios.get('/api/getWeChatConfig') .then(response => { const { appId, timestamp, nonceStr, signature } = response.data; wx.config({ debug: false, appId, timestamp, nonceStr, signature, jsApiList: ['chooseImage', 'scanQRCode'] // 需要使用的JSSDK接口 }); wx.ready(() => { // JSSDK配置成功后的回调函数 console.log('JSSDK配置成功'); }); wx.error((res) => { // JSSDK配置失败后的回调函数 console.error('JSSDK配置失败', res); }); }) .catch(error => { console.error('获取微信配置信息失败', error); }); } } ``` 5. 在需要使用JSSDK的地方调用对应的接口,比如选择图片接口`chooseImage`: ```javascript methods: { chooseImage() { wx.chooseImage({ count: 1, success: function (res) { // 选择图片成功后的处理逻辑 const localIds = res.localIds; // ... }, fail: function (error) { // 选择图片失败后的处理逻辑 console.error('选择图片失败', error); } }); } } ``` 以上是在Vue2中接入微信公众号JSSDK的基本步骤,您可以根据实际需求进行相应的配置和调用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

senda66

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值