H5跳转到微信小程序
H5跳转到微信小程序
🌸 Date: 2021-6-8
👋 2021-6-9 补充app跳转微信小程序，注意点
🌸 2021-6-15 简单补充微信内部浏览器跳转小程序
微信内部浏览器跳转小程序
1、引入微信js包
在index.html中引入最新的js包
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script>
2、申请开放标签
通过config接口注入权限验证配置并申请所需开放标签 （开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的）
wx.config({
// debug: true, // 调试时可开启
appId: 'appId',
timestamp: 0, // 必填，填任意数字即可
nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
signature: 'signature', // 必填，填任意非空字符串即可
jsApiList: ['wx-open-launch-weapp'], // 安卓上必填一个，随机即可
openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxx" path="/pages/home/home">
<template>
<div class="btn" >打开微信小程序</div>
</template>
</wx-open-launch-weapp>
判断是否是微信浏览器
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
console.log(ua)
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
}
- pc端
mozilla/5.0 (linux; android 6.0; nexus 5 build/mra58n) applewebkit/537.36 (khtml, like gecko) chrome/90.0.4430.212 mobile safari/537.36
！！注意
- username不是appid是以gh开头的，是微信小程序的原始id,微信鉴权是公众号的appid
- 还有我们跳转的路径要带.html
- 本地会报组件未注册的错 可忽略
- 微信网页模拟器也不可以 需要在真机上才可展示出来 （若未展示出来按钮 检查自己config注入是否成功）
关于wx-open-launch-weapp样式
-
在开放标签中，写宽
100%是可以生效的，但是高却不是那么容易生效。 -
在开放标签中，
<script>标签中要加入<div style="position: absolute; "/>,这一块是触发区域，记得在这个div写样式(主要是让高生效)。 -
如果害怕写不好样式，可以在外面把样式写好，这个直接
opacity: 0;
遇到的注意点
在开放的过程中，需要注意点：
1、 通过config接口注入权限验证配置并申请所需开放标签
-
微信鉴权必须得成功，注意vue中hash和history模式配置的区别
-
微信鉴权成功，肯定是部署到服务器并且真机的情况下，才能调试，否则，肯定失败
2、 vue中，template标签冲突，会被忽略。
<wx-open-launch-weapp ref="launchbtn" id="launch-btn" username="gh_xxxxx" path="/pages/home/home.html">
<template>
<div style="width: 100px;height: 100px;background: green;">打开微信小程序</div>
</template>
</wx-open-launch-weapp>
以上代码会报：The slot <template> or <script type="text/wxtag-template"> of <wx-open-launch-weapp> is missing
解决办法：动态渲染，代码如下
const createdTag = () => {
let script = document.createElement('script');
script.type = 'text/wxtag-template'
// 问题：行内样式，宽高不生效
script.text = '<div style="background: rgba(52, 120, 245, 1);width: 5.38rem;height: .96rem;line-height: .96rem;text-align: center;border-radius: .2rem;">前往测试</div>'
document.getElementById('launch-btn').appendChild(script);
}
3、 wx-open-launch-weapp样式不生效
在开发过程中，发现放在wx-open-launch-weapp标签里面的样式根本不起作用，里面引入的图片也不生效；这里的解决思路是，用一个透明的div，在div填充些文本，悬浮在需要点击触发跳转的模块上，然后用开放标签包裹。这样就避免了样式问题。
代码如下：
<div class="footer-btn fx-row">
<div class="btn tx-center tx-28 tx-ff bg-8f5 b-r-20 m-auto" @click="goTest">前往测试</div>
<!-- wx-open-launch-weapp 标签只能在微信鉴权后，微信浏览器中使用 -->
<!-- 如果是微信环境： wx-open-launch-weapp标签盖在 btn 上-->
<!-- 不是-- 则会使用goTest方法跳转 -->
<wx-open-launch-weapp v-if="isWX" id="launch-btn" :username="username" :path="goPathUrl" style="display: block;"></wx-open-launch-weapp>
</div>
<script>
// 动态创建script里的标签及内容
const createdTag = () => {
let script = document.createElement('script');
script.type = 'text/wxtag-template'
// 2021-9-28 以下代码，在按钮边边角角，可能会触发不到，所以，优化下
// script.text = '前往测试' // 文字随便写，行内样式不会生效
// 优化：这儿才是按钮的触发区域，用绝对定位，可以撑起触发区域的高度
script.text = '<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;opacity: 0;">前往测试</div>'
document.getElementById('launch-btn').appendChild(script);
}
</script>
<style>
/* 样式写的比较多，也没有进行筛选 */
#launch-btn{
color: #fff;
width: 5.38rem;
height: .96rem;
line-height: .96rem;
text-align: center;
margin: auto;
background: rgba(52, 120, 245, 1);
border-radius: .2rem;
word-break: break-all;
word-wrap: break-word;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
}
</style>
4、点击按钮，提示：信息不完整，无法启动
最有可能的原因是 usename 或者是跳转路径错误
解决办法：
必须要先加载wx.config再写wx-open-launch-weapp标签
因为二者是异步的，如果直接在html里写wx-open-launch-weapp标签，会因为wx.config还没执行导致信息不完整
5、单双引号嵌套问题
双引号内不能包含双引号，单引号内不能出现单引号
改成
let html = `<wx-open-launch-weapp id="launch-btn" username='${VITE_APP_MINIPROGRAME_GHOST_ID}' path="${goPathUrl}">
${script.outerHTML}
</wx-open-launch-weapp>`
// VITE_APP_MINIPROGRAME_GHOST_ID = 'gh_xxxxx'
6、跳转之后显示页面不存在
跳转之后显示页面不存在，请检查下path的路径结尾是否写上了.html
这个，我暂时没有去验证，我是直接加的.html后缀，可以正常跳转
外部浏览器跳转小程序
检测【QQ、抖音、钉钉、企业微信、淘宝、支付宝、京东】是否可以成功跳转微信小程序
可以通过微信提供的链接测试是否可以正常跳转
https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html
!! 注意
- 钉钉 6.0.13无法跳转微信小程序
- 微博无法跳转
- 支付宝app中，跳转微信小程序会长按复制链接，打开浏览器搜索，无法正常跳转小程序
微博内打开的h5，跳转到微信小程序，没有反应
以上都是当时2021年开发做的笔记。
2023-12-7 补充下外部浏览器跳转微信小程序
外部浏览器跳转
const goTest = () =>{
console.log('打开小程序')
// openLink 是在【小程序管理后台 - 工具 - 生成 URL Scheme 】获取的
location.href = openLink.value;
}
最新代码
<template>
<div class="footer-btn fx-row">
<div class="btn tx-center tx-28 tx-ff bg-8f5 b-r-20" @click="goTest">前往测试</div>
<div id="wxtag" v-if="isWX"></div>
</div>
</template>
<script>
import { ref, nextTick, onMounted, } from 'vue'
import * as $api from '/@/api'
import { useRoute } from 'vue-router'
export default {
name:'Home',
setup() {
const state = ref('inited')
const myVideo = ref(null)
const route = useRoute()
const isNotPC = ref(/Android|webOS|iPhone|iPad|iPod|SymbianOS|BlackBerry/i.test(navigator.userAgent))
const isStatic = ref(true) // 是否统计
let isClick = ref(true) // 防连点
let isWX = ref(false) // 是否是微信浏览器
let goPathUrl = `/pages/home/home.html?xxx`
const channel = ref(route.query.c)
let username = import.meta.env.VITE_APP_MINIPROGRAME_GHOST_ID
let openLink = ref('') // 跳转小程序链接
let kfimgIsShow = ref(false)
console.log('平台',isNotPC.value)
// 判断是否是微信浏览器环境
let ua = navigator.userAgent.toLowerCase()
ua.match(/MicroMessenger/i) == 'micromessenger'
isWX.value = ua.match(/MicroMessenger/i) == 'micromessenger'
const goTest = () =>{
console.log('打开小程序')
location.href = openLink.value;
}
isStatic.value = window.performance.navigation.type ? false: true
const createdTag = () => {
console.log('------createdTag-----')
let script = document.createElement('script');
script.type = 'text/wxtag-template'
// script这儿是触发区域
script.text = '<div style="position: absolute; top: 0; left: 0; width: 100%; height: 105%;opacity: 0;">前往测试</div>'
let html = `<wx-open-launch-weapp id="launch-btn" style="width: 5.38rem;height: .96rem;" username='${username}' path="${goPathUrl}">
${script.outerHTML}
</wx-open-launch-weapp>`
let wxtag = document.getElementById('wxtag')
wxtag.innerHTML = html
console.log(html)
}
onMounted(()=>{
if(isNotPC.value){
// 当前页面刷新，不做统计
if(isStatic.value) statisticsData()
// 如果不是微信环境，则return;
if(!isWX.value) return;
//在微信中打开
wx.ready(function(){
console.log('--- wx.ready ---')
nextTick(()=>{
createdTag()
let btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('跳转微信小程序success');
statisticsData()
});
btn.addEventListener('error', function (e) {
console.log('跳转微信小程序fail', e.detail);
});
})
})
wx.error(function (res) {
console.log('微信鉴权失败',res)
});
document.addEventListener('WeixinOpenTagsError', function (e) {
console.error('WeixinOpenTagsError',e.detail.errMsg);
});
}
})
return{
goTest,
onTapPlayIcon,
state,
myVideo,
isNotPC,
isWX,
goPathUrl,
kfimgIsShow,
}
}
}
</script>
既然选择了远方，便只顾风雨兼程。
