h5 js-sdk config注册实现以及常见错误 （保姆式文档）

闲话少说直接上代码

import { FIX_KEY } from '@/config/config'
import { jsApiTicketApi } from '@/apis/api'
import sha1 from 'sha1'

// 生成随机字符串
function createRandomString(len = 32) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  const maxPos = chars.length
  let randomStr = ''
  for (let i = 0; i < len; i++) {
    randomStr += chars.charAt(Math.floor(Math.random() * maxPos))
  }
  return randomStr
}

// 获取当前时间戳单位s
function getTime() {
  return parseInt(new Date().getTime() / 1000)
}

// 生成签名
function createSignature(timestamp, nonceStr) {
  return new Promise(async (resolve) => {
    let ticket = await jsApiTicketApi() //请求接口获取jsapi_ticket
    let temp = {
      noncestr: nonceStr,
      jsapi_ticket: ticket,
      timestamp,
      url: window.location.href
    }
    let keys = Object.keys(temp)
    keys = keys.sort()
    let newTemp = ''
    keys.forEach((key, index) => {
      if (index === 0) {
        newTemp += `${key}=${temp[key]}`
      } else {
        newTemp += `&${key}=${temp[key]}`
      }
    })
    let signature = sha1(newTemp)
    resolve(signature)
  })
}

export const initConfig = async () => {
  let timestamp = getTime()
  let nonceStr = createRandomString()
  let signature = await createSignature(timestamp, nonceStr)
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
    appId: FIX_KEY.appid, // 必填，公众号的唯一标识
    timestamp, // 必填，生成签名的时间戳
    nonceStr, // 必填，生成签名的随机串
    signature, // 必填，签名
    jsApiList: [
      'updateAppMessageShareData',
      'updateTimelineShareData',
      'chooseImage',
      'previewImage'
    ], // 必填，需要使用的JS接口列表
    openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
  })

  wx.ready(function (res) {
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
    console.log('成功信息', res)
  })

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

写过很多次，每次都需要找若干文档解决若干问题才能注册成功，

记录经常碰见的问题：

1、签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同（官网文档写的很清楚）

2、签名用的url必须是调用JS接口页面的完整URL，建议直接使用window.location.href;如果是hash模式需要截取#前面的作为url

3、url不要encode哈😄，我用qs.stringify拼接导致encode，结果提示签名错误

vue3+vite本次遇到最大的坑,config注册成功，按钮不显示:

按照官网文档这么写：

<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>


我这边尝试是显示不出来按钮的（2023.07.07）

最后代码如下才成功显示：

 <wx-open-launch-weapp ref="launch_btn"
  :path="`pages/ads/ads?wallpaperId=23&resourceId=${state.resourceId}&randomString=${state.randomString}}`"
  appid="wxxxxxxxxxxxxxba5">
      <div v-is="'script'" type="text/wxtag-template">
        <div>跳转按钮</div>
      </div>
</wx-open-launch-weapp>

最重要的是  v-is="'script'"!!!  

这次配置成功后，完整记录一下，下次用终于可以cv了。