web-view是承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。写法如下：
注：当在微信开发中工具里返回“{"base_resp":{"ret":-1}}”时，需要点左上角“设置”--“项目设置”--勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”
因为外部h5无法跳转到小程序，因此需要把h5内嵌到小程序的web-view中。
一：首页小程序内嵌h5网页,内嵌这一步就相当于上面的小程序跳转h5：
二：然后在内嵌的网页里引入js，调用wx.miniProgram.navigateTo跳转小程序方法，可在url后拼接要传的参数：
三：小程序接受参数的页面：
index.wxml:
index.js
这样就从h5跳到小程序指定的页面并且可以拿到我们想要传的参数
原文作者技术博客： https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流
js监听navigator.userAgent，代码如下：
var user = navigator.userAgentif (user.match(/(iphone os)/i)) {
console.log("isphone")
}else if(user.match(/ipad/i)){
console.log("isipad")
}else if(user.match(/(midp|ucweb|android|windows ce|windows mobile)/i){
console.log("android")
}
一、app或小程序打开h51、webview实现
你可以把webview理解成一个无界面的浏览器。
ios端已经淘汰掉了UIWebView，现在要使用WKWebView容器，android一般使用系统自带的webview即可，小程序就是用自己的webview内核。
关于h5中如何判断所处的平台环境可以参考另一篇文章：传送门
代码示例（小程序）：
<web-view
src="{{url}}"
bindmessage="getMessage"
></web-view>
二、app打开小程序
1、微信开放平台sdk实现
需要已认证的微信开放平台账号
app需要接入微信开放平台OpenSDK
可跳转至任意小程序
跳转自家的小程序不受限制
跳转其他家的小程序之前需要先将app和小程序关联，最多关联3个小程序
具体细则参考官方文档：传送门
三、小程序打开app
1、app打开小程序后再跳回
小程序不能随便打开app，只能是跳回原app，也就是app是发起者。
主要是两种场景：一是app分享微信卡片，点击微信卡片打开小程序；二是app直接打开小程序。这两种场景下小程序可以打开原app。
只能手动点击页面标签按钮跳转
具体细则参考官方文档：传送门
代码示例：
<button
open-type="launchApp"
app-parameter="myParameters"
binderror="onLaunchAppError"
>打开APP</button>
四、微信内h5打开小程序
1、微信开放标签实现
需要已认证的微信公众平台账号
需要在公众平台后台绑定h5安全域名
h5需要引入微信js-sdk，配置wx.config，使用标签wx-open-launch-weapp
只能手动点击页面标签按钮跳转
可跳转至任意小程序
具体细则参考官方文档：传送门
代码示例：
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="pages/home/index?user=123&action=abc"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序</button>
</template>
</wx-open-launch-weapp>
2、小程序码实现
需要已认证的微信公众平台账号（小程序）
需要后端对接小程序官方api生成小程序码
前端展示小程序码，引导用户长按识别
小程序码可携带参数（scene）有长度限制，最大32个字符长度
只能跳转自家的小程序
具体细则参考官方文档：传送门
五、普通环境h5打开小程序
这里的普通环境是指除微信外的普通浏览器或其他app内的webview环境。
短信唤起小程序本质上也是普通h5唤起来实现。
1、小程序url schema实现
url schema是一种页面内跳转协议，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面。
这也是最近一年小程序官方才推出的方式，使用方便，强烈建议。
具体细则参考官方文档：传送门
2、云开发静态托管h5实现
具体细则参考官方文档：传送门
3、小程序码实现
需要已认证的微信公众平台账号（小程序）
需要后端对接小程序官方api生成小程序码
前端展示小程序码海报，引导用户保存或下载海报后再通过微信扫一扫识别
小程序码可携带参数（scene）有长度限制，最大32个字符长度
只能跳转自家的小程序
具体细则参考官方文档：传送门
六、微信内h5打开app
微信环境里默认屏蔽了url schema等方式打开app的能力，除非你是白名单app，例如腾讯系的知乎、bilibili等，一般app只能另寻出路。
1、微信开放标签实现
需要已认证的微信公众平台账号和微信开放平台账号
需要在公众平台后台绑定h5安全域名
需要在开放平台后台登记h5域名和app的绑定关系
h5需要引入微信js-sdk，配置wx.config，使用标签wx-open-launch-app
只能手动点击页面标签按钮跳转
只能跳转h5域名绑定的app
可以实现跳转指定页面和携带参数
具体细则参考官方文档：传送门
代码示例：
<wx-open-launch-app
id="launch-btn"
appid="your-appid"
extinfo="your-extinfo"
>
<template>
<style>.btn { padding: 12px }</style>
<button class="btn">打开App</button>
</template>
</wx-open-launch-app>
2、应用宝微下载实现
应用宝微下载链接页面会自动判断运行平台，判断是安卓就跳转该app应用宝详情页，判断是ios就跳转该app苹果应用商店详情页，已安装app就会弹窗提示打开。
需要已认证的腾讯开放平台账号
app需要接入应用宝平台并上架
需要在开放平台后台配置应用宝微下载，生成一个网页链接
h5只需要跳转该网页链接即可
可跳转至任意app
如需获得跳转app指定页面的能力，需要额外申请，根据应用资质进行审批
具体细则参考官方文档：传送门
代码示例：
<a
href="https://a.app.qq.com/o/simple.jsp?pkgname=com.test.testapp"
>打开App</a>
3、右上角提示用浏览器打开
微信环境页面内引导用户点击右上角省略号用浏览器打开页面，然后通过普通浏览器h5打开app的方式（见下面）实现
很多微信内h5页面的技术限制都可以通过这一交互方式来处理。
判断微信环境的代码示例：
const ua = window.navigator.userAgent.toLowerCase()
const isWechat = (() =>{
return /MicroMessenger/i.test(ua)
})()
七、普通环境h5打开app
这里的普通环境是指除微信外的普通浏览器或其他app内的webview环境。
1、url schema实现
url schema是一种页面内跳转协议，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面。
安卓和ios平台都支持
需要浏览器或webview环境支持url schema协议向外跳转
要跳转的app端需要配置一个url schema地址，提供给h5
h5页面只需要以跳转普通网页的方式跳转该url schema地址即可
可以实现跳转指定页面和携带参数
如果用户未安装要跳转的a
