记录一下使用微信小程序wx-open-launch-weapp组件

微信小程序wx-open-launch-weapp组件

H5跳小程序的组件
官方文档：微信开放文档

开始配置

这个组件只能在微信内置浏览器里面使用
前期可以用微信开发者工具进行调试（公众号网页模式）

第一步需要在微信公众平台设置JS安全域名

H5一般授权就是通过微信公众号
配置完成引入JS文件

第二步就是配置config

前端需要后端传过来的参数就是这些
后端需要的签名算法签名算法文档
debug建议开启

官方用例
<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>
<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>

这样就可以获取到H5传给小程序的参数了
之前用URL scheme 生成的链接不能动态添加参数

坑的地方，这个组件要用生成或者vue 模板插入，文档没有写

一般错误 url 错误就是配置域名（公众号）
签名错误就是微信公众号的appid写错了或者不是服务号还需要认证
后面一定要在真机上运行模拟器会提示

一定要真机，微信内置浏览器！！！

最后贴上代码，代码只是测试后面可以封装成一个方法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#launch-btn {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 9;overflow: hidden;}</style><script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head><body><div id='app'><div id="launch-btn"></div></div><script src='https://cdn.jsdelivr.net/npm/vue@2'></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>const app = new Vue({el: '#app',data() {return {}},created() {this.getWxconfig();// setTimeout(() => {this.renderDom()// }, 2000)},methods: {// 动态渲染微信开发标签 跳转小程序renderDom() {var btn = document.getElementById('launch-btn');console.log('btn', btn)let script = document.createElement('script')script.type = 'text/wxtag-template'script.text =`<div style="height:100%;width:100%;text-align:center;">打开小程序</div>`let html =`<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="  小程序的gh原始id" path="跳转小程序地址和参数">${script.outerHTML}</wx-open-launch-weapp>`btn.innerHTML = html; // html字符串赋值// 点击按钮 正常跳转触发btn.addEventListener("launch", function (e) {console.log("success");alert(`跳转成功 - ${e.detail}`)});// 点击跳转 抛出异常btn.addEventListener("error", function (e) {console.log("fail", e.detail);alert(`跳转异常 - ${e.detail}`)});document.addEventListener('WeixinOpenTagsError', function (e) {console.error(e.detail.errMsg); // 无法使用开放标签的错误原因，需回退兼容。仅无法使用开发标签，JS-SDK其他功能不受影响});// return html},// h5页面先获取configasync getWxconfig() {let t = this;let href = window.location.href;let u = navigator.userAgent;let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //glet isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端let url = '';if (isAndroid) {url = location.href;console.log('android', url)}if (isIOS) {url = location.href.split('#')[0]; //hash后面的部分如果带上ios中config会不对console.log('ios', url)} else {url = location.href;}var params = new URLSearchParams();params.append('字段', '参数');axios.post('链接url', params).then(function (res) {if (res.data.retcode === '0000') {wx.config({debug: true,appId: '公众号的appid',timestamp: res.data.timestamp,nonceStr: res.data.noncestr,signature: res.data.signature,jsApiList: [""],openTagList: ['wx-open-launch-weapp']});wx.ready(function () {console.log('初始化成功！')});}}).catch(function (error) {console.log(error);});},}})</script><script></script>
</body></html>

记录一下使用微信小程序wx-open-launch-weapp组件相关推荐

微信小程序城市选择--iview weapp组件
微信小程序UI组件库 – https://weapp.iviewui.com/ 官网 GitHub下载地址:https://github.com/TalkingData/iview-weapp.git ...
在微信小程序里引入Vant Weapp组件库详细步骤
1. 新建一个文件夹. 2. 使用微信开发者工具选择一个模板(这里以javaScript 基础模板为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令. ① npm init 解释 ...
微信小程序中使用Vant Weapp组件--以card为例
一.构建环境: Vant Weapp官网文档: https://youzan.github.io/vant-weapp/#/quickstart 1.方法一注意要在微信小程序根目录下安装:用cmd命令 ...
微信小程序中使用Vant Weapp组件库
介绍 Vant 是一个轻量.可靠的移动端组件库,于 2017 年开源. 目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序 ...
微信小程序数据库交互 php,微信小程序wx.request实现后台数据交互功能分析
本文主要介绍微信小程序wx.request实现后台数据交互功能,分析微信小程序wx.request在后台数据交互过程中遇到的问题与相关的解决方法,需要的朋友可以参考下记录微信小程序wx.reques ...
微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下 ...
微信小程序wx.compressImage的坑
微信小程序wx.compressImage的坑如何使用第二个坑如何使用微信小程序api官网写的是这个 wx.compressImage({ src: '', // 图片路径 quality: ...
微信小程序 wx.setstoragesync和wx.setstorage 区别
相同点: 微信小程序 wx.setstoragesync和wx.setstorage都是能把值保存在微信小程序缓存中,类似于浏览器的localstorage概念区别: wx.setStorage是异 ...

记录一下使用微信小程序wx-open-launch-weapp组件

微信小程序wx-open-launch-weapp组件

开始配置

第一步需要在微信公众平台设置JS安全域名

第二步就是配置config

坑的地方，这个组件要用生成或者vue 模板插入，文档没有写

一定要真机，微信内置浏览器！！！

一定要真机，微信内置浏览器！！！

一定要真机，微信内置浏览器！！！

最后贴上代码，代码只是测试后面可以封装成一个方法

记录一下使用微信小程序wx-open-launch-weapp组件相关推荐

最新文章

热门文章