vue+koa2使用微信ssdk实现分享功能

微信转发、分享功能例子，只画重点记录…

---

微信公众号配置

微信JS-SDK说明文档

1、ip白名单（百度ip），把地址输入 （开发—>基本配置）

2、配置Js接口安全域名（公众号设置—>功能设置）

vue

1.安装weixin-js-sdk
npm i weixin-js-sdk -S
2、配置权限验证 wx.config
3、处理成功验证 wx.ready(function(){}）

目录
|- api
| |- weixin.js
|- views
| |- home.vue

// weixin.js
import wx from 'weixin-js-sdk' // 微信sdk依赖
import { request } from './index'  //封装的asiox接口

export const getWxConfig = (data) => {
  let url = window.location.href.split('#')[0] //url不能写死
  request.post('/wechat/getConfig', { url: url }).then((resp) => {
    let wxConf = resp.data
    wx.config({
      debug: true,
      appId: wxConf.appId,
      timestamp: wxConf.timestamp,
      nonceStr: wxConf.nonceStr,
      signature: wxConf.signature,
      jsApiList: wxConf.jsApiList
    })

	// 分享给朋友
    wx.ready(function () {
      wx.updateAppMessageShareData({
        title: 'Cat cafe', // 分享标题
        desc: '以猫咪为主题的咖啡馆！', // 分享描述
        link: 'http://xxx.natapp1.cc/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'http://prp6xvxc1.bkt.clouddn.com/1.jpg', // 分享图标
        success: function (res) {
          // 设置成功
          // alert(JSON.stringify(res))
        }
      })

      // 分享到朋友圈
      wx.updateTimelineShareData({
        title: 'Cat cafe!!', // 分享标题
        link: 'http://xxx.natapp1.cc/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'http://prp6xvxc1.bkt.clouddn.com/1.jpg', // 分享图标
        success: function (res) {
          // 设置成功
          console.log('5555')
          console.log(JSON.stringify(res))
        }
      })

      wx.error(function (res) {
        alert(JSON.stringify(res))
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      })
    })
  })
}

// home.vue
<template>
  <div>
    vue微信ssdk使用步骤
  </div>
</template>

<script>
import { getWxConfig } from '@/api/weixin'
export default {
  created () {
    getWxConfig()
  }
}
</script>

koa2

1.安装wechat-api
 cnpm install wechat-api --save
2、引入var API = require('wechat-api');  
3、实例化配置
var api = new API(config.wxappid,config.wxappsecret) ;
4、生成config的参数
var param = {  
         debug: false,  
         jsApiList: ['checkJsApi',              
                 'chooseImage',            
                 'getNetworkType',
                 'openLocation',
                 'getLocation',             
                 'scanQRCode'
         ],  
         url: req.body.url  
 };  
 api.getJsConfig(param, function(err,result){  
         res.send(result);  
 }); 

|- module
| |- config.js
|- routes
| |- wechat.js

const router = require('koa-router')()
// 引入统一下单的api
const config = require('../module/config')
// 用来生成签名、config的参数
const API = require('wechat-api') 
const api = new API(config.wxappid, config.wxappsecret)

router.post('/wechat/getConfig', async (ctx, next) => {
  // 使用wechat-api获取JSconfig
  var param = {
    debug: false,
    jsApiList: ['checkJsApi',
      // 'onMenuShareTimeline',
      // 'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareWeibo',
      'onMenuShareQZone',
      'hideMenuItems',
      'showMenuItems',
      'hideAllNonBaseMenuItem',
      'showAllNonBaseMenuItem',
      'translateVoice',
      'startRecord',
      'stopRecord',
      'onVoiceRecordEnd',
      'playVoice',
      'onVoicePlayEnd',
      'pauseVoice',
      'stopVoice',
      'uploadVoice',
      'downloadVoice',
      'chooseImage',
      'previewImage',
      'uploadImage',
      'downloadImage',
      'getNetworkType',
      'openLocation',
      'getLocation',
      'hideOptionMenu',
      'showOptionMenu',
      'closeWindow',
      'scanQRCode',
      'chooseWXPay',
      'openProductSpecificView',
      'addCard',
      'chooseCard',
      'openCard',
      'updateAppMessageShareData',
      'updateTimelineShareData'],
    url: ctx.request.body.url
  }

  //生成config的参数
  api.getJsConfig(param, function (err, data) {
   //  console.log(err)
   ctx.body = { 'success': 'true', 'data': data, 'code': '200' }
  })
})

module.exports = router

// module/config.js
var config = {
  mch_id: '153506xxxxx', //商户号（非支付可不填）
  wxappid: 'wx61668303xxxxxx', //AppID   
  wxappsecret: 'f506525621307c15cxxxxxxxxx', //AppSecret 
  wxpaykey: 'c23fdgas768fdhASdsad1xxxxxxxx'  // 商户key（支付API密钥，非支付可不填）
}

module.exports = config

wechat-api 可以用来生成签名，也可自己手动生成，参考另一篇 nodejs实现微信支付

优化

假如很多地方都用到分享功能，可以把它封装起来暴露统一接口(或暴露多个入口)

// 引入封装
import { wxShare } from '@/utils/wechat'
created() {
      wxShare({
        title: '分享标题', // 分享标题
        desc: '分享描述', // 分享描述
        link: window.location.href, // 分享链接
        imgUrl: 'http://图片地址share.png', // 分享图标
   	  //debug:true
    },function(){//分享成功后的回调函数   
    });
}

// utils/wechat.js
import wx from 'weixin-js-sdk'
import { request } from '@/api/index'

// 微信分享
export const wxShare = (obj, callback) => {
  let url = window.location.href.split('#')[0]

  if (obj) {
    var title = obj.title == undefined || obj.title == null ? 'xxxx' : obj.title
    var link = obj.link == undefined || obj.link == null ? window.location.href : obj.link
    var desc = obj.desc == undefined || obj.desc == null ? 'xxxxx' : obj.desc
    var imgUrl = obj.imgUrl == undefined || obj.imgUrl == null ? 'src/img/share.png' : obj.imgUrl
    var debug = obj.debug == true
  } else {
    alert('请传分享参数')
  }

  request.post('/wechat/getConfig', { url: url }).then((resp) => {
    let wxConf = resp.data
    wx.config({
      debug: debug,
      appId: wxConf.appId,
      timestamp: wxConf.timestamp,
      nonceStr: wxConf.nonceStr,
      signature: wxConf.signature,
      jsApiList: wxConf.jsApiList
    })

    wx.ready(function () {
      // 分享给朋友
      wx.updateAppMessageShareData({
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: link, // 分享链接
        imgUrl: imgUrl, // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () {
          // 用户确认分享后执行的回调函数
          callback && callback()
        }
      })

      // 分享到朋友圈
      wx.updateTimelineShareData({
        title: title, // 分享标题
        link: link, // 分享链接
        desc: desc, // 分享描述
        imgUrl: imgUrl, // 分享图标
        success: function () {
          callback && callback()
        }
      })

      // 分享到腾讯微博
      wx.onMenuShareWeibo({
        title: title, // 分享标题
        link: link, // 分享链接
        desc: desc, // 分享描述
        imgUrl: imgUrl, // 分享图标
        success: function () {
          callback && callback()
        }
      })

      wx.error(function (res) {
        alert(JSON.stringify(res))
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      })
    })
  })
}