H5跳转微信小程序
2022-06-13 本文已影响0人
Famous
这问题，很多情况，分几类:
一、微信内嵌H5跳转内部微信小程序页
1. 小程序页内
<!--pages/webview/webview.wxml-->
<web-view src="https://abc.com/#/home"></web-view>
Tips:
- 微信页面 webview 组件
- 个人小程序不支持
- abc.com 域名要加到小程序合法域名中
- 微信开发者工具中测试时，勾选不校验域名~
2. H5项目中引入SDK
// 引入微信SDK
http://res.wx.qq.com/open/js/jweixin-1.6.0.js
// 或https
https://res.wx.qq.com/open/js/jweixin-1.6.0.js
// console.log(window.wx)
3. 跳转
- tabbar页面
wx.miniProgram.switchTab({
url: '/pages/index/index'
})
- 非tabbar页面
wx.miniProgram.navigateTo({
url: '/pages/activity/index'
})
Tips:
- 给一个按钮来触发，需要用户主动触发才行
- 小程序路径最前面别忘了是 /
二、微信内嵌H5跳转外部微信小程序页
- 第一种即微信小程序中创建一中间页，背景加按钮，用户再点一下，跳转其他小程序页。
- 由于上述方案多了中间页，需要用户再点一次，转化率和用户体验都不如原生小程序页，如果页面上内容不多，可以考虑直接用小程序页开发。
- 那如果小程序不是你负责的内容，你只有H5 权限，那还可以试试下面的方案
(1) 开放标签wx-open-launch-weapp
- 引入微信SDK，绑定安全域名，看完 上面内容一 应该已经做好
- 解除页面上对陌生标签的警告(让页面开发心情愉悦)
1、vue2中
Vue.config.ignoredElements = ['wx-open-launch-weapp'];
2、vue3中，有vue.config.js 的 非vite 项目
module.exports = {
//...其他配置
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compilerOptions = {
isCustomElement: tag => tag.startsWith('wx-')
}
return options
})
}
}
3、vue3中，有 vite.config.js 的 vite 项目
export default defineConfig({
root: process.cwd(),
base: './', // 如果是根目录部署请配置为 / isProduction ? "./" : "/"
// mode: process.env.NODE_ENV,
publicDir: 'public',
plugins: [
vue({
template: {
// 添加以下内容
compilerOptions: {
isCustomElement: tag => tag.startsWith('wx-') // 微信相关标签不要警告
}
}
})
],
})
4、让后台配合给一个接口，获取微信的config参数
比如node 后台 可参照 node 获取微信签名并使用jssdk
其它语言的随便搜搜都有~
Tips
- 上述步骤会需要企业小程序的appId 和appSecret，而不是对方的这些信息，提供你外跳的能力，此外成事后，开放的api 你都可以调用，比如分享
getWxConfig({
wxMiniId: 'gh_xxxxxx', // gh开头的原始id，并非appId
signUrl: window.location.href
}).then(res => {
const data = res.data.data
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名
jsApiList: ['updateTimelineShareData'], // 必填，按需写
openTagList: ['wx-open-launch-weapp'] // 可选，需使用开放标签，如['wx-open-launch-app']
})
})
5、使用开放标签
vue2 中
<div style="position: relative; width: 100%; height: 300px">
<img src="http://pic5.40017.cn/i/ori/ed500-18AAgY6YGhW.jpg"/>
<wx-open-launch-weapp
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
username="gh_72a4eb2d4324" path="sub_inner_pages/r2x/pages/task-
home/task-home.html">
<script type="text/wxtag-template"> <div style="position: absolute; top: 0; left:
0; width: 100%; height: 100%; opacity: 0">
</div></script>
</wx-open-launch-weapp>
</div>
vue3 中
<!-- 跳转小程序的开放标签 文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
<!-- vue3中使用微信开放标签 文档 https://blog.csdn.net/qq_26834399/article/details/119544394 -->
<div style="position: relative; width: 100%; height: 300px">
<img src="http://pic5.40017.cn/i/ori/ed500-18AAgY6YGhW.jpg"/>
<wx-open-launch-weapp
id="launch-btn"
username="gh_72a4eb2d4324"
path="sub_inner_pages/r2x/pages/task-home/task-home.html"
style="
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
"
>
<div v-is="'script'" type="text/wxtag-template">
<div style="width: 100%; color: orangered; text-align: center">
跳转外部小程序
</div>
</div>
</wx-open-launch-weapp>
</div>
Tips
- 一般思路就是把标签定位在元素上方，用户点击后跳走，里面不加任何东西，当然也可以定位个按钮在原来的图片上等，自由发挥即可~
三、短信跳转微信小程序页
由于短信引流成本低，很多公司都使用这样的方式去吸引流量，核心是获取URL Scheme
可查阅微信官方文档
太长不想看?
核心几点如下:
- 自2022年04月11日起，URL Scheme
- iOS系统支持识别 URL Scheme，短信等应用场景中可直接使用，安卓需要h5中间页。
h5中间页??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>过渡h5页面</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
</style>
<body>
</body>
<script type="text/javascript" async defer>
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
// console.log(getQueryVariable('type'))
// type 为 0就是A中转页 1就是B中转页
var currentType = getQueryVariable('type') || 0
currentType = Number(currentType)
var smallRoutineUrl = ['weixin://dl/business/?t=ikYzkt4gxCm', 'weixin://dl/business/?t= *TICKET*'][currentType]
window.location.href = smallRoutineUrl
</script>
</html>
Tips
如果你这个模板只服务一个短信链接，完全可以写死跳转的url，但是你想搞成通用的，可以像我上面这样封装下，根据类型去不同的小程序。然后URL Scheme也可以向后台实时获取新的，确保这个中间页的链接是有效的。
- 获取URL Scheme的方法较繁琐，我们可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme
- 只能生成已发布的小程序的 URL Scheme
由于不再支持永久有效，IOS也走中间页，在中间页动态获取有效的URL Scheme实现跳转
缺点:
这样后台要开发接口配合你来获取该链接，且你的h5地址如果很长，最好能生成短链，这样放在短信中不至于太长。
四、云开发静态网站跳转小程序
无公众号直接使用小程序身份开发网页并免鉴权跳转小程序?可以吗?
可以参考 官方文档
