有可能时标签顺序导致,<template> 标签放在 <wx-open-launch-weapp>后边, 将.components-details { width: 100%; height: 100%; },挪到标签里的style里 知否笔记:https://www.zhifoubj.com
小程序跳转按钮:<wx-open-launch-weapp>部分机型适配的问题 标题必须有问号?背景: 1、拥有认证服务号 2、JS接口安全域名已配置 3、网站正常使用 需求:在网站内添加跳转小程序功能 实现:vue组件 <template> <div class="components-details" v-if="reday" :span="24"> <wx-open-launch-weapp style="display:block; width:100%;height:100%;" class="launch-btn" id="launch-btn" :username="appid" :extinfo="path"> <script type="text/wxtag-template"> <style> .btn { width: 100%; height: 100%; font-size:15px; color:#ffffff; line-height: 45px; background-color: #e60039; margin: 0 auto; text-align: center; } </style> <div class="btn">前往小程序</div> </script> </wx-open-launch-weapp> </div> </template> <script> //获取配置接口 import { getWxConfigInfo } from '@/api/goods' export default { props: { appid: { type: String, default: '' }, path: { type: String, default: 'pages/index/index.html' } }, data() { return { reday: false }; }, created() { this.getConfig() }, methods: { getConfig() { let wxurl = window.location.href.split('#')[0]; //获取签名的地址 vue hash模式 const that = this; getWxConfigInfo({ appid: '你的服务号appid', requesturl: wxurl }).then(res => { if (res.code == '0') { //这里直接用wx是因为项目在index.html 引入了https://res.wx.qq.com/open/js/jweixin-1.6.0.js //当然也可以用import方式引入再使用 wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: res.data.appId, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串 signature: res.data.signature, // 必填,签名,见附录1 jsApiList: ['onMenuShareTimeline'], // 所有要调用的 API 都要加到这个列表中,即使 不使用任何API也必须填一个,不填的话按钮不会显示 openTagList: ['wx-open-launch-weapp'],//小程序跳转组件 success: function (res) { // alert(JSON.stringify(res)); // console.log(res) // 以键值对的形式返回,可用的api值true,不可用为false // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} }, cancel: function () { reject(); }, fail: function (err) { console.log(err) reject(err) } }); // config成功 wx.ready(function () { // 成功后显示<wx-open-launch-weapp>标签 that.reday = true; }) } }) } } }; </script> <style scoped lang="scss"> .components-details { width: 100%; height: 100%; } </style> 效果: iPhone手机能正常显示(低版本没有测试) [图片] 2部小米手机无法显示按钮安卓10,微信7.0.16 [图片] 2部OPPO手机无法显示 安卓10,微信7.0.15 [图片] 华为P30无法显示 安卓9 微信7.0.15
2021-01-02