微信公众号开发之vue项目引入JS-SDK

目前有看到的库有weixin-jsapi、weixin-js-sdk

1.weixin-js-sdk

是基于jweixin-1.6.0版本的

说明: 仅将官方 js-sdk 发布到 npm，支持 CommonJS，便于 browserify, webpack 等直接使用

js源码: https://res.wx.qq.com/open/js/jweixin-1.6.0.js

官方使用说明: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

NPM

Github

2.weixin-jsapi

是基于jweixin-1.0.0版本的

微信官方 js-sdk es6 版本 说明: 仅将官方 js-sdk 发布到 npm，便于 webpack 使用

js源码: http://res.wx.qq.com/open/js/jweixin-1.0.0.js

官方使用说明: http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

NPM

Github

3.项目实践

目前项目中只使用到了以下api

我使用的是weixin-jsapi，由于按照同样的方式引入weixin-js-sdk，就有问题，以下为我的mixin文件

import { Component, Vue } from 'vue-property-decorator'
import { getJsapiTicket } from "@/api";
import { getLocalStorage } from "@/utils/utils";
import wx from "weixin-jsapi";
// var wx = require('weixin-js-sdk');
@Component({
  name: 'WxConfigMixin'
})
export default class extends Vue {
  public ticketUrl: any = ''
  public jsapiTicketObj: any = ''
  public contributors: string = ''
  public wishText: string = ''
  public isDetail: boolean = false 
  public async getJsapiTicket() {
    const res: any = await getJsapiTicket(this.ticketUrl);
    this.jsapiTicketObj = res
    if(this.isDetail) {
      this.wxConfig()
    }
  }
  public wxConfig () {
    let contributors: any = ''
    if(this.isDetail) {
      contributors = getLocalStorage('readyForRushData').contributors
    } else {
      contributors = this.contributors
    }
    let link = this.ticketUrl
    wx.config({
      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: this.jsapiTicketObj.appId, // 必填，公众号的唯一标识
      timestamp: this.jsapiTicketObj.timestamp, // 必填，生成签名的时间戳
      nonceStr: this.jsapiTicketObj.nonceStr, // 必填，生成签名的随机串
      signature: this.jsapiTicketObj.signature, // 必填，签名
      jsApiList: [
        'onMenuShareTimeline', // 分享到朋友圈接口
        'onMenuShareAppMessage', //  分享到朋友接口
        // 'updateTimelineShareData', // 分享到朋友圈接口v1.4.0
        // 'updateAppMessageShareData', //  分享到朋友接口v1.4.0
        'hideMenuItems',
      ],
    });
    wx.checkJsApi({
      jsApiList: [
        'onMenuShareTimeline', // 分享到朋友圈接口
        'onMenuShareAppMessage', //  分享到朋友接口
        // 'updateTimelineShareData', // 分享到朋友圈接口
        // 'updateAppMessageShareData', //  分享到朋友接口
        'hideMenuItems', 
      ],
      success: function (res: any) {
        // console.log(res)
      }
    })
    wx.ready(function (res: any) {
      wx.hideMenuItems({
        menuList: ['menuItem:share:qq', "menuItem:share:weiboApp", 'menuItem:share:QZone'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
      });
      // 微信分享的数据
      var shareData: any = {
        imgUrl: '图片服务器地址', // 分享显示的缩略图地址
        link: link, // 分享地址
        desc: '分享描述', // 分享描述
        title: `分享标题`, // 分享标题
        success: function () {
          // 分享成功可以做相应的数据处理
          alert('分享成功')
        },
        fail: function () {
          alert('调用失败')
        },
        complete: function () {
          // alert('调用结束')
        }
      }
      // wx.updateTimelineShareData(shareData)
      // wx.updateAppMessageShareData(shareData)
      wx.onMenuShareTimeline(shareData)
      wx.onMenuShareAppMessage(shareData)
    });
    wx.error(function (res: any) {
      // console.log(res);
    });
  }
}

有什么问题的可以评论交流。

感觉有用的或者帮助到你的可以收藏、点赞、关注 一键三连。

（有问题需要交流可以加QQ245602951）