vue开发（七）微信JS-SDK入门

以下内容是根据微信公众平台开发者文档及实际项目中代码总结而来

一、绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。如果你使用了支付类接口，请确保支付目录在该安全域名下，否则将无法完成支付。

备注：登录后可在“开发者中心”查看对应的接口权限。
二、引入JS
①在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK

如需使用摇一摇周边功能，请引入 jweixin-1.1.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载
②通过npm引入

npm install weixin-js-sdk

三、通过config接口注入权限验证配置
所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。
四、通过ready接口处理成功验证
config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
五、通过error接口处理失败验证
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

import axios from 'axios'
import wx from 'weixin-js-sdk'
function getJSSDK(shareUrl, dataForWeixin) {
// 'http://www.hashclub.net/front/wechat/getconfig'
  axios.post(后台接口, {
    url:shareUrl
  }).then(res => {
    console.log(res.data);
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: res.data.appid, // 必填，公众号的唯一标识
      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
      nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
      signature: res.data.signature, // 必填，签名
      jsApiList: [
        debug: false,
		appId: res.appId,
		timestamp: res.timestamp,
		nonceStr: res.noncestr,
		signature: res.signature,
		jsApiList: [ // 必填，需要使用的JS接口列表
		    'hideOptionMenu',
		    'chooseImage', // 选中图片
		    'previewImage', // 预览图片
		    'uploadImage', // 上传图片
		    'getLocation', // 获取地理位置接口
		    'showOptionMenu',
		    'onMenuShareTimeline',
		    'onMenuShareAppMessage',
		    'onMenuShareQQ',
		    'onMenuShareWeibo',
		    'onMenuShareQZone'
      ]
    })
    wx.error(function (res) {
		console.log('微信签名错误进入', res.errMsg)
	})
	wx.ready(function () {
		console.log('签名成功')
   	})

六、可将分享api统一配置一下

// import ImageType
import wx from 'weixin-js-sdk'
/**
 * 有关分享的配置
 * @param title 分享标题
 * @param des 描述
 * @param link 分享链接
 * @param imgUrl 分享图标
 * @param shareSuccessCallBack 分享成功的回调
 */
export function shareConfig (title, des, link, imgUrl, shareSuccessCallBack) {
  let successCb = function () {}
  if (shareSuccessCallBack) {
    successCb = shareSuccessCallBack
  }
  /**
   * 分享到朋友圈
   */
  wx.onMenuShareTimeline({
    title: title, // 分享标题
    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: imgUrl, // 分享图标
    success: () => {
      console.log('分享到朋友圈成功')
      successCb()
    }
  })
  /**
   * 分享给朋友
   */
  wx.onMenuShareAppMessage({
    title: title, // 分享标题
    desc: des, // 分享描述
    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: imgUrl, // 分享图标
    type: 'link', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: () => {
      console.log('分享给朋友成功')
      successCb()
    }
  })
  /**
   * 分享到QQ
   */
  wx.onMenuShareQQ({
    title: title, // 分享标题
    desc: des, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: () => {
      console.log('分享到QQ成功')
      successCb()
    }
  })
  /**
   * 分享到腾讯微博
   */
  wx.onMenuShareWeibo({
    title: title, // 分享标题
    desc: des, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: function () {
      console.log('分享到腾讯微博成功')
      successCb()
    }
  })
  /**
   * 分享到QQ空间
   */
  wx.onMenuShareQZone({
    title: title, // 分享标题
    desc: des, // 分享描述
    link: link, // 分享链接
    imgUrl: imgUrl, // 分享图标
    success: () => {
      console.log('分享到QQ空间成功')
      successCb()
    }
  })
}

七、vue项目中使用

import {shareConfig} from '../../utils/shareConfig'
methods: {
	shareConfigInfo (title, shareDes, shareUrl, shareImg) {
      console.log('分享内容：', title, shareDes, shareUrl, shareImg)
      wx.ready(() => {
        shareConfig(`${title}`, shareDes, shareUrl, shareImg, this.shareCallBack)
      })
    },
    shareCallBack () {
      console.log('分享成功')
    }
}