vue页面跳转小程序wx-open-launch-weapp

vue页面跳转小程序wx-open-launch-weapp

需求: 从vue页面点击按钮跳转小程序

参考官网: 微信开发官网
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21
个人原创: 哆啦a梦宋
1.在工程的根目录index.js文件引入http://res.wx.qq.com/open/js/jweixin-1.6.0.js(支持https)
2.当前页面的index.js文件中引入Vue.config.ignoredElements = [‘wx-open-launch-weapp’];

<template>
  <div class="pageBox">
    <div class="resultBox">
      <div class="resultImgBox">
        <van-empty
          image-size="40"
          :image="errorImg"
        >
          <span style="font-size:20px; color: red">网络开小差了~</span>
        </van-empty>
      </div>
      <div class="resultBottomBox">
      //username	所需跳转的小程序原始id，即小程序对应的以gh_开头的id
      //path	所需跳转的小程序内页面路径及参数
    <wx-open-launch-weapp id="launch-btn" username="gh_目标小程序的id" path="目标小程序页面路径">
          <template>
            <van-button class="toReserveBtn" type="primary" round>跳转小程序</van-button>
          </template>
        </wx-open-launch-weapp>
      </div>
    </div>
  </div>
</template>

<script>
//导vue中的service, 从vue中的service请求后端接口
import promptService from '../service/PromptService'
export default {
  name: "PromptNetwork",
  data() {
    return {
      wxData: {},
      errorImg: require('../images/error.png')
    }
  },
  created(){
    //初始化
    this.getJsApiData();
  },
  methods:{
    getJsApiData(){
    //截取当前页路径 从0-#
      let url = location.href.split('#')[0];
      //后台接口需要的参数
      let parameter = {
      //从当前路径获取 window.document.getElementById('cid').value;
        companyID:cid,
        url : url
      };
      console.log("parameter----->",parameter);
      //请求后台接口
      promptService.getJsApi(parameter).then(res => {
        console.log("res----->",res)
        //返回res
        let jsApiConfigParamsJson = {};
        try {
        //从res里获取jsApi 将res.data.jsApiConfigParams转成json
          jsApiConfigParamsJson = $.parseJSON(res.data.jsApiConfigParams)
        } catch (e) {
          console.log("解析微信json异常" + res);
          return;
        }
        this.wxData = jsApiConfigParamsJson;
        const {timestamp, appid, noncestr, signature} = this.wxData
        wx.config({ // eslint-disable-line
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
          appId: appid, // 必填，公众号的唯一标识
          timestamp: timestamp, // 必填，生成签名的时间戳
          nonceStr: noncestr, // 必填，生成签名的随机串
          signature: signature, // 必填，签名
          jsApiList: [
            "checkJsApi",
            "showOptionMenu",
            "hideOptionMenu",
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "openBusinessView"
          ], // 必填，需要使用的JS接口列表
          openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
        });
      })
      .catch(() => {
      });
    },
  mounted() {
  //参考官网 提示信息, 根据自己的需求, 可要可不要
    let btn = document.getElementById('launch-btn');
    btn.addEventListener('launch', function (e) {
      console.log('success');
     });
    btn.addEventListener('error', function (e) {
      console.log('fail', e.detail);
    });
  },
}
</script>

<style scoped>
.pageBox{background: #f6f6f6;padding: 15px;min-height: 100vh;box-sizing: border-box;}
.resultBox{border-radius: 10px;background: #fff;box-shadow: 0 2px 14px rgba(209, 209, 209, 0.5);position: relative;max-width: 640px;}
.resultImgBox{border-bottom: 1px dashed #F2E8E8;position: relative;padding-left: 30px;padding-right: 30px;}
.resultImgBox:before,.resultImgBox:after{content: '';display: block;width: 16px;height: 16px;border-radius: 50%;position: absolute;bottom: -8px;background: linear-gradient(90deg, #f4f4f4, #f0f0f0);}
.resultImgBox:before{left: -8px;}
.resultImgBox:after{right: -8px;transform: rotate(180deg)}
.resultBottomBox{padding: 30px 20px 40px;}
.toReserveBtn{width: 200px;background: #CE1D01;border-color: #CE1D01;display: block;margin: auto;}
</style>

//找到Fetch文件引入, 请求后端接口的必要
import Fetch from '../../../utils/Fetch';
//获取当前页面路径
const _ctxPath = window.location.origin;
//此处的.json 根据自己的接口选择, 
export const PROMPT_NETWORK_URL = _ctxPath + '/XXX你要请求的接口类/方法.json';
export default {
  getJsApi(parameter) {
    return Fetch({
      url: PROMPT_NETWORK_URL,
      method:'get',
      params:parameter
    });
  },
};