npm.io
0.2.6 • Published 3 years ago

@carpenter/wechat-jssdk

Licence
MIT
Version
0.2.6
Deps
3
Size
519 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

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