h5打开小程序的方法总结

两种方法，一种是通过Url Scheme进行跳转，另一种是通过wx-open-launch-weapp标签进行跳转

Url Scheme: 需要生成scheme码，weixin://dl/business/?t=加scheme码生成一个链接，跳转进入小程序，参数在生成scheme码时就要固定，适合在短信、邮件、微信外网页跳转小程序并传固定参数的情况下使用
wx-open-launch-weapp: 需要对接微信的jssdk，获取wx-open-launch-weapp标签权限后才可以使用，可以在生成标签前更改参数，适合在项目中跳转小程序使用

以下是使用方法

`Url Scheme`方法

官方文档

生成小程序的scheme链接，通过scheme链接跳转小程序

优点：该方法可以实现短信、邮件、微信外网页跳转小程序（短信打开h5链接，通过h5作为中介，跳转到小程序）

缺点：
该方法每一个scheme码只能对应固定的传参
单个小程序每日生成 Scheme 上限为50万个，有效时间超过31天的 Scheme 或永久有效的 Scheme 为长期有效Scheme，单个小程序总共可生成长期有效 Scheme 上限为10万个，有效时间不超过31天的 Scheme 为短期有效Scheme，单个小程序生成短期有效 Scheme 不设上限

打开微信公众平台，登录后在右上角找到生成 Url Scheme，输入相应的路径和参数就可以了
在h5中跳转weixin://dl/business/?t=你的scheme码就可以了

因为浏览器支持的原因，部分浏览器不支打开后自动跳转，可以做一个点击跳转的按钮供用户手动跳转

例：

<body><div class="box">正在跳转...<a href="weixin://dl/business/?t=你的scheme码" class="button">点击手动跳转</div></div><script>function toWx() {location.href = 'weixin://dl/business/?t=你的scheme码'}window.onload = function () {toWx()}</script>
</body>

`wx-open-launch-weapp`方法

官方文档

首先需要绑定JS接口安全域名

【公众号设置】->【功能设置】->【JS接口安全域名】-> 输入要配置的域名 -> 将文件给后端放到服务器上

接jssdk，调用wx.config获取权限，注意要写openTagList: ["wx-open-launch-weapp"]来获取标签

wx.config 例：

wx.config({debug: false,appId: xxxxxx,timestamp: xxxxxx,nonceStr: xxxxxx,signature: xxxxxx,jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode","chooseImage","previewImage",],openTagList: ["wx-open-launch-weapp"],
});

详细的wx.config方法可参考之前的博文（之前的博文里没有写获取wx-open-launch-weapp，需要在项目中自己加上）

写DOM（例子使用的是VUE框架，原生或其他框架大同小异）

<wx-open-launch-weappid="launch-btn2"username="gh_小程序原始id"path="pages/index"
><script type="text/wxtag-template"><div style="width: 100%; height: 100%;">打开小程序</div></script>
</wx-open-launch-weapp>

wx-open-launch-weapp中的节点会在页面加载完成后过一会才会显示，并且script标签生成的节点不会应用页面中css的样式，所以需要在节点中写样式或者写成下边这种方式

...
<script type="text/wxtag-template"><style>.btn { padding: 12px }</style><button class="btn">打开小程序</button>
</script>
...

初次配置容易出现的问题：
可以为wx-open-launch-weapp标签添加样式形成更好的页面效果
点击事件是声称在script标签所生成的节点上的，注意不要只修改wx-open-launch-weapp标签的样式导致用户点击不到节点
只有在微信环境下才会展示改标签所产生的节点
wx.config不要重复调用导致wx-open-launch-weapp失效(一般不会犯这种错误吧)
系统错误，错误码：40048 :配好安全域名！！！！！！

h5打开小程序的方法总结相关推荐

微信内H5打开小程序
前置条件:已认证的服务号,订阅号不行引入js: <script type="text/javascript" src="https://res.wx.qq.c ...
你能用微信小程序打开小程序了【附开发方法】
6月21日晚间,微信小程序再次迎来升级:小程序可以打开小程序了,同一个公众号下关联的10个同主体小程序和3个非同主体小程序之间,可以调用接口直接相互跳转.微信客户端6.5.9及以上版本支持.另外门店小 ...
android用微信打开链接地址,外链h5浏览器跳转微信打开小程序跳转任意网站地址方法...
通过weixin://来打开微信客户端: 打开微信微信内打开网页协会说明: 如果要打开小程序或者公众号文章链接呢,就得找新接口了,这边笔者分析几个跳转入口, 微信跳转入口: 通过反编译,看到wei ...
uni-app项目中H5跨域小程序不跨域怎么解决方法（兼容H5、小程序）
解决这个问题的时候还是用到了之前的文章中提到的"条件编译",当然这只是其中一部分, 下面我们来看一下这种问题的解决方法, ①H5端配置首先在项目中找到一个名为"mani ...
微信网页开发：微信内h5使用wx-open-launch-weapp打开小程序，微信内h5使用wx-open-launch-app打开App的方案
需求场景: 当我们需要使用在微信客户端打开的h5页面,在页面上打开微信小程序或者唤起App时,我们需要使用微信js-sdk提供的开放标签能力.这其中:使用wx-open-launch-weapp标签打 ...
Android开发之APP唤醒小程序,打开小程序,调起小程序以及传参数的实现方法(附加源码)
老套路咱们先看效果图: 可以先看下官方文档介绍:微信官方文档APP打开小程序链接我这边打开了,上面奔溃是因为模拟器不兼容的原因: 主要讲解下打开小程序核心代码: // 填应用AppIdString ...
如何使用计算机微信看小程序,新版微信pc版怎么打开小程序 pc版打开小程序方法...
央视影音手机版6.7.3 安卓版类型:影音播放大小:53.8M语言:中文评分:9.8 标签: 立即下载以前的电脑版微信是不支持小程序的,不能够搜到也不能够打开好友分享的小程序,不过在新版微信更新 ...
微信小程序web-view环境下H5跳转小程序页面方法
web-view页面内的H5页面跳转至小程序页面一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰 ...
URL Scheme-短信、邮件、微信外网页等场景打开小程序
URL Scheme--适用于从短信.邮件.微信外网页等场景打开小程序. 通过 URL Scheme 打开小程序的场景值为 1065. 生成的 URL Scheme 如下所示: weixin://dl ...
把个人网站封装生成百度小程序的方法分享
现在百度大力发展移动端,所以百度智能小程序有一定的流量优势,还可以进入信息流和贴吧推广,同时还能获得网站快速收录权限,昨天已封装成功,今天跟大家分享把个人网站封装生成百度小程序的方法. 一.生成小程序 ...

h5打开小程序的方法总结

`Url Scheme`方法

`wx-open-launch-weapp`方法

h5打开小程序的方法总结相关推荐

最新文章

热门文章

h5打开小程序的方法 总结

Url Scheme方法

wx-open-launch-weapp方法

h5打开小程序的方法 总结相关推荐

最新文章

热门文章

h5打开小程序的方法总结

`Url Scheme`方法

`wx-open-launch-weapp`方法

h5打开小程序的方法总结相关推荐