本文适合小白交流,大佬勿喷。把自己遇到的坑,小白解决方案贴出来交流。
坑1:微信跳转与H5跳转,跳转的路径不是一样的。
跟我一样粗心伙伴注意了
官方说明:网页会判断所在的环境来觉得采用哪种跳转方式,如检测到微信客户端内,则免鉴权使用开放标签跳转,如检测到在外部浏览器或 App,则使用 URL Scheme 跳转小程序。
- 区别在于在html代码里面的属于标签跳转,URL Scheme跳转是在云函数里面的。
主要问题是没看清文档及不熟悉云开发,以为前台代码的path就是所有跳转的url。html的path=xxx 仅指的是当在微信H5情况下跳转的路径(可带参数)
<wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID(gh_ 开头的)" path="要跳转到的页面路径"> <!-- 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>
如果想在其他浏览器(非微信H5上做跳转,跳转的路径及参数需要在云函数写)
async function getUrlScheme(options) {
return cloud.openapi.urlscheme.generate({
jumpWxa: {
path: '/page/component/index', // <!-- replace -->
query: 'i=aaabbb',
},
// 如果想不过期则置为 false,并可以存到数据库
isExpire: true,
// 一分钟有效期
expireTime: parseInt(Date.now() / 1000 + 60
其中path是路径,不能带参数(不太确定),简约如果有参数则写在query里面去,例如 query:‘openid=developers’
这样的话微信跳转的路径其实可以与H5跳转路径不一样都没问题,第一个坑解决了。
坑2:哪怕按照上面写了,还是微信能跳,H5不能跳,云函数一直无法上传。
我也查了社区很多贴,没有一个好的解决方案,这个坑主要问题是在基础没有打好的问题,我想部分人应该也是刚接触云开发不久,都是用到这个开发能力才去接触这个开发能力
解决方案:
官方在云函数的地方,告诉我们需要新建一个云函数名字为public,在这个目录下面创建一个js。但是因为这个要用到wx-server-sdk。
打开命令行,定位到public,安装一下所需要的环境,云函数中使用 wx-server-sdk 需在对应云函数目录下安装 wx-server-sdk 依赖(自己理解)
npm install --save wx-server-sdk[@latesty](/user/latesty)
这个安装上去的了,你的public目录下就会多一个node_modules目录,云端安装就不说了,这里我是直接全部上传的。
安装好后,上传代码后,基本上H5就可以跳转到浏览器了。(如果你的还行不行,检查一下权限,还有报错,可能还需要按照node_sdk)
【如果还是不行,可以回复本帖,尝试帮忙排查解决】
坑3:路径后自定义传参问题?参数是动态的问题。
因为自己对云函数认识不足,所以用了自己的解决方案。
我当时项目的需求是,动态传参,每个参数都是不一样,如果按官方的文档是固定路径的
我是获取当前h5的url参数,提取自己要的参数出来。然后拼接到 path里面去。拼接的方法有很多,当时为了速度快点就用了最白痴的方法。
需要注意,微信的跳转与h5跳转写法不一样。
//获取url的参数
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);
}
//如果你的url是 qq.com/i=88888 ,则getQueryVariable("i") 就是取i的值:88888
var i = getQueryVariable("i");
微信H5的自定义参数跳转
我把官方的这个代码
<wx-open-launch-weapp id="launch-btn" username="小程序原始账号 ID(gh_ 开头的)" path="要跳转到的页面路径"> <!-- replace -->
<template>
<button>打开小程序</button>
</template>
</wx-open-launch-weapp>
改成了(大佬别吐槽,当时为了实现功能)
<script type="text/javascript">
document.write("<wx-open-launch-weapp id='launch-btn' username='' path='pages/index/index?i="+i+"'>");
</script>
<template>
<button>打开小程序</button>
</template>
</wx-open-launch-weapp>
其他H5的自定义参数跳转
把代码拉到最下面去,他是通过这个来执行云函数的,然后拿到回传的信息的链接,最后直接js跳转到该链接。
async function openWeapp(onBeforeJump) {
var c = window.c
const res = await c.callFunction({
name: 'public',
data: {
action: 'getUrlScheme',
},
})
console.warn(res)
if (onBeforeJump) {
onBeforeJump()
}
location.href = res.result.openlink
所以我们可以把我们的值也传过去。我在data里面加了一个action1
async function openWeapp(onBeforeJump) {
var c = window.c
const res = await c.callFunction({
name: 'public',
data: {
action: 'getUrlScheme',
action1: 'i='+i,
},
})
// console.log(i,"8888")
console.warn(res)
if (onBeforeJump) {
onBeforeJump()
}
location.href = res.result.openlink
云函数那边我没有用原本那个方法,而是直接改了原本的。(可以按照自己思路来)
最终我的云函数代码就是
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
try {
const result = await cloud.openapi.urlscheme.generate({
"jumpWxa": {
"path": 'pages/index/index',
"query": event.action1
},
"isExpire": false,
"expireTime": parseInt(Date.now() / 1000 + 60)
})
return result
} catch (err) {
return err
}
}
最后可以实现根据自定义传参到url,h5、微信h5都能自动跳转到微信小程序。
以此文提示自己需努力补前端基础,细心阅开发文档。