外部链接跳转微信小程序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zpcKl0T3-1621677958755)(image-20210416142912242.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LzC7TExH-1621677958761)(image-20210416143524736.png)]

测试用例

https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IJhVZSmJ-1621677958762)(image-20210416153801742.png)]

H5在微信端被打开

可以使用

 <div id="wechat-web-container" class="hidden"><p class="">点击以下按钮打开 “填入你的小程序名称”</p> <!-- replace --><!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html --><wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID（gh_ 开头的）" path="要跳转到的页面路径"> <!-- replace --><!-- path 需要手动加.html --><template><button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button></template></wx-open-launch-weapp></div>

在非微信环境就需要使用

<div id="public-web-container" class="hidden"><p class="">正在打开 “填入你的小程序名称”...</p> <!-- replace --><a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()"><span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>打开小程序</a></div>

我们需要根据环境判断,第一是手机端还是pc端
是在微信的浏览器还是,手机外部的浏览器

//判断逻辑docReady(async function() {var ua = navigator.userAgent.toLowerCase()var isWXWork = ua.match(/wxwork/i) == 'wxwork'var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'var isMobile = falsevar isDesktop = falseif (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {isMobile = true} else {isDesktop = true}if (isWeixin) {//在微信浏览器打开,显示<wx-open-launch-weapp>元素var launchBtn = document.getElementById('launch-btn')launchBtn.addEventListener('ready', function (e) {console.log('开放标签 ready')})launchBtn.addEventListener('launch', function (e) {console.log('开放标签 success')})launchBtn.addEventListener('error', function (e) {console.log('开放标签 fail', e.detail)})//微信的api接口wx.config({debug: true, // 调试时可开启appId: '小程序 AppID', // <!-- replace -->timestamp: 0, // 必填，填任意数字即可nonceStr: 'nonceStr', // 必填，填任意非空字符串即可signature: 'signature', // 必填，填任意非空字符串即可jsApiList: ['chooseImage'], // 必填，随意一个接口即可 openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名})} else if (isDesktop) {// 在 pc 上则给提示引导到手机端打开//显示请在手机端打开} else{//在手机外部浏览器打开的,调用跳转URL Scheme//这个就需要调起localhost.href="weixin://dl/business/?ticket=l92578fd8404e0d4e3e975f910fa43f3a"//元素的显示隐藏(忽略)var c = new cloud.Cloud({    //事情使用的是微信的云开发方法// 必填，表示是未登录模式identityless: true,// 资源方 AppIDresourceAppid: '小程序 AppID', // <!-- replace -->// 资源方环境 IDresourceEnv: '云开发环境 ID', // <!-- replace -->})await c.init()window.c = cvar buttonEl = document.getElementById('public-web-jump-button')var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')try {// 页面开始就触发openWeapp函数await openWeapp(() => {//去除loading图标buttonEl.classList.remove('weui-btn_loading')//隐藏weui-btn_loding元素buttonLoadingEl.classList.add('hidden')})} catch (e) {buttonEl.classList.remove('weui-btn_loading')buttonLoadingEl.classList.add('hidden')throw e}}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oygFwPfv-1621677958774)(image-20210416153525648.png)]

外部跳转处理函数

 async function openWeapp(onBeforeJump) {var c = window.cconst res = await c.callFunction({   //云开发name: 'public',data: {action: 'getUrlScheme',},})console.log(res);  //{errMsg: "cloud.callFunction:ok"//requestID: "46bd31f4-9e89-11eb-8a7e-525400549ebe"//result:{//errCode: 0//errMsg: "openapi.urlscheme.generate:ok"//openlink: "weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6"}//}console.warn(res)if (onBeforeJump) {onBeforeJump()}location.href = res.result.openlink   //"weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6"}

总结

前端需要的获取的数据

微信客户端跳转小程序需要的(直接写死在标签上面)	描述	例子
username	小程序原始账号 ID（gh_ 开头的）	“gh_d43f693ca31f”
path	要跳转到的页面路径	“/page/component/index”

wx.config()	描述	例子
appId	‘小程序 AppID’	‘wxe5f52902cf4de896’
timestamp	必填，填任意数字即可	0
nonceStr	必填，填任意非空字符串即可	‘nonceStr’
signature	必填，填任意非空字符串即可	‘signature’
jsApiList	必填，随意一个接口即可	[‘chooseImage’]

外部浏览器跳转小程序需要=>URL Scheme	描述	例子
result.openlink	调用location.href跳转方法实现跳转到微信小程序	“weixin://dl/business/?ticket=la0041f2cedf9630c9c7cc8c8715ac0c6”

云开发(可以忽略,我们自己本来有服务) 根据上面示例

https://developers.weixin.qq.com/community/business/doc/000e26815e8de0db1ecae5a035b00d 云开发快速入门

创建并部署云函数public
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BlMZiZpn-1621677958776)(image-20210416160646073.png)]

index.js 写下云函数代码

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()switch (event.action) {case 'getUrlScheme': {return getUrlScheme()}}return 'action not found'
}async function getUrlScheme() {return cloud.openapi.urlscheme.generate({jumpWxa: {path: '/page/component/index', // <!-- replace -->query: '',},// 如果想不过期则置为 false，并可以存到数据库isExpire: false,// 一分钟有效期expireTime: parseInt(Date.now() / 1000 + 60),})
}