wechat-jssdk

微信JSSDK封装

安装

npm install @carpenter/wechat-jssdk

配置

| 成员 | 说明 | 类型 | 是否必须 | 默认值 | |-----|-----|-----|-----|-----| | appId | appid | String | 是 | 无 | | imgUrl | 分享图片地址 | String | 是 | 无 | | link | 分享图片 | String | 是 | window.location.href | | title | 分享标题 | String | 是 | 无 | | desc | 分享描述 | String | 是 | 无 | | hideMenu | 隐藏菜单 | Boolean | 是 | false | | debug | debug | Boolean | 是 | false | | ticketUrl | 获取签名api地址 | String | 是 | 无 | | ticketConfig | 请求配置 | Object | 是 | {} | | ticketSuccess | 请求成功回调 | Function | 是 | 无 |

示例

import WechatJSSDK from '@carpenter/wechat-jssdk'

const wechat = new WechatJSSDK({
  appId: 'wxxxxxxxxxxxxx', // 可不填，由签名接口返回
  imgUrl: 'http://stor.xxx.xxx',
  link: '',
  title: '我是分享标题',
  desc: '我是分享描述',
  hideMenu: false,
  debug: false,
  ticketUrl: 'http://xxx.com/api/get_jsticket',
  ticketConfig: {
    method: 'post',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
    body: `url=${encodeURIComponent(window.location.href.split('#/')[0])}&appid=wxxxxxxxxxxxxx`,
  },
  ticketSuccess: (res) => {
    return res; // { timestamp, nonceStr, signature, appId }
  },
});

Vue.prototype.$wechat = wechat;

wechat.on('ready', () => {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后
  // 如需在页面加载时就调用相关接口，则须把相关接口放在当前函数中调用来确保正确执行。
  // 对于用户触发时才调用的接口，则可以直接调用，不需要放在当前函数中。
  console.log('ready run !');
});

更新 配置

// key:
//   imgUrl     分享图
//   link       分享链接
//   title      分享标题
//   desc       分享描述
//   hideMenu   是否隐藏

// this.$wechat.setState(key, value)

this.$wechat.setState('title', '我是更新后的标题')
            .setState('desc', '我是更新后的描述')
            .update();

分享事件监听

// shareTimeline   分享到朋友圈/分享到QQ空间
// shareAppMessage 分享给朋友/分享到QQ

this.$wechat.on('shareTimeline', () => {
  console.log('分享到朋友圈');
});
this.$wechat.on('shareAppMessage', () => {
  console.log('分享到朋友');
});

动态设置 标题

this.$wechat.setNativeTitle('标题');

获取url参数

const param = this.$wechat.getQueryString('debug')

vConsole 移动端开发者面板 查看 console 日志

地址中添加  debug=true