h5跳转小程序
实际项目经历从无到有完成h5跳转小程序，跳转方式分为云函数跳转和开放标签跳转。
开放标签是在微信的浏览器中使用的，而云函数跳转既可以在外部使用，也可以在微信内部使用。
建议有需要的同学先看完整篇文章，内容比较长，比较啰嗦。
1. 没有开放标签（wx-open--）
官网链接：
官方网站比较好，但不够详细，漏洞也比较多，下面是示例代码：
示例代码链接：
打开小程序示例...
点击下方按钮打开小程序示例
打开小程序
请在手机上打开网页链接
纯es5编写的代码模块可以改造成任意架构的代码，下面介绍如何改造到自己的项目中以及改造的陷阱：
1.可以删除调试工具：
。在里面（）;
2. 替换：如何找到我们需要的ID？替换位置在哪里？
1）登录微信公众平台
2）登录后，点击右上角头像名称，在最下面基本设置里，原始ID在这里。
3）更换地点
// 这个是针对开放标签的，第一种方法暂时不用
wx.({
:true, // 可以在调试期间启用
:'替换位置',
: 0, //必填项，可填写任意数字
:'', //必填，填写任意非空字符串
:'', //必填，填写任意非空字符串
: [''], // 上必须有一个，你可以输入一个随机值
:['wx-open--'], // 填写小程序的打开标签名
}）
打开小程序
别的{
= .('-网-')
..（''）
..添加（'完整'，'-web-'）
varc =.({
// 必选，表示非登录模式
：真的，
// 资源端
:'更换职位',
// 资源端环境ID
:'云函数id', //这个下面会讲到
}）
初始化()
4）修改逻辑
这里的判断固定了，只是为了让网页一直按照最后一个 else 的逻辑走，如果以后要用 open 标签的话，在这里恢复就行了，代码块如下。
（（）{
= ..()
= ua.(//i) ==''
= !&& ua.(//i) ==''
=
=
如果（..（/（|pad|pod||iPod|ios|iPad|||）/i））{
=真
}别的{
=真
.warn（'ua'，ua）
.警告（ua。（//i）==''）
varm = ua.（//i）
.警告（m && m[0] === ''）
如果（） {
= .('-网-')
..（''）
..添加（'完整'，'-web-'）
5）跳跃函数变换
页（）{
varc = .c
res = c.（{
name: '', //这是创建云函数的云函数名称，下面文章有讲解
数据： {
:'', //这是云函数里的函数名
}，
}）
.警告（res）
如果（） {
（）
.href = res..
3.云功能的构建：
1）我建的这个：上面替换栏最后一张图提到的云函数ID就是图中红色的复选框。
如果搭建的不好可以去：
只要按照图片和文字一步一步来就可以了，这里就不写太多了。
单击 ，然后单击 New ：
填写云函数名称的时候请注意，这个函数名称就是我们要使用的云函数的名称！
2）调用的时候，这里的日志就会显示出你在云函数里写入的打印内容。
3）云功能权限：测试的时候建议改为允许所有用户访问！
4）创建云函数时，云函数目录不一定要创建，需要手动创建，先在根目录下创建一个自己喜欢的名字的文件，然后将自己创建的目录名添加到..json 中。
添加以下内容：
"":"e/",
“”：”/”
右键这个目录会弹出这些选项，开发完成后选择是否上传就可以了。（这个是直接发到网上的，只要不调用网上的代码，就不会有什么影响，放心用吧。）
在根目录下创建新目录
该目录下会出现一个文件夹，打开文件夹，执行npm init，在.json中写入：
“姓名”：””，
"":"1.0.0",
":"",
“主要”：.js，
"：{
“测试”：“echo \”：无测试\“&&退出1”
}，
":"",
"":"ISC",
"：{
“wx--sdk”：“~2.3.2”
然后创建一个.js文件并写入：
// 云函数入口文件
= ('wx--sdk')
让页面=；
。在里面（）;
// 云函数入口函数
.主要 = (, ) => {
= .();
。日志（' - - - - - - - -'）
。日志（）
= {}
如果（. && ..页面 && ..页面 ==''）{
页面=真；
id = ..id;
}别的{
頁面 =;
（.）{
case'': {//自定义函数名
（页，）
‘未找到相应函数’
(flag,) {// 自定义函数
。日志（' - - - - - - '）
.log（标志）
。日志（）
= || {};
...（{
：{
path:'',//跳转路径，必须是在线页面路径，否则会报错
: `id=${.id}`, // 注意参数格式，可以不传参数
}，
// 如果不想让它过期，请将其设置为并保存到数据库
：，
// 有效期一分钟
：（Date.now() / 1000 + 60），
}）
本次云函数跳转就到此结束了，如果还有什么疑问，欢迎留言告诉我。
2. 使用开放标签
使用打开标签来恢复修改上述逻辑的代码。
那么有几个问题：
1. 域名陷阱：
1、开发用户必须是认证服务号（服务号可以置顶，订阅号不可以），绑定“JS接口安全域名”的服务号下的网页可以通过该标签跳转至任意合法合规的小程序。
2、开发者须为经过认证的非个人小程序主体，并使用小程序云开发绑定域名下的静态网站托管网页，通过此标签可以跳转至任意合法合规的小程序。
3.必须部署到正式服务器，测试公众号不显示图标。
4、JS接口安全域名验证必须在认证服务号里进行，“JS接口安全域名”和“IP白名单”都是必须的，其中IP指的是获取微信签名的服务器IP。
注意：1、2两个条件必须满足其中一个；3、4两个条件必须满足，否则标签内的按钮不会显示出来（微信文档不公平，写的不清楚，一不小心就会掉入陷阱）。
官方文档条目：#21
还有几点：
1、微信开发者工具 "":[] 无法显示图标，微信开发者工具和真机测试结果可能不一样，必须用真机测试，安卓和 iOS 测试结果也可能不一样，所以两个都要测试。
2、小程序的web-view不支持wx-open--。
3. :['', '']（必须存在，否则不会显示）
4、微信版本要求：7.0.12及以上。系统版本要求：iOS 10.3及以上，5.0及以上。
2、配置陷阱：必须向服务器请求签名，并且生成的规则也必须由服务器自己查看。
// 这个是针对开放标签的，第一种方法暂时不用
wx.({
:true, // 可以在调试期间启用
:'替换位置',
: 0, //必填项，可填写任意数字
:'', //必填，填写任意非空字符串
:'', //必填，由服务器生成，不能任意
: [''], // 上需要一个。
:['wx-open--'], // 填写小程序的打开标签名
}）
ps：测试小程序最好使用在线首页测试~
总结
这篇关于如何从h5页面跳转到微信小程序的文章就到此结束了。