微信开放标签的使用（h5站内跳转app）

白柚Y

已于 2023-08-22 11:45:30 修改

阅读量262

点赞数

文章标签：微信 javascript 前端

于 2023-08-22 11:41:01 首次发布

本文链接：https://blog.csdn.net/m0_67084957/article/details/132423134

版权

1.后端提供获取jsticket接口，获取appId、timestamp(时间戳）、nonceStr（随机串）、signature（签名）等参数

2.在main.js（v2写法）中写入接口请求或者在store/index.ts（v3写法）文件中写入请求

//main.js文件


if (!/MicroMessenger/i.test(navigator.userAgent)) {
} else {
  const apiParams = {
    // eslint-disable-next-line
    appid: process.env.APPID,
    url: location.href.split("#")[0]
  };
  getJsticket(apiParams)
    .then(res => {
      console.log(123)
      console.log('res===>', res);
      const signParams = {
        debug: false,
        appId: res.appid,
        timestamp: res.timestamp,
        nonceStr: res.nonceStr,
        signature: res.signature,
        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'hideOptionMenu', 'chooseWXPay', 'hideToolbar'],
        openTagList: ['wx-open-launch-app'],
      }
      console.log('微信配置------------', signParams)
      wx.config(signParams)
      // return signParams

    })
    .catch(e => {
      console.log(e)
    })
}

// store/index.ts文件（在此处是已经封装过的“wxShareCinfig”）


import { defineStore } from 'pinia';
import storage from 'storejs';
import { getUrlParam, getPs } from '@/utils/common.js';

export const userStore = defineStore('user', {
  state: () => {
    return {
      isLogin: false,
      appInfo: {},
      userInfo: {}, // 用户信息
      openId: '',
      loginFail: false,
    };
  },
  getters: {
    // openId: (state) => state.openId,
    // // 是否已经登入
    // isLogin: (state) => state.isLogin,
    // // app信息
    // appInfo: (state) => state.appInfo,
  },
  actions: {
    initWxShare() {
      if (!appStore().isWeChat) {
        console.log('不是微信，不配置微信分享');
        return;
      }
      wxShareCinfig();

    // 、、、、、、、、、登录逻辑判断
    },
    
    },
  },
});

//封装

/**
 * 微信 引入jssdk
 *
 */
// var import.meta = NodeJS.import.meta;
var initWx = false
export const wxShareCinfig = function () {
  initWx = true;
  console.log('wxShareCinfig', 'wxShareCinfig');
  return new Promise((resolve, reject) => {
    const apiParams = {
      // eslint-disable-next-line
      appid: import.meta.env.VITE_APPID,
      url: location.href.split('#')[0],
    };
    serviceApi
      .getJsticket(apiParams)
      .then((res) => {
        const conf = {
          debug: false,
          appId: res.appid,
          timestamp: res.timestamp,
          nonceStr: res.nonceStr,
          signature: res.signature,
          jsApiList: [
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareAppMessage',
            'onMenuShareTimeline',
            'onMenuShareWechat',
            'hideOptionMenu',
            'hideToolbar',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'getLocalImgData',
          ],
          openTagList: ['wx-open-launch-app'],
        };
        wx.config(conf);
        initWx = true;
        resolve();
      })
      .catch(() => {
        reject();
      });
  });
};

3.封装jumpApp组件

<template>
  <div :style="rootStyle">
    <wx-open-launch-app
      v-if="isWeChat"
      :style="tagStyle"
      :extinfo="sendMsg"
      appid="wx2129aa1c6caf799d"
      @click="trackClick"
      @ready="ready"
      @launch="launch"
      @success="success"
      @error="error"
    >
      <component :is="'script'" type="text/wxtag-template">
        <slot></slot>
      </component>
    </wx-open-launch-app>
    <slot v-else></slot>
  </div>
</template>


<script>
/* eslint-disable */

import storage from "storejs";
import sa from 'sa-sdk-javascript'

export default {
  props: {
    router: {
      type: Object,
      default: () => { },
    },
    tagStyle: {
      type: String,
      default: "",
    },
    rootStyle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // sendMsg:""
      isWeChat: /MicroMessenger/i.test(navigator.userAgent)
    };
  },
  computed: {
    isWeChat() {
      // 判断是否微信环境
      function is_weixn() {
        let ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return true;
        } else {
          return false;
        }
      }

      // 判断当前微信版本号是否支持
      function is_version() {
        let client = false; // 当前版本号是否支持 (默认不支持)
        let wxInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); // 微信浏览器信息
        // 微信版本号 wxInfo[1] = "7.0.18.1740" (示例)
        //进行split转成数组进行判断 [7,0,18,1740] (示例)
        let version = wxInfo[1].split(".");
        console.log('y', version);
        // 判断版本在7.0.12及以上的版本
        if (version[0] > 7) {
          return client = true
        } else if (version[0] == 7) {
          if (version[1] > 0) {
            return client = true
          } else if (version[1] == 0) {
            if (version[2] >= 12) {
              return client = true; // 当前版本支持
            }
          }
        }
      }
      console.log('123', is_version());
      console.log('123', is_weixn());
      console.log('123', is_weixn() && is_version());
      return is_weixn() && is_version()
    },
    sendMsg() {
      //   公共参数
      var baseParams = {
        buriedType: this.buriedType,
        clazzName: "",
        source: "",
        token: "",
      }
      var obj = {};
      if (this.router && this.router.path) {
        switch (this.router.path) {
          case "subjectDetail":
            obj = {
              notType: "",
              typeId: this.router.config.typeId,
              subjectType: this.router.config.subjectType,
              courseSourceType: "",
            };
            break;
         
        }
        //有的app链接需要特殊处理
        if (this.router.path === 'subjectDetail' && this.router.config.linkUrl) {

          //、、、、、、、

        } 
      
      var sendObj = {
        ...obj,
        ...baseParams,
      }
      // var res = this.router && this.router.path
      //     ? JSON.stringify()
      //     : '';
      console.log("sendObj-----------------", sendObj);
      return JSON.stringify(sendObj);
    },
  },
  created() {
    
  },
  methods: {
    trackClick() {
      console.log(123123);
      // 埋点
      sa.track('$WebClick', { $element_content: "下载按钮" })
    },
    launch(e) {
      console.log('launch----------------', e)
      this.$emit('launch')
    },
    ready(e) {
      console.log("ready----------", e);
    },
    success(e) {
      console.log("success----------", e);
    },
    error(e) {
      console.log("error----------", e.detail);
      sa.track('WechatLaunchError', { $element_content: "下载按钮" })

      // 跳转app失败就直接跳转到百度
      location.href = "https://www.baidu.com";
    },
  },
};
</script>

<style>
</style>

4.使用（注意：在添加了开放标签后，原有的样式会错乱，需要调整样式）

//场景一：

 <jump-app
                  root-style="width: 300px;
                            height: 50px;
                            position: absolute;
                            bottom: 80px;
                            transform: translateX(-50%);
                            left: 50%;"
                  tag-style="width: 300px;
                          height: 50px;
                          text-align: center;
                          line-height: 50px;
                          border-radius: 25px;
                          font-size: 20px;
                          position: absolute;
                          left: 50%;
                          transform: translateX(-50%);
                          box-shadow: 0px 4px 10px 0px rgba(193, 39, 43, 0.5);"
                >
                  <div
                    class="btn"
                    style="
                      width: 300px;
                      height: 50px;
                      text-align: center;
                      line-height: normal;
                      background-color: #c1272b;
                      border-radius: 25px;
                      font-size: 20px;
                      font-weight: 600;
                      color: rgb(255, 255, 255);
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                    @click="godownload"
                  >
                    <span>下载APP</span>
                  </div>
                </jump-app>

// 场景二：

               <jump-app
                buriedType="WX 文章详情-相关阅读区域"
                tagStyle="width: calc(100vw - 0.3rem);"
                :router="{
                  path: 'subjectDetail',
                  config: {
                    typeId: item.typeId,
                    from4: 10016,
                    courseSourceType:10016,
                    subjectType: item.subjectType,
                    linkUrl: item.routeUrl,
                    linkTitle: item.title,
                  },
                }"
              >
                <div
                  style="position: relative; overflow: hidden"
                  v-if="item.type == 4"
                >
                  <div
                    class="reading-right"
                    style="
                      padding-bottom: 20px;
                      width: 70%;
                      height: 100%;
                      float: left;
                      position: relative;
                    "
                  >
                    <p
                      class="title"
                      style="
                        margin: 0;
                        width: 100%;
                        height: 40px;
                        text-align: left;
                        margin-bottom: 12px;
                        font-size: 16px;
                        color: #222;
                        line-height: 20px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        /*! autoprefixer: off */
                        -webkit-box-orient: vertical;
                        /* autoprefixer: on */
                        -webkit-line-clamp: 2;
                      "
                    >
                      <span
                        class="typeIcon"
                        style="
                          display: inline-block;
                          width: 24px;
                          height: 14px;
                          font-size: 10px;
                          line-height: 14px;
                          text-align: center;
                          color: #ffffff;
                          letter-spacing: 0px;
                          border-radius: 2px;
                          padding: 0px 2px;
                          background-color: #d93639;
                          margin-top: -3px;
                        "
                      >
                        直播
                      </span>
                      {{ item.title }}
                    </p>
                    <div
                      class="related"
                      style="
                        width: 100%;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        height: 20px;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <!-- pv数 -->
                      <div
                        v-if="item.pvNum && item.pvNum > 0"
                        class="shares"
                        style="
                          display: flex;
                          align-items: center;
                          margin-right: 13px;
                        "
                      >
                        <div
                          class="shares_icon"
                          style="
                            width: 12px;
                            height: 12px;
                            background-repeat: no-repeat;
                            background-size: cover;
                            background-position: center;
                            background-image: url('http://1689219903105.png');
                            margin-right: 2px;
                          "
                        ></div>
                        <div
                          class="shares_nums"
                          style="
                            font-size: 12px;
                            font-weight: normal;
                            line-height: 12px;
                            letter-spacing: 0px;
                            margin-left: 2px;
                            color: #999999;
                          "
                        >
                          {{ item.pvNum }}
                        </div>
                      </div>
                      <!-- 主讲人 -->
                      <div class="reads">
                        <div
                          class="read_nums"
                          style="
                            font-size: 12px;
                            font-weight: normal;
                            line-height: 12px;
                            letter-spacing: 0px;
                            margin-left: 2px;
                            color: #999999;
                          "
                        >
                          {{ item.professorName }}{{ item.professorTitle }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="img"
                    :style="{ backgroundImage: 'url(' + item.minpicUrl + ')' }"
                    style="
                      display: block;
                      float: right;
                      width: 24%;
                      height: 51px;
                      /* margin-top: 8px; */
                      border-radius: 4px;
                      background-position: center;
                      background-size: cover;
                      background-repeat: no-repeat;
                    "
                  ></div>
                </div>
              </jump-app>