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

【分享】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 关注 分享

要回复文章请先登录注册

9***@qq.com

9***@qq.com

楼主确定能跳转小程序没问题??
2020-09-03 17:00
2***@qq.com

2***@qq.com

回复 4***@qq.com :
你解决了没
2020-08-25 11:08
x***@163.com

x***@163.com

先引入js 可以用npm安装jweixin1.6,和平时调用js一样设置好,就多了个openTagList: ['wx-open-launch-weapp'] ,等ready之后按照上面楼主去做就ok了
2020-08-22 04:52
aliang888

aliang888 (作者)

回复 aliang888 :
4、还有重要的一个点,就是path一定要加上.html
官方的文档有说明:对于path属性,所声明的页面路径必须添加.html后缀,如pages/home/index.html
2020-08-14 10:32
aliang888

aliang888 (作者)

总结下很多人说不生效,自己一步步排查下,应该是没有认真看官方的文档
【提醒】开发工具环境是不生效的,要在真机下才可能,很多人都是不认真看文档
1、JS安全域名
如果是公众号身份的网页,需要绑定安全域名,如果是使用小程序云开发静态网站托管的小程序网页,则不需绑定安全域名即可直接使用(即跳过下面"步骤一:绑定安全域名")。

2、vue环境下,说报组件没有注册,估计是没有<script type="text/wxtag-template"><script>

如果所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过<template></template>进行包裹。对于Vue等视图框架,为了避免template标签冲突的问题,可使用<script type="text/wxtag-template"><script>进行代替,来包裹插槽模版和样式。另外,对于具名插槽还需要通过slot属性声明插槽名称,下文标签插槽中的default插槽为默认插槽,可不声明插槽名称。

3、参考我本文的方法试下
2020-08-14 09:41
aliang888

aliang888 (作者)

回复 4***@qq.com :
把js代码放到onReady(){}里面
2020-08-14 09:24
4***@qq.com

4***@qq.com

回复 aliang888 :
大佬,能给个 联系方式吗,急求帮助,有偿。
2020-08-12 21:56
4***@qq.com

4***@qq.com

我的貌似不行,求大佬指点。
编译不报错,微信开发者工具不显示按钮,真机测试也没有反应

<template>
<view v-html="wxOpenTags">点击我啊</view>
</template>

onLoad: function (options) {
//#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
},
2020-08-12 21:55
wanghexu

wanghexu

我解决了
2020-08-11 19:23
wanghexu

wanghexu

回复 wanghexu :
我解决了
2020-08-11 19:23