微信公众号h5页面跳转小程序-成功案例

微信公众号h5页面跳转小程序-成功案例，标题已经明确说明，h5页面可以正常跳转微信小程序

官网说可以，不是我说的

文章目录

微信公众号h5页面跳转小程序-成功案例
前言
一、代码实现
二、问题分析
- 1.js接口域名配置
- 2.vue结构中的template
- 3.vue结构中的template
- 4.标签的属性配置
- 5.配置中的弹框提示
三、后端配置
总结

前言

在实现h5页面跳转小程序的过程中需要注意几个关键的问题。接下来，先上代码。再一一分析。

一、代码实现

<template><div class="webView">  //注意：此处所需跳转的小程序原始id，即小程序对应的以gh_开头的id<wx-open-launch-weapp id="launch-btn" username="gh_xxx"><script type="text/wxtag-template"><button class="btn" style="display:block;width:200px;height:100px;background-color:pink;margin: 0 auto;">打开小程序</button></script></wx-open-launch-weapp></div></template><script>
// 引入微信jssdk
import wx from 'weixin-js-sdk'
import {getJumpConfig
} from '@/api/issue'
export default {data() {return {webview:''}},mounted() {this.getwxconfig()// wx.miniProgram.navigateTo({url: '/page/index/index'})},methods: {// 跳转小程序配置getwxconfig() {wx.config({// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId: 'wxxxx', // 必填，公众号的唯一标识,注意是wx开头的那个timestamp: '1619689091', // 必填，生成签名的时间戳nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成签名的随机串signature: 'bc68cbdcb3bef23e8395989fb7c5371996bcfc5c',// 必填，签名jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"], // 必填，需要使用的JS接口列表，我们需要用到的配置即可比如["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"],      openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']});wx.ready(function () {// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) {console.log('success');});btn.addEventListener('error', function (e) {console.log('fail', e.detail);});});wx.error(function (res) {// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名});},},
}
</script>

需要后端提供的

 timestamp: 'xxx', // 必填，生成签名的时间戳nonceStr: 'xxx', // 必填，生成签名的随机串signature: 'xxx',// 必填，签名

二、问题分析

1.js接口域名配置

（1）文件下载
配置域名弹框的上边的文字说明中会提示让下载校验文件

看我的：

就这个75Wu开头的txt文件
（2）文件放置
校验文件放在哪里：将文件放置在域名根目录下
通俗一点就是：将校验文件放在你发布时，将发布文件拖拽到的那个文件夹下边

如果问题请参考

（3）配置域名
在这里配置：

注意：此处配置失败的两种情况，
第一：检验文件未下载，未配置
第二：安全域名写的有问题

2.vue结构中的template

官网中的用例：

<wx-open-launch-weappid="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>
<script>var btn = document.getElementById('launch-btn');btn.addEventListener('launch', function (e) {console.log('success');});btn.addEventListener('error', function (e) {console.log('fail', e.detail);});
</script>跳转APP：wx

实际应用中

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

template被vue直接解析掉了，在页面中闪了一下，按钮就消失不见了
所以此时,用script标签解决。

<wx-open-launch-weapp id="launch-btn" username="gh_xxx"><script type="text/wxtag-template"><button class="btn" style="display:block;width:200px;height:100px;background-color:pink;margin: 0 auto;">打开小程序</button></script></wx-open-launch-weapp>

3.vue结构中的template

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来appId: 'wxxxx', // 必填，公众号的唯一标识,注意是wx开头的那个timestamp: '1619689091', // 必填，生成签名的时间戳nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成签名的随机串signature: 'bc68cbdcb3bef23e8395989fb7c5371996bcfc5c',// 必填，签名jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"], // 必填，需要使用的JS接口列表，我们需要用到的配置即可比如["onMenuShareTimeline","onMenuShareAppMessage","checkJsApi","scanQRCode"],      openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-weapp']});

很多人说appId是微信公众号中gh开头的那个，我就问，你跳转过吗？成功了吗？直接就报错config:fail
所以是wx开头的公众号的唯一标识

注意：此处，timestamp，nonceStr，signature三个参数是需要从接口动态获取的，我这里测试的时候，直接让后台生成的，所以没有配置动态的。

4.标签的属性配置

  id="launch-btn"username="gh_xxxxxxxx"path="pages/home/index?user=123&action=abc"

path不是必选项，如果不配置，默认跳转小程序首页，如果需要跳转其他页面则根据实际情况配置即可

5.配置中的弹框提示

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来});

config配置成功时提示errmsg:{config:ok}，此时将debug改为false或者直接干掉，弹框就没有了
config配置后提示errmsg:{config:fail},一般是appid配置错误
config配置中的某一项有问题，例如签名无效：errmsg:{config: invalid signature},提示签名无效的原因一般有两个，后台给的签名有问题，另一个可能是没有配置js安全域名

三、后端配置

注意要配置微信公众号wx开头的唯一标识
使用微信secret密钥
url要配置需要跳转的h5页面的url
如果出现签名无效的情况，检查是否配置js安全域名

另外附带
微信 JS 接口签名校验工具

总结

h5页面跳转小程序中遇到的问题和大家分享。

前端实现微信公众号h5页面跳转小程序-成功案例相关推荐

微信公众号h5页面跳转小程序
微信公众号h5页面跳转小程序文章目录微信公众号h5页面跳转小程序前言一.注意二.使用步骤步骤一:绑定域名步骤二:引入环境步骤三:初始配置前言问:h5 页面可以跳转至微信小程序吗? ...
让微信公众号自动回复可以跳转小程序的消息
1.在公众号中关联对应的小程序点击公众号左侧菜单栏"小程序管理",点击"添加"按钮. 添加小程序,点击"关联小程序" 输入对应的小 ...
微信公众号自定义菜单跳转小程序
微信的小程序交给有赞开发,由微信手册,菜单跳小程序需要如下配置: ["type" => "miniprogram","name" =& ...
微信公众号H5页面跳转至app的某个页面，如果手机内没有app，则进入下载页面
安卓实现方法: $(function(){ var Id = getParameter("goodsid"); //此操作会调起app并阻止接下来的js执行,进 ...
公众号h5页面跳转到小程序
前言: 最近做了一个公众号的首页,首页由一个模块需求是点击跳转到小程序,于是翻阅了资料,需要用到公众号的一个开放标签:wx-open-launch-weapp 公众号h5页面跳转小程序呢,需要先关联下 ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
微信公众号可快速创建“门店小程序” 不用开发
"门店小程序"是啥?"门店小程序"是小程序的一项新能力.无需开发,商户就可在微信公众号后台快速创建"门店小程序".这个小程序类似一张&quo ...
微信公众号计算机编程,微信公众号群发文章怎么添加小程序？-电脑教程
2017年4月20日微信发布公告称,微信公众平号群发文章支持添加小程序功能,这对于推广小程序来说,无疑是不错的途径.那么微信公众号群发文章怎么添加小程序?以下是华强电子网带来的详细教程. 微信公众号群 ...
微信公众号发送小程序卡片_微信公众号群发文章支持添加小程序卡片
2017年4月20日微信发布公告称,微信公众平号群发文章支持添加小程序功能,这对于推广小程序来说,无疑是不错的途径.那么微信公众号群发文章怎么添加小程序?下面爱站技术频道的小编带来的详细教程. 微信公 ...

前端实现微信公众号h5页面跳转小程序-成功案例