微信小程序 h5页面跳转小程序(超详细讲解)

实战项目从无到完整的5跳转小程序经验,跳转方式分为云函数跳转和开放性标签跳转。

建议需要的同学先全部浏览一遍本文。内容较长较为啰嗦。

官网链接:

官方网站写的是比较好的,但是还不够详细和许多坑点,下面是实例代码:

实例代码链接:

纯5写的代码模块,可以改造成任意架构代码。下面讲一下怎么改成自己的项目里面以及坑点:

1、调试工具可以去掉:

2、替换:怎么找到我们需要的呢?替换位置都在哪呢?

1)登录微信公共平台

2)登录之后点击右上角头像的名字,基本设置里最下面,和原始都在这里。

3)替换位置

4)修改逻辑

这里把判断固定写死,就是想让网页一直走最后的逻辑,以后想用开放性标签,就把这里还原即可。代码块放下面了。

5)跳转函数改造

3、云函数的构建:

1)我这是构建好的:上文替换栏里面最后一张图说的云函数就是图中红色勾选框

没构建好的可以去:

按照图文一步一步走就行了,我这里就不写那么多了。

点击云函数,然后点击新构建函数:

云函数名称填写的时候要注意点,这个函数名111就是我们要用到的云函数名称!

2)调用的时候这里日志会显示你在云函数里面写的打印内容。

3)云函数权限,测试的时候建议修改为所有用户都可以访问!

4)创建的时候,并不是一定会创建云函数目录,这时候需要手动创建,首先在根目录下面创建一个你喜欢的文件名字,然后在..中添上你所创建的目录名字

右击这个目录的时候出现弹框这些选项,完毕后选择上传不上传_选项就行了。(这是直接发到线上,只要线上代码不调用没啥影响,放心用)

在此目录下会出现111文件夹,然后打开此文件夹,执行 ,在.中写上:

然后创建.文件,写入:

到此,云函数跳转,就结束了,有什么问题可以评论告诉我。

使用开性标签,把上面修改逻辑的代码还原。

然后就是几个问题:

一、域名的坑:

1、使用者必须是已认证的服-务-(服务可以置顶,订阅不能),服务绑定“接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。

2、使用者必须是已认证的非个人主体的小程序,使用小程序云的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

3、必须部署到正式服务器,测试公众不显示图标。

4、必须是在已认证的服务中做接口安全域名验证,“接口安全域名”和“白名单”都要,是指获取微信签名的服务器的。

注意:1、2两个条件必须满足其中一个;3、4两个条件必须满足,否则标签中的按钮不会显示(微信文档不讲武德,写的不清楚,稍微不注意就会掉坑)。

官方文档入口:

还有几点:

1、微信者工具,“”:[],是显示不了图标的。微信工具和真机测试结果可能不一样,一定要用真机测试。安卓和测试结果也可能不同,都要测试。

2、小程序的-不支持---。

3、:[‘’, ‘’](必须有,不然安卓不显示)

4、微信版本要求为:7.0.12及以上。 系统版本要求为: 10.3及以上、 5.0及以上

原文链接:

二:配置坑:签名一定要找服务端要,生成规则让服务端自己看。

:小程序测试的时候使用线上首页测试最佳~

© 版权声明
THE END
分享