使用wx-open-launch-app 实现h5打开app

最新推荐文章于 2024-08-12 10:51:06 发布

爱酱丶

最新推荐文章于 2024-08-12 10:51:06 发布

阅读量1.2k

点赞数 5

文章标签： js javascript html5

本文链接：https://blog.csdn.net/M1512415/article/details/118149261

版权

1、安装weixin-js-sdk
npm install --save weixin-js-sdk

在这里插入图片描述

引用：var wx = require('weixin-js-sdk');

因为需要用到的地方比较多，我这边在main.js里全局引用：

Vue.prototype.$wx = require('weixin-js-sdk')

别的地方需要用到wx的时候，就用this.$wx就可以

因为wx-open-launch-app样式特别难调，有很多不同样式的地方都有用到打开app功能，所以干脆就做了一个透明层，覆盖在我们需要用到的地方，那既然为了省事，再方便点，直接封装一个组件吧，用的时候引用一下组件就可以。

废话不多说，写组件：

新建一个openApp.vue文件

<!--
 * @Description: 打开app
-->
<template>
  <div class="open_app">
    <wx-open-launch-app
      id="launch-btn"
      @error="handleError"
      @launch="handleLaunch"
      :extinfo="dataStr"
      appid="app的id（手动马赛克）"
    >
      <script type="text/wxtag-template">
        <div style="width:100%;height:1000px">
        </div>
      </script>
    </wx-open-launch-app>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from 'axios'
import { jump } from '../utils/jump.js' // 跳转下载

export default {
  components: {},
  data() {
    return {
      dataStr: '传给app端的数据'
    }
  },
  created() {
    this.wechatInit()
  },
  methods: {
    /**
     * @description: 打开错误
     * @param  {*}
     * @return {*}
     */
    handleError() {
      jump()
    },
    /**
     * @description: 打开成功
     * @param  {*}
     * @return {*}
     */
    handleLaunch() {},
    /**
     * @description: 接口获取开放标签需要的参数
     * @param  {*}
     * @return {*}
     */
    wechatInit() {
      axios({
        method: 'get',
        url: 'https://xxx（后端接口，（手动马赛克））',
        params: {
          url: encodeURIComponent(window.location.href.split('#')[0])
        },
        headers: {
          Authorization:
            'token（手动马赛克）'
        }
      }).then((res) => {
        if (res.data) {
          const data = res.data.data
          this.$wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
            appId: '公众号id（手动马赛克）', // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表
            openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
          })

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

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

<style scoped lang="scss">
.open_app {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  #launch-btn {
    display: block;
  }
}
</style>

然后在我们需要用到的地方引用组件：

<!--
 * @Description: 详情
-->
<template>
  <div class="des_detail">
    <!-- 打开app -->
    <open-app></open-app>
  </div>
</template>

<script type="text/ecmascript-6">
import openApp from './../components/openApp.vue'
export default {
  components: {
    openApp: openApp
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
.des_detail {
  /* 必须设置position: relative;不然会位置飘出父层 */
  position: relative;
  width: 100px;
  height: 50px;
  background: rgb(95, 157, 228);
}
</style>