h5页面跳转微信小程序。

一、先说页面表现，页面上有几点需要注意：

1.标签写的时候，button按钮一定要包在template标签里面。没有用vue的话，可以直接用<template>去包，如果是vue2用 <script type="text/wxtag-template"></script>去包，vue3用<div v-is="'script'" type="text/wxtag-template"></div>去包

2.比较烦人的是样式，样式可能不显示或者不生效，需要真机测试一下，我这边写的时候呢，在<template>中用<style>标签包裹后出不来，所以改成行内样式。其次就是样式，页面中与布局和定位相关的样式，如position: fixed; top -100;等，尽量不要写在插槽模版的节点中，写在标签或其父节点上比如我加了 class="wx_open_box" 来写定位。

<div class="wx_open_box"><wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index?user=123&action=abc"><script type="text/wxtag-template"><button class="btn" style="width: 3rem;height: 3rem;border: none;background:rgba(0,0,0,0);-webkit-tap-highlight-color: transparent!important;">&nbsp;&nbsp;&nbsp;&nbsp;</button></script></wx-open-launch-weapp>
</div>

页面到这里就OK了，然后就是js部分了。

1、首先就是支持跳转的JSSDK。引入js文件要注意JSSDK版本需要1.6.0，直接在 index.html 中引用就成：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. config配置（这个配置是H5部分配置的，并非要跳转到的小程序配置），调后端验签接口拿回来配置上就可以，这里要 注意到 验签接口是需要支持跳转小程序这个功能的，--- “ 因为我两个接口都通一个能跳一个不行，问了同事说这里是有讲究的”

wx.config({debug: true, // 调试的时候打开appId: '', // 后端的事情timestamp: '', // 后端的事情nonceStr: '', // 后端的事情signature: '',// 后端的事情jsApiList: [] ,// 需要的能力，比如拍照、获取信息等等，跳转小程序不需要openTagList:[] // 能够使用的标签，也就是HTML标签，只不过是微信自定义的。
});

由于跳转小程序需要一个微信自定义的标签 wx-open-launch-weapp，所以上面的配置中的 openTagList 写上

openTagList:['wx-open-launch-weapp']

vue会显示wx-open-launch-weapp 报红，组件未注册。在main.js中加入

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

到这里停，一切都通之后页面就可以用了。pc端调试是没反应的，需要真机去试哈 ~

h5页面跳转微信小程序。相关推荐

h5页面跳转微信小程序页面
// 判断环境是否在微信小程序里 function isMiniProgram(){var ua = navigator.userAgent.toLowerCase();var envType='#' ...
vue H5页面跳转微信小程序以及生成二维码跳转小程序
研究了两种H5跳转小程序的方法,同时携带参数 1. 手机浏览器打开H5页面,点击按钮拉起微信小程序 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序为了开发方便,以上两种均借助了微信小程 ...
关于微信公众号的h5页面跳转微信小程序的详细介绍
简介关于微信公众号跳转小程序的功能,我也是研究了一整天才弄好的,主要是微信官方文档写的不清楚,百度上的各种文章也各说各的,不过最后还是要相信官网文档,接下来我会一步一步分析,希望对你有帮助,并且最后 ...
关于微信小程序跳转到H5，然后从H5又跳回微信小程序问题的资料
关于微信小程序跳转到H5,然后从H5又跳回微信小程序问题的资料直接上答案 // javascript import wx from 'weixin-jsapi';// 判断h5页面是否是运行在小程序 ...
h5网页跳转微信小程序
H5网页跳转微信小程序再次记录下, 通过使用微信开放标签,可便捷的跳转到微信小程序. 文章目录 H5网页跳转微信小程序效果图一.小程序跳转按钮二.开放标签使用步骤 1. 绑定域名 2. 引入j ...
H5静态页面跳转微信小程序；从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序；
参考链接需求:从外部浏览器,点击H5链接跳转打开微信小程序:以及在微信内直接点击H5链接打开微信小程序: 步骤1: 小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹: 步骤2 ...
小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
公众号h5页面跳转到小程序
前言: 最近做了一个公众号的首页,首页由一个模块需求是点击跳转到小程序,于是翻阅了资料,需要用到公众号的一个开放标签:wx-open-launch-weapp 公众号h5页面跳转小程序呢,需要先关联下 ...
h5（微信sdk/企信sdk）页面跳转微信小程序，监听微信小程序关闭事件，已解决
H5应用打开小程序,监听小程序关闭: document.addEventListener("visibilitychange", function(){if(document.hi ...

h5页面跳转微信小程序。

h5页面跳转微信小程序。相关推荐

最新文章

热门文章