vue项目跳转微信小程序背景公司移动端项目需要从项目跳转至某小程序，故记录此开发过程。准备微信公众号开发者文档微

背景

公司移动端项目需要从项目跳转至某小程序，故记录此开发过程。

准备

开始

首先需有后端配合，拿到wx.config所需的参数

/**
 * nxt - 获取微信相关配置
 */
export const apiGetWechatConfig = (pageUrl) => {
  const url = `xxx?url=${pageUrl}`
  return demoRequest({
    url,
    method: 'GET'
  })
}

cdn引入文件jweixin-1.6.0.js

  <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

在页面中添加标签，并在main.js中添加相关配置，使 Vue 忽略wx-open-launch-weapp。

如文档中所说，wx-open-launch-weapp是一个用于页面中提供可跳转指定小程序的按钮，使用后点击此标签可跳转小程序。
并且注意文档中开放对象的条件：
1.已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2/已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

属性名	描述	备注
username	跳转小程序的id	以gh_开头的id,不要取错
path	跳转小程序的路径及参数	以.html结尾

Vue.config.ignoredElements = ['wx-open-launch-weapp']

  <wx-open-launch-weapp
    username="gh_xxx"
    path="demo/home.html"
  >
    <script type="text/wxtag-template">
      <div
      style="width: 98px; height: 34px; background: #4685FF; border-radius: 4px; color: #FFF"
      class="demo-btn">
      测试按钮
      </div>
    </script>
  </wx-open-launch-weapp>
</div>

wx.config配置

import wx from 'weixin-jsapi'

created() {
  this.setWechatConfig()
}

setWechatConfig() {
  const url = location.href.split('#')[0]
  apiGetWechatConfig(url).then(res => {
  const data = res.data
  wx.config({
    // eslint-disable-line
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
    appId: data.appId, // 必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, // 必填，生成签名的随机串
    signature: data.signature, // 必填，签名
    jsApiList: [
      'wx-open-launch-weapp',
      'onMenuShareAppMessage',
      'onMenuShareTimeline',
      'onMenuShareQQ',
      'onMenuShareWeibo',
      'startRecord',
      'stopRecord',
      'openLocation'
    ],  // 必填，需要使用的JS接口列表
    openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
  })
}

完成

当调试模式弹出config:ok的字样，证明配置校验成功，此时将debug: true改为false即可。

常见问题与解决方案

1. [WXTAG] [JSCORE] The slot <template> or <script type="text/wxtag-template"> of <wx-open-launch-weapp> is missing

使用<script type="text/wxtag-template">而不是<template>标签

2. invalid signature

跟后端确认返回的signature正确性

3. 样式无法写在外面中，只能在script标签内内链写或者行内样式

4. 如果开发标签内需要使用图片，不能用本地图片，得用外网可以访问的图片，不然会不显示