随笔- 5 文章- 0 评论- 0 阅读- 9285

VUE H5跳转小程序 wx-open-launch-weapp

首先我们要跳转到微信的小程序，那么就要获取微信JSDK

weixin.config.js

const initWx = function () { // 首先要调用微信的jsdk
  return new Promise((resolve, reject) => {
    getWxConfig().then(res => { // 不管是自己写的方法还是后台给的接口方法都可以，只要这个方法有这个wx.config需要的参数
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名
        jsApiList: ['chooseImage', 'previewImage'], // 必填，需要使用的JS接口列表
        openTagList: ['wx-open-launch-weapp'] // 跳转小程序要用到的标签
      })
    })
 
    wx.ready(function () {
      resolve()
      // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    })
 
    wx.error(function (res) {
      reject(res)
      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    })
  })
}
export default initWx

main.js 中写入

import initWx from '@/commons/weixin.config.js'

Vue.use(initWx)

上面两句是全局方法，也可以需要的页面去当页面引入
执行的方法在下面的index.vue的created()生命周期里面


Vue.config.ignoredElements = ['wx-open-launch-weapp'] // 这句是main.js页面一定要写的

index.vue （我这里是投机取巧，就不用在乎小程序标签里面的样式，里面有坑，设置高度可能不生效，因为不好调试，只能发布有js安全域名的网址并且是微信环境才能看到效果，我们的目的是能看到要的样式，能跳转就行，这样组合就可以实现）

<template>

<!--外层盒子-->

<div class="card-row-bottom">

<!--底层看到样式的盒子，自己本地可以调好，我这里是图片，撑开了外层盒子的宽高-->

  <div class="goodCard" data-v-3cb40a52="">
    <img src="../../../../public/images/IMG.png" />
  </div>

<!--H5跳转小程序的标签，能实现跳转功能-->

  <wx-open-launch-weapp
    id="launch-btn"
    username="所需跳转的小程序原始id，即小程序对应的以gh_开头的id"
    path="所需跳转的小程序内页面路径及参数"
    @error="handleErrorFn"
    @launch="handleLaunchFn"
    class="wx-app"
  >
    <script type="text/wxtag-template">
      <style>
        .ydz { width: 100%; height: 100%; }
        .tp { width: 100%; height: 100% }
      </style>
      <div class="ydz"> <img class="tp" src="https://跳转小程序的这里要引入图片则为可访问的全连接，不能是本地图片,我这里的图片没有设置宽高的时候很大，所以我知道能撑开，你也可以不用图片，用文字啥的撑开然后透明都可以" alt /></div>
    </script>
  </wx-open-launch-weapp>
</div>
</template>


<script>

import initWx from '@/commons/weixin.config'

created () {
  initWx().then(() => {
    // alert('初始化成功') // 初始化成功才能调微信的jsdk，才能使用wx-open-launch-weapp标签看到效果执行跳转

  }).catch(() => {
    // alert('初始化失敗')
  })
},

</script>


<style>

.card-row-bottom{ // 最外层盒子（这里没有设置宽高，会由里面的图片盒子撑开对应的大小）
  width: 100%; // 屏幕宽度
  position: relative; // 相对定位
  padding: 0px 16px;
  margin-top: 0px;
  overflow: hidden; // 超出部分隐藏
}
.goodCard { // 底层样式展示，我这里是点击图片跳转
  width: 100%;
  pointer-events: none;
  img{
    width: 100%;
    height: 100%;
  }
}
.wx-app{ // 上层的跳转小程序的盒子
  position: absolute; // 绝对定位
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
  z-index: 10;
  opacity: 0;
}