前言

微信目前已经提供四种开放标签

wx-open-launch-weapp
wx-open-launch-app
wx-open-subscribe
wx-open-audio

主要对开发提供了跳转APP、跳转H5、服务号订阅通知按钮、音频播放功能。这里只会讲到如何使用wx-open-launch-weapp、wx-open-launch-app标签。

踩坑之路

关于在Vue使用 wx-open-launch-weapp 和 wx-open-launch-app 的文章有很多，但都是比较不完善，踩了一个坑另一个又出现了。下面以跳转小程序为例，记录我的踩坑之路。

首先，在开发之前必须要准备的资源

已认证的服务号
任意合法合规的小程序

已认证的服务号，这个是强制要求，如果是订阅号或非认证的服务号，wx-open-launch-weapp 按钮不会显示。
要提供小程序 原始ID 进行跳转，所以小程序也是必不可少的。

接下来就是在Vue中运用wx-open-launch-weapp标签。先来看看官方给的列子：

JAVASCRIPT集成

<wx-open-launch-weappid="launch-btn"username="gh_xxxxxxxx"path="pages/home/index?user=123&action=abc"
><template><style>.btn { padding: 12px }</style><button class="btn">打开小程序</button></template>
</wx-open-launch-weapp>
<script>var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) {console.log('success');});btn.addEventListener('error', function (e) {console.log('fail', e.detail);});
</script>

但是在Vue、React中集成代码就不能这么写了

开放标签属于自定义标签，Vue会给予未知标签的警告，需要通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false
Vue.config.ignoredElements = ['wx-open-launch-weapp']App.mpType = 'app'const app = new Vue({...App
})
app.$mount()

开发标签要通过<template></template>进行包裹，但是对于Vue等视图框架，需要使用<script type="text/wxtag-template"></script>进行代替，避免template标签冲突的问题
使用微信开发标签后，里面包裹的图片不能使用物理路径，必须使用可公网访问的图片地址或者BASE64
ios 缓存导致按钮不显示

爬坑

结合上面遇到一切问题，决定进行简易封装（毕竟主攻是后端），打包成 NPM

// 部分包源码
export function launchWeApp(info) {if(info.active){var btn = document.getElementById(info.eleId); let script = document.createElement("script"); script.type = "text/wxtag-template"; script.text = info.contentlet html =`<wx-open-launch-weapp style="width:100%;height:100%;display:block;" username="${info.username}" path="${info.url}">${script.outerHTML}</wx-open-launch-weapp>`;btn.innerHTML = html;btn.addEventListener("launch", info.launchEvent);btn.addEventListener("error", info.errorEvent);}else{var btn = document.getElementById(info.eleId); //获取元素let html =`<view style="width:100%;height:100%;display:block;">${info.content}</view>`;btn.innerHTML = html;btn.addEventListener("click", info.noAtiveEvent);}
}

npm i wx-open-launch

执行上面命令，直接安装引入，包详细源码点这里查看。后台获取微信 JSSDK 的配置，前端配置如下：

weixin.config({appId: res.data.appId, // 必填，公众号的唯一标识timestamp: res.data.timestamp, // 必填，生成签名的时间戳nonceStr: res.data.nonceStr, // 必填，生成签名的随机串signature: res.data.signature, // 必填，签名jsApiList: ['onMenuShareTimeline'], // 必填，如果没有使用API就随便填一个，不然会报错openTagList: ['wx-open-launch-weapp'] // 必填
});
weixin.ready((ready) => {console.log("ready");// 以下代码处理ios 第一次进入页面按钮没有显示，主要还是因为ios 的微信浏览器缓存，这里多刷新一次var systemInfo = uni.getSystemInfoSync()if (systemInfo.platform == 'ios') {const currUrl = location.href;const isReload = currUrl.indexOf("?reload=1") > -1 ? true : false;if (!isReload) {location.replace(currUrl + "?reload=1");}}
});
weixin.error((error) => {console.log("error");// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

H5 跳转小程序

HTML:

<view id="launch-btn"></view>

JS/TS:

let weappBtnStyle = `
<style>.menu-logo-wx-text {font-size: 14px;margin-top: 10%;}.menu-logo-wx {height: 30%;width: 60%;}...
</style>
`;
let content = `
<view class="uni-flex-wx uni-column-wx menu-logo-div-wx">
// image src 必须是外网可以访问到的图片，不能填写物理路劲，将无法访问
<image class="menu-logo-wx" src="https://xxxx/xxx/xx.png"></image>
<text class="menu-logo-wx-text">网校</text>
</view>
${weappBtnStyle}
`;let launchParams = {eleId: "launch-btn", // 页面元素标签ID，必填url: "", // 小程序地址，非必填username: "gh_xxxxxxxxxx", // 小程序原始ID，必填content: content, // 按钮HTML元素及样式，必填launchEvent: function(e) {...}, // 点击按钮正常跳转触发，必填errorEvent: function(e) {...}, // 点击跳转抛出异常，必填active: true, // 按钮是否激活跳转小程序，为了满足个别情况下改按钮不需要跳转小程序noAtiveEvent: function() {...} // 按钮不跳转小程序时的点击时间，active 为 true 时必填
};
launchWeApp(launchParams); // 引入JS之后调用launchWeApp

H5 跳转APP

HTML:

<view id="launch-btn"></view>

JS/TS:

let weappBtnStyle = `
<style>.menu-logo-wx-text {font-size: 14px;margin-top: 10%;}.menu-logo-wx {height: 30%;width: 60%;}...
</style>
`;
let content = `
<view class="uni-flex-wx uni-column-wx menu-logo-div-wx">
// image src 必须是外网可以访问到的图片，不能填写物理路劲，将无法访问
<image class="menu-logo-wx" src="https://xxxx/xxx/xx.png"></image>
<text class="menu-logo-wx-text">网校</text>
</view>
${weappBtnStyle}
`;let launchParams = {eleId: "launch-btn", // 页面元素标签ID，必填appid: "", // 所需跳转的AppID，必填extinfo: "", // 跳转所需额外信息，非必填content: content, // 按钮HTML元素及样式，必填launchEvent: function(e) {...}, // 点击按钮正常跳转触发，必填errorEvent: function(e) {...}, // 点击跳转抛出异常，必填active: true, // 按钮是否激活跳转APP，为了满足个别情况下改按钮不需要跳转APPnoAtiveEvent: function() {...} // 按钮不跳转APP时的点击时间，active 为 true 时必填
};
launchApp(launchParams); // 引入JS之后调用launchApp

Vue、React使用微信开发标签跳转H5和小程序（最详细）相关推荐

vue引入微信的JSSDK h5与小程序之间的跳转方案
vue引入微信的JSSDK使用 h5与小程序之间的跳转 vue如何使用微信的JSSDK 安装 npm install weixin-js-sdk --save 我喜欢设置全局属性,所以在main.j ...
Vue.extend( options )微信单位食堂统计用餐小程序,微信食堂报餐小程序,单位食堂微信小程序
参数: {Object} options 用法: 使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象. data 选项是特例,需要注意 - 在 Vue.ext ...
微信小程序开发学习1（小程序的入门知识）
微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面的几个组成部分能够知道小程序中常见的组件如何使用能够知 ...
三勾商城是开发友好的微信小程序商城，框架支持SAAS，支持发布 iOS + Android + 公众号 + H5 + 各种小程序
简介: 三勾小程序商城基于thinkphp6+element-ui+uniapp打造的面向开发的小程序商城,方便二次开发或直接使用,可发布到多端,包括微信小程序.微信公众号.QQ小程序.宝小程序.字节 ...
【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
目录前言 App.H5效果小程序效果一.兼容APP.H5的方式二.兼容小程序三.实现同时兼容前言首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜 ...
关于微信公众号的h5页面跳转微信小程序的详细介绍
简介关于微信公众号跳转小程序的功能,我也是研究了一整天才弄好的,主要是微信官方文档写的不清楚,百度上的各种文章也各说各的,不过最后还是要相信官网文档,接下来我会一步一步分析,希望对你有帮助,并且最后 ...
uniapp兼容H5和小程序订阅消息授权开发封装，使用方便
本文使用 uniapp 框架开发,因为H5的订阅消息和小程序的订阅消息的授权流程不一样,但是很多地方需要使用授权,所以我封装了一个兼容H5和小程序订阅消息授权的方法,使用比较方便,希望能够帮助到你,实 ...
小程序开发和html的区别,h5和小程序有什么区别？
我们都知道微信小程序说是一种程序.看似与手机当中的app一样,实际上都是一种网页程序,所以它在设计上面很多地方都会与H5网页设计有一些雷同性,那么微信小程序与H5有什么区别?下面本篇文章给大家介绍一下 ...
微信公众平台接口调试工具json格式不对怎么搞_腾讯云和微信推出更快速的小程序开发平台，微信读书小程序作示范...
腾讯云副总裁刘颖将腾讯云定义为微信的一个助手,腾讯云面向微信生态开发者输出的技术解决方案包括"小程序·云开发".小程序音视频直播.小游戏联机对战引擎等,腾讯云与企业微信的合作也会在 ...

Vue、React使用微信开发标签跳转H5和小程序（最详细）

前言

踩坑之路

爬坑

H5 跳转小程序

HTML:

JS/TS:

H5 跳转APP

HTML:

JS/TS:

Vue、React使用微信开发标签跳转H5和小程序（最详细）相关推荐

最新文章

热门文章