微信JS-SDK分享(TS版)

1 篇文章 0 订阅
1 篇文章 0 订阅

1、绑定域名

① 微信公众平台里“公众号设置”的“功能设置”里填写“JS接口安全域名”

注:安全域名为项目访问域名,可添加二级域名。

2、引入JS

① http://res.wx.qq.com/open/js/jweixin-1.6.0.js(支持https)

注:import wx from 'weixin-js-sdk' 会报错

3、定义公共的调用方法

① 先定义类型     

declare global {
    interface Window {
        wx: {
            config: (config: unknown) => void,
            checkJsApi: (config: unknown) => void,
            ready: (config: unknown) => void,
            updateAppMessageShareData: (config: unknown) => void,
            updateTimelineShareData: (config: unknown) => void
        }
    }
}

3、通过config接口注入权限验证配置(debug调试失败用)

window.wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: ['updateAppMessageShareData',] // 必填,需要使用的JS接口列表
});

4、通过ready接口处理

window.wx.ready(function(){
  // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

5、常用分享接口

updateAppMessageShareData “分享给朋友”及“分享到QQ”按钮的分享内容

updateTimelineShareData “分享到朋友圈”及“分享到QQ空间”按钮的分享内容

window.wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
  window.wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
});

注:1.4版本之前的wx.onMenuShareTimelinewx.onMenuShareAppMessagewx.onMenuShareQQwx.onMenuShareQZone 接口,即将废弃。

要在 Vue 中使用微信 JS-SDK 实现分享功能,需要完成以下步骤: 1. 获取微信公众号的 appid 和 appsecret,以及当前页面的 url。 2. 在服务器端配置好微信 JS-SDK 的权限验证,获取到 signature、timestamp 和 noncestr 等参数。 3. 在 Vue 中引入微信 JS-SDKSDK 文件,并初始化。 4. 调用微信 JS-SDK 的接口,完成分享功能。 下面是一个简单的示例代码: ```html <template> <div class="share"> <button @click="shareToWechat">分享微信</button> </div> </template> <script> import wx from 'weixin-js-sdk' export default { data() { return { appId: '', timestamp: '', nonceStr: '', signature: '', imgUrl: '', shareUrl: '' } }, created() { // 获取微信 JS-SDK 配置参数 this.getWechatConfig() }, methods: { // 获取微信 JS-SDK 配置参数 async getWechatConfig() { const url = window.location.href.split('#')[0] const res = await this.$api.getWechatConfig({ url }) if (res.code === 0) { const data = res.data this.appId = data.appId this.timestamp = data.timestamp this.nonceStr = data.nonceStr this.signature = data.signature this.imgUrl = data.imgUrl this.shareUrl = data.shareUrl this.initWechatSDK() } }, // 初始化微信 SDK initWechatSDK() { wx.config({ debug: false, appId: this.appId, timestamp: this.timestamp, nonceStr: this.nonceStr, signature: this.signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] }) wx.ready(() => { // 配置分享信息 wx.updateAppMessageShareData({ title: '分享标题', desc: '分享描述', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) wx.updateTimelineShareData({ title: '分享标题', link: this.shareUrl, imgUrl: this.imgUrl, success() { // 分享成功回调 } }) }) }, // 分享微信 shareToWechat() { wx.chooseWXPay({ // ... }) } } } </script> ``` 在上面的代码中,我们首先通过 `getWechatConfig` 方法获取微信 JS-SDK 的配置参数,然后在 `initWechatSDK` 方法中初始化微信 SDK,并配置分享信息。最后,在 `shareToWechat` 方法中调用微信 JS-SDK 的 `chooseWXPay` 接口,实现分享功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值