h5跳转微信小程序方案及注意事项（vue方向）

h5跳转微信小程序方案步骤

1、准备
2、绑定域名（在[微信公众平台](https://mp.weixin.qq.com/)设置）
3、IP白名单（在[微信公众平台](https://mp.weixin.qq.com/)设置）
4、将小程序和H5公众号进行关联（在[微信公众平台](https://mp.weixin.qq.com/)设置）
5、引入JS文件
6、通过config接口注入权限验证配置并申请所需开放标签
7、传参（VUE、小程序页面）
8、全部代码
9、注意事项 ( 按钮不显示、点击按钮没反应，请对照以下事项逐一排查 )

1、准备

在正式开发工作之前，请优先熟读并查看微信开发文档。

2、绑定域名（在微信公众平台设置）

需提前登录微信公众平台进入“公众号设置”的“功能设置”的“JS接口安全域名”、“业务域名”、“网页授权域名”内依次配置h5页面的相关域名地址（例如：www.baidu.com）这里不包含协议名称和端口，同时可在根目录上传MP_verify_cZv0a41uGOH2UNym.txt文件，如图：

3、IP白名单（在微信公众平台设置）

如图：

4、将小程序和H5公众号进行关联（在微信公众平台设置）

不会的可以参考教程：https://jingyan.baidu.com/article/7908e85c70685bee481ad2b1.html

5、引入JS文件

在需要调用JS接口的页面（index.html）引入如下JS文件：
http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）如图：

6、通过config接口注入权限验证配置并申请所需开放标签

与使用JS-SDK配置方式相同，所有需要使用开放标签的页面必须先注入配置信息，并通过openTagList字段申请所需要的开放标签，否则将无法使用（同一个url仅需调用一次）。开放标签的申请和JS接口的申请相互独立，因此是可以同时申请的。

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

记得在main.js页面添加相关配置

Vue.config.ignoredElements = ['wx-open-launch-weapp']

7、传参（VUE、小程序页面）

如图：

8、全部代码

<template><div class="app"><p class="test-text" v-if="isWxBtn">点击打开微信小程序</p><wx-open-launch-weappid="launch-btn":username="wx_username":path="wx_path"v-if="isWxBtn"><script type="text/wxtag-template"><style>.test-btn {position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;display: block;width: 80%;font-size: 18px;color: #2973ba !important;height: 48px;line-height: 48px;background-color: #fff;border-top: 1px solid #ddd;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;text-align: center;}</style><div class="test-btn">确定</div></script></wx-open-launch-weapp></div>
</template>
<script>
export default {data() {return {form: {username:'',password:''},isWxBtn:false,wx_username: 'gh_xxxxxxxxxxxx', // gh_ 开头的原始小程序IDwx_path: 'pages/index/index.html', // 一定要以 .html 结尾token: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',}},created() {},methods:{getShopWxConfig() {let that = this;let url = window.location.href.split('#')[0];api.getWxConfig(url).then(res => {wx.config({debug: true, // 验证结果弹窗控制（成功或者失败）appId: res.data.appId, // 公众号唯一appidnonceStr: res.data.noncestr,timestamp: res.data.timestamp,signature: res.data.signature,jsApiList: [''], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'],});wx.ready(function () {that.isWxBtn = true;console.log('111111'，success);});wx.error(function (err) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。console.log('000000', error);});});},},mounted() {this.wx_path = this.wx_path + "?token=" + this.token;this.getShopWxConfig();}
</script><style lang="scss" scoped>
.app{background: url(../../assets/images/img.jpg) no-repeat center center;position: fixed;background-size:cover;top: 0;left: 0;width: 100%;height: 100%;.test-text {position: fixed;margin: auto;left: 0;right: 0;top: -108px;bottom: 0;text-align: center;width: 80%;height: 60px;line-height: 60px;font-size: 18px;color: #2b2b2b;z-index: 99999;background: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;}#launch-btn {position: fixed;left: 0;top: 0;width: 100%;height: 100vh;line-height: 100vh;text-align: center;background: rgba(0, 0, 0, 0.5);display: block;}
}
</style>

9、注意事项 ( 按钮不显示、点击按钮没反应，请对照以下事项逐一排查 )

username为小程序原始ID。
path为跳转至小程序的路径，一定要加后缀.html。还能携带参数，在微信小程序中通过 onLoad的 options接收。(代码如下)
<wx-open-launch-weapp>中必须用<template>标签包裹。
config配置中一定要加入openTagList: ['wx-open-launch-weapp']。
微信版本要求为：7.0.12及以上。系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
引入js至少是1.6以上版本。
若按钮不显示，多半是wx.config配置不正确。

h5跳转微信小程序方案及注意事项（vue方向）相关推荐

【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法
0 说明业务提出需求,要实现H5跳转微信小程序的需求,在浏览器.微信环境下,都能通过H5跳转进入小程序. 另外,本文也将微信小程序跳转到H5,以及微信小程序跳转到微信小程序的方法进行汇总. 对于,微 ...
微信html5程序,H5跳转微信小程序
如题,最近有项目需要H5跳转到微信小程序,之前的认知中,跳转到微信小程序只有通过公众号.小程序.扫码这几种方式.终于H5支持跳转小程序了,废话不多说直接贴代码 1.需要微信公众号,并且是已经认证过的服 ...
【微信】h5跳转微信小程序
h5静态页面跳转微信小程序注意:只有发布过的小程序可以使用这个方案,不然无法获取 url schema 如果无法获取 url schema ,请检查小程序是否已发布 1 理论方 ...
H5跳转微信小程序-成功案例（VUE）（踩坑无数）
这里写自定义目录标题准备工作根据官方提供的资料需准备以下几点: 1.已认证的服务号 2.绑定JS接口安全域名 (在微信公众平台设置) 3.IP白名单 (在微信公众平台设置) 4.将小程序和H5公众 ...
H5跳转微信小程序教程
H5设计简单,功能齐全,使用范围较为普遍,深受推广者的欢迎.H5跳转到微信小程序.微信公众号.长摁添加微信好友等场景,是很多推广者热衷使用的功能. 如何实现H5中点击跳转到微信小程序呢?使用跳转链接即 ...
vue项目H5 跳转微信小程序
1. 绑定域名登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 2. 引入JS文件在需要调用JS接口的页面引 ...
微信公众号网页H5跳转微信小程序
https://www.jianshu.com/p/5bc4589dd034 wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要 ...
h5跳转微信小程序 wx-open-launch-weapp
文章目录概述使用步骤 1. 绑定域名 2. 引入JS文件 3. 通过config接口注入权限验证配置并申请所需开放标签 4. 通过ready接口处理成功验证 5. 通过error接口处理失败验证 ...
h5跳转微信小程序，短信外链外部跳转微信打开任意第三方网址url，抖音跳转微信添加好友直接方法？
weixin://dl/business/?t= *TICKET* iOS系统支持识别URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序. Android系统不支持直接识别URL ...

h5跳转微信小程序方案及注意事项（vue方向）

h5跳转微信小程序方案步骤

1、准备

2、绑定域名（在微信公众平台设置）

3、IP白名单（在微信公众平台设置）

4、将小程序和H5公众号进行关联（在微信公众平台设置）

5、引入JS文件

6、通过config接口注入权限验证配置并申请所需开放标签

7、传参（VUE、小程序页面）

8、全部代码

9、注意事项 ( 按钮不显示、点击按钮没反应，请对照以下事项逐一排查 )

h5跳转微信小程序方案及注意事项（vue方向）相关推荐

最新文章

热门文章

h5跳转微信小程序方案及注意事项（vue方向）

h5跳转微信小程序方案步骤

1、准备

2、绑定域名 （在微信公众平台设置）

3、IP白名单（在微信公众平台设置）

4、将小程序和H5公众号进行关联 （在微信公众平台设置）

5、引入JS文件

6、通过config接口注入权限验证配置并申请所需开放标签

7、传参（VUE、小程序页面）

8、全部代码

9、注意事项 ( 按钮不显示、点击按钮没反应，请对照以下事项逐一排查 )

h5跳转微信小程序方案及注意事项（vue方向）相关推荐

最新文章

热门文章

2、绑定域名（在微信公众平台设置）

4、将小程序和H5公众号进行关联（在微信公众平台设置）