微信H5 跳转小程序（html版本）

本人非前端，所以H5页面是使用原生的html+layui来写的，记录了一下微信H5跳小程序踩的坑以及官方文档里面没有明确容易误导的地方。
附官方文档地址：微信官方H5跳转小程序

1.页面不显示跳转按钮

如果是html写的页面需要注意官方的用例里面使用的是 script 标签，将这个标签改为 template 标签（基本不显示标签都是这个原因造成的）

官方示例

<wx-open-launch-weappid="launch-btn"username="gh_xxxxxxxx"path="pages/home/index?user=123&action=abc"
><script type="text/wxtag-template"><style>.btn { padding: 12px }</style><button class="btn">打开小程序</button></script>
</wx-open-launch-weapp>

本人的项目

<wx-open-launch-weapp id="launch-btn" username="{$xcx_gh}" path="pages/home/dashboard/index" style="position: fixed;bottom: 3%;width: 100%;font-size: 15px;color: #1e9fff;"><template><div class="btn" style="text-align: center">进入商城</div></template>
</wx-open-launch-weapp>

标签里面或者js里面的参数是否有问题
username —— 小程序的原始ID
path —— 小程序的页面路径
config里面的参数是否有问题，尤其是签名。签名的算法官方有文档签名算法其中url参数就是你的h5页面地址

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [], // 必填，需要使用的JS接口列表，如果不知道需要哪些接口可以随便填写一个，比如 openLocationopenTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']
});

2.其他需要注意的问题

H5页面所挂载的公众号需要配置业务域名和IP白名单
小程序要是已经发布的小程序
公众号类型应为服务号
跳转按钮的样式属性，尽量写在父标签。即我自己的示例

附前端代码

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<wx-open-launch-weapp id="launch-btn" username="{$xcx_gh}" path="pages/home/dashboard/index" style="position: fixed;bottom: 3%;width: 100%;font-size: 15px;color: #1e9fff;"><template><div class="btn" style="text-align: center">进入商城</div></template>
</wx-open-launch-weapp>

$.post('/api/recharge/getWechatSDK',{}, function (res) {if (res.code === 200) {wx.config({debug: false,appId: res.data.appId,timestamp: res.data.timestamp,nonceStr: res.data.nonceStr,signature: res.data.signature,jsApiList: ['openLocation' , ' onMenuShareTimeline' , 'onMenuShareAppMessage'],openTagList: ['wx-open-launch-weapp']//这里直接添加，什么都不用管});}}, 'json');//wx.ready(function (){var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) {console.log('success');});btn.addEventListener('error', function (e) {console.log('fail', e.detail);});//});

微信H5 跳转小程序（html版本）相关推荐

【IOS invalid signature】记录一次微信H5跳转小程序的坑
今天开发微信H5页面跳转小程序,安卓和开发者工具都没问题,IOS第一次进入会报错验签失败,我的是vue项目. 实测添加一行代码解决,只传原始地址,不能传完整url,看其他人什么刷新,什么判断都无效 l ...
H5跳转小程序(微信开放标签使用)
今天七月,微信终于提供了H5跳转小程序的功能:果然方便了许多:限制条件也比较宽松吧. 限制条件: 微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及 ...
微信浏览器跳转小程序php,微信浏览器里面h5跳转小程序
微信浏览器里面h5跳转小程序注意事项,以vue框架为例一.获取jssdk配置,在wx.ready回调函数里面展示按钮wx.config({ debug: false, appId: data.ap ...
V2微信内外网页H5跳转小程序链接生成系统开发
V2微信内外网页H5跳转小程序链接生成系统开发网页支持H5.服务号.封装app 功能// banner.首页.标题:创建您的链接.功能区.创建链接.选择类型.8种类型.小程序.一个人小程序.公众号. ...
h5跳转小程序、短信跳转小程序＜wx-open-launch-weapp＞干货满满
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档前言由于微信官方限制了URL Scheme跳转,本文实现的是html跳转微信小程序,仅限微信内部调转.如果需要外部跳转微信小程序,可 ...
vue 实现H5跳转小程序
vue实现H5跳转小程序公司需求实现h5跳转小程序,看了很多文档发现对于小白不太容易理解,记录下,以备查阅. 适用环境微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上. ...
使用小程序·云开发静态托管实现免鉴权h5跳转小程序
背景微信虽然推出了微信开放标签可以实现h5跳转小程序. 但是,开发者在使用之前要在公众号设置JS接口安全域名,不仅限制个数还限制修改次数,而且在使用之前还得获取access_token.ticket ...
H5跳转小程序，小程序跳转小程序
一.H5跳转小程序 wx-open-launch-weapp官网文档 jsapi_ticket 生成官方文档 jsapi_ticket加密时官方说url不加#及后面部分,但尝试后会debug报错,加 ...
H5跳转小程序 (成功案例)
H5跳转小程序 (踩坑记-成功案例) 自我的一段独白找到这篇文章之前我相信你也踩了不少坑,遇到了不少bug,请认真阅读步骤,带你走出雾霾:项目的需求是H5跳转微信小程序,H5项目是原生的html方法 ...
微信公众号H5跳转小程序，wx-open-launch-weapp
直接上干货,不多哔哔~~ 注意事项 : 需要再公众号里面绑定需要跳转的小程序获取jssdk配置的时候需要再公众平台绑定安全域名微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3 ...

微信H5 跳转小程序（html版本）

微信H5 跳转小程序（html版本）

1.页面不显示跳转按钮

2.其他需要注意的问题

附前端代码

微信H5 跳转小程序（html版本）相关推荐

最新文章

热门文章

微信H5 跳转小程序 （html版本）

微信H5 跳转小程序 （html版本）

1.页面不显示跳转按钮

2.其他需要注意的问题

附前端代码

微信H5 跳转小程序 （html版本）相关推荐

最新文章

热门文章

微信H5 跳转小程序（html版本）

微信H5 跳转小程序（html版本）

微信H5 跳转小程序（html版本）相关推荐