vue使用wx-open-launch-weapp

此功能的开放对象：

已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。（二级域名也需要配）
已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

如果你的代码遇到页面不出现按钮的问题

查看 openTagList 是否为 [‘wx-open-launch-weapp’] ，官网默认给的wx-open-launch-app
官网例子中template标签要替换为 <script type="text/wxtag-template"><script>
path可以不传，但是传一定要加html后缀

页面报错找不到模板wx-open-launch-weapp,可以在main.js配置

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

下面是实测可用代码，替换接口就ok。 username替换成你的小程序原始ID

<template><div style="width: 100%; height: 100%;">按钮按钮：<wx-open-launch-weapp          username="gh_"          path="/pages/index/index.html">       <script type="text/wxtag-template">         <style>.btn { padding: 12px}</style><button class="btn">跳转小程序</button>      </script>     </wx-open-launch-weapp> </div>
</template><script>
// 通过接口从后端获取加密数据，自定义的文件
import {openWxmini} from '@/assets/js/api.js'
export default {methods: {wxmini(){// 获取密钥openWxmini({url:window.location.href}).then(res=>{let {appId,nonceStr,signature,timestamp} = res.resultwx.config({ // eslint-disable-linedebug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印appId, // 必填，公众号的唯一标识timestamp, // 必填，生成签名的时间戳nonceStr, // 必填，生成签名的随机串signature,// 必填，签名jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的JS接口列表openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']});/* eslint-disable */wx.ready(function () {console.log('ready')});})}},created() {const oScript = document.createElement('script');oScript.type = 'text/javascript';oScript.src = 'https://res2.wx.qq.com/open/js/jweixin-1.6.0.js';oScript.onload = this.wxminidocument.body.appendChild(oScript);},
}
</script><style></style>

父元素 display:none;的情况下，会出现不渲染的bug。在wx-open-launch-weapp 标签上加 style=“display: inline-block;border: none;”

官方文档

vue使用wx-open-launch-weapp相关推荐

vue前端实现微信支付-微信公众号JSSDK
最近在做支付功能,微信支付准备工作之类的请参考官方说明,注意个人申请的测试号不支持,要申请企业号,还要商户号,开通支付权限,配置域名,JSSDK的权限问题,尽可能都开通吧! 官方地址可参考这里:接入准 ...
Vue中使用微信JSDK实现图片上传
1.npm安装,不会的看这里 npm install weixin-js-sdk 2.main.js全局注册 import wx from 'weixin-js-sdk' Vue.prototype. ...
如何使用vue开发公众号网页
通过vue-cli创建项目安装脚手架工具 npm install -g @vue/cli # OR yarn global add @vue/cli 创建一个项目 vue create water_ ...
Vue使用微信录音并上传服务端
在微信公众号或者微信h5的网页开发中,会用到录音等功能,在微信里面使用微信录音会比较好一点,不用去设置ios和android的h5录音兼容性,并且h5的其他录音js文件可能不兼容微信浏览器等,所以vu ...
vue开发企业微信通讯录选择
1.npm安装相应的依赖,并在main.js中导入对应的包 import axios from 'axios';Vue.prototype.axios = axios;Vue.prototype.wx ...
如何在vue项目中调用微信扫一扫
今天公司有一个用vue写的微信公众号的项目,里面有个1扫一扫,刚开始我看了都蒙蔽了.没接触过,一头雾水,然后在网上查了下,官网需要引入一个js文件`链接如下微信公众号官方文档但是vue项目所以就在网 ...
Vue(五)——调试
一.console输出到控制台如果Vue项目中,使用了eslint-loader(代码规范:空格,缩进,console等测试语句)的话,就没法使用console 一定需要使用console可以尝试关 ...
vue微信H5自定义分享兼容ios、PC、安卓
1.安装微信sdk yarn add weixin-js-sdk // 安装依赖 // 或者在index.html引入<script src="https://res.wx.qq.co ...
vue引入微信的JSSDK h5与小程序之间的跳转方案
vue引入微信的JSSDK使用 h5与小程序之间的跳转 vue如何使用微信的JSSDK 安装 npm install weixin-js-sdk --save 我喜欢设置全局属性,所以在main.j ...
vue项目微信禁止分享功能
Vue微信公众号网页禁用分享功能因为项目中需要禁止分享功能,所以去百度了一下,但是还是挺多坑的最后拼凑了一个流程.(只介绍全部禁用的) 有很多文章用的是 WeixinJSBridge.call('h ...

vue使用wx-open-launch-weapp

父元素 display:none;的情况下，会出现不渲染的bug。在wx-open-launch-weapp 标签上加 style=“display: inline-block;border: none;”

vue使用wx-open-launch-weapp相关推荐

最新文章

热门文章