vue项目做微信js-sdk开发

1、微信js-sdk简介：

做微信js-sdk开发，首先要了解微信js-sdk是干什么的，微信官方这里可以查看

其实就是调取微信app原生的能力，让h5页面可以调用起来微信扫码、支付、分享等接口

2、vue项目中安装wx-js-sdk

npm i -S weixin-js-sdk

安装过之后再main.js中全局引入

import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx

这样，在页面中就可以通过 this.$wx拿到微信的方法了

不过再调用微信js-sdk之前，需要通过微信config拿到权限，需要后端配合才行

在首页的created上执行 this.initWxConfig()    注意：这个是我自己写的方法

wxConfig: async (context) => {
    if (!common.isInWx) {
      return
    }
    let config = {}
    const jsApiList = ['scanQRCode', 'chooseImage']
    if (JSON.stringify(context.state.wxConfig) !== '{}') {
      config = context.state.wxConfig
    } else {
      const res = await _wxConfig(window.location.href.split('#')[0])
      if (res.code === 0) {
        context.commit('CHANGEWXCONFIG', res.data)
        config = res.data
      }
    }
    wx.config({
      beta: true,
      debug: !1,
      appId: config.corpid,
      timestamp: config.timestamp,
      nonceStr: config.noncestr,
      signature: config.signature,
      jsApiList: jsApiList
    })
    wx.ready(() => {
      console.log('wx注入ready')
    })
    wx.error((res) => {
      window.$wxConfigError++
      console.error('微信config注入失败：' + res)
      console.log('重新注入微信config')
      context.commit('CHANGEWXCONFIG', {})
      if (window.$wxConfigError <= 2) {
        context.dispatch('wxConfig')
      } else {
        // alert('微信注入失败')
        console.error('微信注入失败')
      }
    })
  },

    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root    "D:/work/dodgem-front/dist";
        location / {
            try_files $uri $uri/ /index.html;
           # index  index.html index.htm index.php l.php;
           autoindex  off;
        }
        location /api {
            #proxy_set_header Host $host;
            #proxy_set_header X-Real-IP $remote_addr;
            #proxy_set_header X-Real-PORT $remote_port;
            #proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://0.0.0.0:8080/api;
        }
    }