发现问题：
- H5跳转小程序
- 需要携带参数，且参数中包含特殊字符等
- 可能在非微信浏览器或者非小程序中打开
解决思路
普通H5 --> 通过部署在小程序云开发服务器上的静态H5（免鉴权）做中转 --> 再跳转到小程序
具体步骤及操作
- 普通H5 window.location.href跳转即可，唯一需要注意点：携带特殊字符时使用encodeURIComponent编译处理
- 部署在小程序云开发服务器上的静态H5
操作这一步时，需要先完成如下操作 a. 对应的小程序开通云开发 b. 开通静态网站，绑定自定义域名 c. 了解小程序云开发云函数基础知识（照着小程序开发文档操作即可）
- 文档中没有的内容及关键点操作 我们需要传递的参数主要通过页面url带参的方式传递，所以要在部署的静态H5中做如下（实例参考）类似操作
/**
* @description: 获取页面url中的参数
* @params {*}
* @return {*}
*/
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);
}
/**
* @description: 获取页面传递的参数
* @params {*}
* @return {*}
*/
const productType = getQueryVariable('productType')
const paramUri = getQueryVariable('paramUri')
const id = getQueryVariable('id')
const hotelid = getQueryVariable('hotelid')
const hotelFlag = getQueryVariable('hotelFlag')
- 修改调用云函数时的方法,将获取到的参数再传递到云函数中去
async function openWeapp(onBeforeJump) {
var c = window.c
const res = await c.callFunction({
name: 'public',
data: {
action: 'getUrlScheme',
productType: productType,
paramUri: paramUri,
id:id,
hotelid:hotelid,
hotelFlag:hotelFlag
},
})
console.warn(res)
if (onBeforeJump) {
onBeforeJump()
}
location.href = res.result.openlink
}
- 再修改云函数中的相关,我这里的业务逻辑是根据参数跳转3种不同的页面，每种页面传不同的参数，如下，这里值得注意的是decodeURIComponent ，要记得解析之前加密的字符
async function getUrlScheme(event) {
console.log('event参数', event)
let paramUri = event.paramUri
let paramStr = decodeURIComponent(paramUri)
let param = JSON.parse(paramStr)
console.log('param参数', param)
let path = "",
query = "";
const rule = {
'0': () => {
path = `pageGoods/goods-detail/index`
query = `id=${event.id}`
},
'1': () => {
// path = 'pageGoods/goods-detail/index'
// query = decodeURIComponent(param)
path = `pageHotel/hotel-detail/index`
query = `hotelid=${event.hotelid}&hotelFlag=${event.hotelFlag}`
},
'2': () => {
if (param.ExternalProjectCode) {
// 国旅线路
path = '/pages/product-detail/product-detail'
query = `RouteId=${param.RouteId}&ProjectId=${param.ProjectId}&CompanyId=${param.CompanyId}&partnerId=${param.partnerId}&ExternalProjectCode=${param.ExternalProjectCode}`
} else {
path = '/pages/product-detail/product-detail'
query = `RouteId=${param.RouteId}&ProjectId=${param.ProjectId}&CompanyId=${param.CompanyId}&partnerId=${param.partnerId}`
}
},
}
rule[event.productType]()
console.log('跳转路径', path)
console.log('跳转参数', query)
console.log('调用')
return cloud.openapi.urlscheme.generate({
jumpWxa: {
path: path, // <!-- replace -->
query: query,
},
// 如果想不过期则置为 false，并可以存到数据库
isExpire: false,
// 一分钟有效期
expireTime: parseInt(Date.now() / 1000 + 60),
})
}
- 走到这一步，我们的H5在其他浏览器里应该已经能顺利跳转你所要跳转的小程序页面，但是注意：在微信中直接打开是，它是通过按钮点击跳转的，这里我们还需要对静态H5的按钮点击事件做下修改 示例中的跳转如下：
<!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
<wx-open-launch-weapp id="launch-btn" username="gh_f05781f17c55" path="pages/index/index">
<!-- replace -->
<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>
这里的问题是path是写死的，我们需要根据参数动态设置它，我是这样操作的
//在静态H5页面的最后补充一段js
let param = JSON.parse(decodeURIComponent(paramUri))
let path = ''
const rule = {
0: () => {
// 电商
path = `pageGoods/goods-detail/index?id=${id}`
},
1: () => {
// 酒店
path = `pageHotel/hotel-detail/index?hotelid=${hotelid}&hotelFlag=${hotelFlag}`
},
2: () => {
// 线路
if (param.ExternalProjectCode) {
// 跳转国旅线路
path = `pageCommon/product-detail/index?RouteId=${param.RouteId}&ProjectId=${param.ProjectId}&CompanyId=${param.CompanyId}&partnerId=${param.partnerId}&ExternalProjectCode=${param.ExternalProjectCode}`
} else {
path = `pages/product-detail/product-detail?RouteId=${param.RouteId}&ProjectId=${param.ProjectId}&CompanyId=${param.CompanyId}&partnerId=${param.partnerId}`
}
},
}
rule[productType] && rule[productType]()
document.getElementById('launch-btn').setAttribute('path', path)
