H5跳转小程序分两种情况，一种是小程序内部打开的H5跳转小程序，一种是在外部的H5跳转到小程序
小程序内部打开的H5跳转小程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div onclick="buttonClick()">H5跳转小程序Button</div>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript">
var ua = window.navigator.userAgent.toLowerCase();
function buttonClick(){
if (ua.match(/MicroMessenger/i) == 'micromessenger'){//判断是否是微信环境
wx.miniProgram.getEnv(function(res){//判断是否是小程序环境
if (res.miniprogram){
wx.miniProgram.navigateTo({url: '/pages/index/index'})
}
}
}
}
</script>
</body>
</html>
外部H5跳转小程序
官方给出的方案：静态网站 H5 跳小程序
我是在已后的小程序上做这个功能，已此为例
微信开发者工具打开云开发
打开云开发.png
会出来一个云开发控制台，根据提示新建一个环境，建好一个环境会有如图右边有一个环境ID，需要配置在代码里面。
建好的环境.png
在 更多 里面选择静态网站，需要有权限的人扫码才能开通，一般是小程序的管理员。
开通静态网站.png
开通完成之后上传官方文档提供的HTML代码
按照官网所述，把以下代码中必须替换的地方（可以搜索 查看到所有需要替换的地方）替换成自己小程序的APPID，自己建立开发环境的ID等。然后上传到开发控制台 的 静态网站中。
HTML代码.png
已上传HTML代码.png
查看详情就可以获得URL链接
到目前为止，以上可以在微信内部跳转到小程序，但官网说这个方案即可以在微信内部浏览器的 H5 跳转小程序，也可以在微信外部浏览器或其他部分 App （如企业微信、QQ 等）跳转微信小程序。想要实现外部跳转，需要继续把文档中云函数 public写进去。
已有小程序目录中新建cloudfunctions文件，右键选择新建Node.js云函数，文件夹下就会出现命名为public的文件夹且里面有三个文件。
并在project.config.json文件里面写入"cloudfunctionRoot": "cloudfunctions",
public文件夹.png
image.png
可以把从官网下载下来的public文件夹中的三个文件拷贝到自己新建的public文件夹下，并同上修改需要修改的地方。此时index.js文件需要引入wx-server-sdk依赖，所以需要npm install一下
npm install --save wx-server-sdk@latest.png
然后把public文件夹部署到云端。
部署.png
部署完成.png
在云开发控制台中的设置 -> 权限设置中，将对应开通了静态网站的云环境开启未登录模式访问。
在云开发控制台中的云函数 -> 权限设置中，配置安全规则，选择 “允许所有用户访问” 的模板并确认。如果需要更安全的控制，即只让 public 函数开启未登录访问，可参见官网底部安全规则模板。
安全规则.png
同一个小程序生成多个外部H5跳转小程序链接
如果需要同一个小程序生成多个页面的链接，可以上传多个HTML文件，在openWeapp方法中加一个path，public云函数中的index.js动态接收页面路径。
详情可参考h5打开微信小程序指定页面-云函数处理
例如我需要两个页面的路径。
两个HTML上传.png
HTML.png
云函数.png
网友评论