aliang888
aliang888
  • 发布:2020-07-29 22:23
  • 更新:2021-05-25 11:40
  • 阅读:11187

【分享】uniapp环境开H5端打开微信小程序,解决苹果端首次进入页面显示异常

分类:uni-app
<wx-open-launch-weapp path="pages/card/visit_card.html?id=19" id="launch-wxapp" username="gh_abc199886dfa">  
        <script type="text/wxtag-template">  
            <style>  
                .btn-open-weapp{  
                    background: linear-gradient(to right, #ffd52e 0%, #ffef93 50%, #ffd52e 100%);  
                    border: 0;  
                    color: #424242;  
                    text-shadow: 0px 1px 1px #fff;  
                    border-radius: 50px;  
                    text-align: center;  
                    width: 120px;  
                    height: 35px;  
                    line-height: 35px;  
                    outline:none;  
                }  
            </style>  
            <button class="btn-open-weapp">进店逛逛</button >  
        <script>  
</wx-open-launch-weapp>`  

原来直接这样子用,发现有问题,安卓端正常,但苹果端首次进入H5页面显示不了按钮,只有刷新才能显示,于是折腾一翻,因为H5端支持v-html,测试了下一切正常

下面这种方式,微信开发者工具也能看到按钮哦

<!-- #ifdef H5 -->  
    <view v-html="wxOpenTags"></view>  
<!-- #endif --> 
//#ifdef H5  
    setTimeout(()=>{  
        this.wxOpenTags=`<wx-open-launch-weapp path="pages/card/visit_card.html?id=19" id="launch-wxapp" username="gh_abc199886dfa">  
            <template>  
                <style>  
                .btn-open-weapp{  
                    background: linear-gradient(to right, #ffd52e 0%, #ffef93 50%, #ffd52e 100%);  
                    border: 0;  
                    color: #424242;  
                    text-shadow: 0px 1px 1px #fff;  
                    border-radius: 50px;  
                    text-align: center;  
                    width: 120px;  
                    height: 35px;  
                    line-height: 35px;  
                    outline:none;  
                }  
                </style>  
                <button class="btn-open-weapp">进店逛逛</button >  
            </template>  
        </wx-open-launch-weapp>`;  
    },1000);  
//#endif

wx-open-launch-app也用v-html的方式

0 关注 分享

要回复文章请先登录注册

1***@qq.com

1***@qq.com

回复 newDate :
我也有这个问题,请问解决了吗
2021-05-25 11:40
newDate

newDate

你好,我放到uniapp vue页面,报错TypeError: Cannot read property 'title' of undefined
2021-04-15 10:28
1***@qq.com

1***@qq.com

let _this = this;
let res = uni.getSystemInfoSync();
this.width = res.windowWidth;
let imgW=(res.windowWidth/750)*65;
let imgH=(res.windowWidth/750)*64;
this.configWX();
setTimeout(function(){
_this.wxOpenTags = `<wx-open-launch-weapp path="live/pages/live_add/index" id="launch-wxapp" username="gh_2aacc5fc9f93">
<template>
<style>
.service-item 1{
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.imgServ {
width: `+imgW+`px;
height: `+imgH+`px;
}
</style>
<div class='service-item1'>
<img class="imgServ" src="../../static/userImg/startBo.png"></img>
<button class="fz_25 pt_20">开始直播</button>
</div>
</template>
</wx-open-launch-weapp>`;
},1000)
2020-10-26 11:35
1***@qq.com

1***@qq.com

不行呀,样式都没生效
2020-10-26 11:29
1***@qq.com

1***@qq.com

html部分:
<template>
<!-- #ifdef H5 -->
<view v-html="wxOpenTags" v-if="wxOpenTags"></view>
<!-- #endif -->
</template>
2020-10-22 14:10
1***@qq.com

1***@qq.com

<template>
<!-- #ifdef H5 -->
<view v-html="wxOpenTags" v-if="wxOpenTags"></view>
<!-- #endif -->
</template>
<style lang="scss" scoped></style>
<script>
import wx from '@/node_modules/jweixin-module/lib/index.js';
export default {
components: {},
data() {
return {
wxOpenTags: ''
};
},
onLoad() {
this.$https
.request({
url: this.$interfaces.wxwebsiginApi, //获取微信授权参数
method: 'POST',
data: {
rqurl: location.href
}
})
.then(res => {
if (res.code === 0) {
console.log(res);
wx.config({
debug: true,
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'checkJsApi', 'scanQRCode'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp']
});
wx.ready(function(res1) {
console.log(res1);
});
wx.error(function(res2) {
close.log(res2);
});
}
});
},

onReady() {
this.gethtml();
},
methods: {
gethtml() {
//#ifdef H5
setTimeout(() => {
this.wxOpenTags = `<wx-open-launch-weapp path="pages/index/index.html" id="launch-wxapp" username="gh_e8d4edb8feee">
<template>
<style>
.btn-open-weapp{
background: linear-gradient(to right, #ffd52e 0%, #ffef93 50%, #ffd52e 100%);
border: 0;
color: #424242;
text-shadow: 0px 1px 1px #fff;
border-radius: 50px;
text-align: center;
width: 120px;
height: 35px;
line-height: 35px;
outline:none;
}
</style>
<button class="btn-open-weapp">进店逛逛</button >
</template>
</wx-open-launch-weapp>`;
}, 5000);
//#endif
}
}
};
</script>
2020-10-22 14:08
1***@qq.com

1***@qq.com

下面这段代码是我的,为什么执行了,按钮没显示出来,调试了一天,都看不出是哪里有问题,有人能帮忙解答下!!!吗!!!
2020-10-22 14:07
1***@qq.com

1***@qq.com

<template>
<!-- #ifdef H5 -->
<view v-html="wxOpenTags" v-if="wxOpenTags"></view>
<!-- #endif -->
</template>
<style lang="scss" scoped></style>
<script>
import wx from '@/node_modules/jweixin-module/lib/index.js';
export default {
components: {},
data() {
return {
wxOpenTags: ''
};
},
onLoad() {
this.$https
.request({
url: this.$interfaces.wxwebsiginApi, //获取微信授权参数
method: 'POST',
data: {
rqurl: location.href
}
})
.then(res => {
if (res.code === 0) {
console.log(res);
wx.config({
debug: true,
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: res.data.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
signature: res.data.signature, // 必填,签名
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'checkJsApi', 'scanQRCode'], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp']
});
wx.ready(function(res1) {
console.log(res1);
});
wx.error(function(res2) {
close.log(res2);
});
}
});
},

onReady() {
this.gethtml();
},
methods: {
gethtml() {
//#ifdef H5
setTimeout(() => {
this.wxOpenTags = `<wx-open-launch-weapp path="pages/index/index.html" id="launch-wxapp" username="gh_e8d4edb8feee">
<template>
<style>
.btn-open-weapp{
background: linear-gradient(to right, #ffd52e 0%, #ffef93 50%, #ffd52e 100%);
border: 0;
color: #424242;
text-shadow: 0px 1px 1px #fff;
border-radius: 50px;
text-align: center;
width: 120px;
height: 35px;
line-height: 35px;
outline:none;
}
</style>
<button class="btn-open-weapp">进店逛逛</button >
</template>
</wx-open-launch-weapp>`;
}, 5000);
//#endif
}
}
};
</script>
2020-10-22 14:05
j***@live.cn

j***@live.cn

这个时候H5页面怎么监听用户关闭小程序呢?因为页面还要触发下一步动作
2020-10-14 17:42
aliang888

aliang888 (作者)

回复 9***@qq.com :
当然能跳转了,ios端首次进入页面不会渲染出那个按钮,我是判断ios端,就自动刷新下当前页面
2020-09-07 09:34