微信JS-SDK使用

1. 微信签名接口

import wx from 'weixin-js-sdk'
import * as WxApi from '@/core/api/WxApi'

// 微信签名
export async function wxSignature () {
  let signature = null
  let url = encodeURIComponent(location.href.split('#')[0])
  // 1. 发送签名请求
  await WxApi.getSignature(url).then(res => {
    signature = res.data
  }).catch(() => {})

  if (!signature) return
  // 2.执行微信配置
  wx.config({
    debug: false,
    appId: signature.appId,
    timestamp: signature.timestamp,
    nonceStr: signature.nonceStr,
    signature: signature.signature,
    jsApiList: ['checkJsApi', 'hideOptionMenu']
  })
  wx.ready(() => {
    console.info('【微信签名】')
  })
  wx.error((err) => {
    // eslint-disable-next-line no-console
    console.warn('【微信签名】失败', err)
  })
}

2. 分享功能

// 分享配置：分享有分享朋友（qq好友）和分享朋友圈（qq空间等），一个页面可多次执行分享方法
export function wxShare () {
  const url = '' // 分享链接不能过长，过长可能导致分享失败

  const shareData = {
    title: '分享表土',
    desc: '分享描述',
    link: url,
    imgUrl: '分享图标',
    success: () => {
      console.log('用户确认分享')
    },
    cancel: () => {
      console.log('用户取消分享')
    }
  }
  // 显示分享的菜单
  wx.showMenuItems({
    menuList: [
      'menuItem:share:appMessage',
      'menuItem:share:timeline',
      'menuItem:share:qq',
      'menuItem:share:weiboApp',
      'menuItem:share:QZone'
    ]
  })
  // 隐藏不必要的菜单
  wx.hideMenuItems({
    menuList: [
      'menuItem:favorite',
      'menuItem:share:facebook',
      // 保护类标签
      'menuItem:editTag',
      'menuItem:delete',
      'menuItem:copyUrl',
      'menuItem:originPage',
      'menuItem:readMode',
      'menuItem:openWithQQBrowser',
      'menuItem:openWithSafari',
      'menuItem:share:email',
      'menuItem:share:brand'
    ]
  })
  // 分享到QQ和微信好友
  wx.updateAppMessageShareData(shareData)
  // 分享到QQ空间朋友圈
  wx.updateTimelineShareData(shareData)
  // 分享到腾讯微博
  wx.onMenuShareWeibo(shareData)
}

3. 获取地理位置

// 获取地理位置
export function getLocation () {
  return new Promise((resolve, reject) => {
    // 本地开发环境
    if (process.env.NODE_ENV === 'development') {
      let location = process.env.VUE_APP_WEIXIN_LOCATION
      if (location) {
        let lng = location.split(',')[0]
        let lat = location.split(',')[1]
        resolve({ lng, lat })
      } else {
        reject(new Error('【地理位置】为设置环境变量'))
      }
      return
    }

    wx.getLocation({
      type: 'gcj02',
      success: res => {
        var lng = res.longitude
        var lat = res.latitude
        const location = { lng, lat }
        resolve(location)
      },
      cancel: () => {
        reject(new Error('【获取地理位置】用户取消获取地理位置'))
      },
      fail: (res) => {
        reject(res.errMsg)
      }
    })
  })
}

4. 微信订阅
   需要先判断当前是否支持使用微信微信开放标签，

   当引入的js-sdk版本过低时，即使添加了WeixinOpenTagsError监听事件，也是无法触发的此事件的

   简易排查开放标签（通知订阅wx-open-subscribe）是否成功：使用其默认的按钮，按钮样式具有圆角的，是成功，如果按钮是直角的则为失败

   wx-open-subscribe绑定的click事件是无效的，自己所需的逻辑处理目前只能（2021-05-04）写在success回调中，fail回调是只网页唤起微信订阅事件失败，而非指的的用户点击取消，用户点击取消和成功事件都是在success回调中

// 微信消息订阅 使用微信标签，需在签名中加入此标签权限

      wx.config({
        debug: false,
        appId: signature.appId,
        timestamp: signature.timestamp,
        nonceStr: signature.nonceStr,
        signature: signature.signature,
        jsApiList: jsApiList,
        openTagList: ['wx-open-subscribe']
      })

<template>
  <!-- 微信订阅通知样例 -->
  <div class="wx-subscrible-example">
    <!-- 不支持消息订阅，普通按钮 -->
    <button class="subscribe-btn" v-if="!updateSupportWXOpenTag">
      {{btnSubText}}
    </button>
    <!-- 支持消息订阅 -->
    <wx-open-subscribe v-else :template="WXTemplateId" id="subscribe-btn" @success="subSuccess" @error="subError">
    <!-- <wx-open-subscribe v-else :template="WXTemplateId[0]" id="subscribe-btn" @success="subSuccess" @error="subError"> -->
      <script type="text/wxtag-template" slot="style">
        <style>
          .subscribe-btn {
            width: 10em;
            height: 4em;
            font-size: 24px;
            border: none;
            color: #fff;
            background-color: #07c160;
          }
        </style>
      </script>
      <template>
        <button class="subscribe-btn">
          {{btnSubText}}
        </button>
      </template>
    </wx-open-subscribe>
  </div>
</template>

<script>
import { Button } from 'vant'

export default {
  name: 'index',
  components: {
    [Button.name]: Button
  },
  data () {
    return {
      // 订阅按钮文字
      btnSubText: '消息订阅',
      // 模板id
      WXTemplateIdArr: [
        'xxxxxxxxxxx',
        'xxxxxxxxxxx'
      ]
    }
  },
  computed: {
    updateSupportWXOpenTag () {
      return this.$store.getters['system/supportWXOpenTag']
    },
    WXTemplateId () {
      return this.WXTemplateIdArr.join(',')
    }
  },
  created () {
    Object.freeze(this.WXTemplateId)
  },
  methods: {
    subSuccess (e) {
      console.log('事件成功回调', e.detail)
    },
    subError (e) {
      console.log('事件失败回调', e.detail)
    }
  }
}
</script>

<style lang='scss' scoped>
.subscribe-btn {
  width: 10em;
  height: 4em;
  font-size: 24px;
  border: none;
  color: #fff;
  background-color: #07c160;
}
</style>

5. 上传图片

handleChooseImg (type) {
      let targetArr = this.certPicList
      let key = 'certPic'
      wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          if (res.localIds.length > 0) {
            targetArr.length = 0

            res.localIds.forEach(element => {
              if (isIOS()) {
                wx.getLocalImgData({
                  localId: element, // 图片的localID
                  success: (res) => {
                    targetArr.push(res.localData)
                  },
                  fail: () => {
                    Toast.fail('IOS获取图片失败')
                  }
                })
              } else {
                targetArr.push(element)
              }
              wx.uploadImage({
                localId: element, // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: (res) => {
                  this.retailerInfo[key] = res.serverId
                }
              })
            })
          }
        },
        fail: (res) => {
          Toast.fail('选择图片失败')
        }
      })
    }

6. 待完善