vue项目接入微信js

Posted on

  1. $ npm install weixin-js-sdk –save

  2. 引入wechat js文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    import wx from 'weixin-js-sdk'

    const wxPlugin = {}
    wxPlugin.install = function (Vue, options) {
      function extend (obj1, obj2) {
        for (var k in obj2) {
          if (obj1.hasOwnProperty(k)) {
            if (isObject(obj2[k])) {
              extend(obj1[k], obj2[k])
            } else {
              obj1[k] = obj2[k]
            }
          } else {
            obj1[k] = obj2[k]
          }
        }
        return obj1
      }
      function getProp (obj, str) {
        var result = extend({}, obj)
        var array = str.split('.')
        for (var i = 0; i < array.length; i++) {
          if (result[array[i]]) {
            result = result[array[i]]
          } else {
            result = result[array[i]]
            break
          }
        }
        return result
      }
      // 判断options.config的数据类型
      if (!options.config) {
        console.error('wxPlugin Error：config属性必须为一个对象或者promise，不能为空')
        return
      }
      // 如果config为一个对象
      if (Object.prototype.toString.call(options.config) === '[object Object]') {
        wxConfig(options.config)
      }
      // 如果config为一个promise
      if (options.config instanceof Promise) {
        options.config.then(function (res) {
          var config
          if (options.path) {
            config = getProp(res, options.path)
                  } else {
            config = res.data
          }
          wxConfig(config)
        })
      }
      function wxConfig (config) {
        wx.config({
          debug: false,
          appId: config.appId,
          timestamp: config.timestamp,
          nonceStr: config.nonceStr,
          signature: config.signature,
          jsApiList: options.actions
        })
        wx.error(function (err) {
          console.error(err)
        })
      }
      Vue.prototype.wx = wx
    }
    export default wxPlugin

  3. main.js中引用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    import wxPlugin from 'common/js/wechatJs.js'
    const options = {
      config: api.me.getWechatJsConfig({url: location.href}),
      // 如果config是promise，path需要指定如何从promise返回值中拿到符合格式的object;
      // 如果config是一个object，则无需指定path值
      path: 'data',
      // 声明用到的微信api
      actions: ['onMenuShareAppMessage', 'onMenuShareTimeline']
    }

    Vue.use(wxPlugin, options)

  4. 页面中引用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    wx_share () {
      this.wx.ready(function () {
        // 分享给朋友
        this.wx.onMenuShareAppMessage({
          title: '问题反馈',
          desc: '问题反馈',
          link: location.href,
          imgUrl: 'https://files.wondercv.com/App%20Icon@2x.png',
          success: function () {
            alert('分享成功')
          }
        })
        // 分享到朋友圈
        this.wx.onMenuShareTimeline({
          title: '问题反馈',
          link: location.href,
          imgUrl: 'https://files.wondercv.com/App%20Icon@2x.png',
          success: function () {
            alert('分享成功')
          }
        })
      })
    }