• 甘肃网站制作|企业网站建设|域名注册|商标注册|网站制作推广|网站建设|企业邮箱|微信小程序|虚拟主机|服务器
  • 打开微信扫一扫,
    您还可以在这里找到我们哟

    关注我们

  • 帮助中心

    控件中同时使用wx:if和wx:for导致无效的问题

    在微信小程序的开发过程中,会遇到各式各样的问题,本文主要是针对自己开发中遇到的问题,找到解决方案后的记录总结。


    1.控件中同时使用wx:if和wx:for导致无效的问题

    这个问题是一个朋友问到的,场景是一个类似微信朋友圈的列表数据,通过服务器的一个参数控制条目中图片的显示隐藏,比如当前的朋友圈动态是有图片的,则该条目的isShow为true,反之,则isShow为false。布局的方式是大的列表数据嵌套小的图片列表数据,在实现的时候通过wx:if来控制图片列表的显示隐藏,通过wx:for来控制图片列表数据的显示,逻辑结构很简单,但是在图片列表控件上同时添加wx:if和wx:for时,发现wx:if不起作用。图片列表代码如下:


    <block class="imglist" wx:if="{{item.isShow}}" wx:for="{{item.piclists}}">

       <image class='image-view' src="{{item.pic}}"></image>

    </block>

    1

    2

    3

    4

    看到这个问题,也很奇怪,逻辑上没有什么问题,然后开始动手做测试,测试过程中发现:如果对同一个控件同时添加wx:if和wx:for,是不能正常起作用的。修改代码,在图片列表控件外添加一个view布局,来单独控制其显示隐藏。修改后代码如下:


    <view wx:if="{{item.isShow}}">

        <block class="imglist" wx:for="{{item.piclists}}">

           <image class='image-view' src="{{item.pic}}"></image>

        </block>

    </view>

    1

    2

    3

    4

    5

    2.微信实现不同分享按钮分享不同内容

    在小程序的开发过程中,分享是很重要的功能点,之前的文章也介绍了:微信小程序不同分享效果的实现,有时候可能需要我们实现不同的按钮分享不同的内容,这一点我们应该如何去实现呢? 

    先看下官方文档关于分享的说明: 


    其中options参数中有两个参数from和target,from用来区分分享的来源,确定是按钮分享还是右上角分享,target参数则是按钮分享的触发控件。 

    首先,我们创建一个分享按钮:


    <button id='123' class='starshare' open-type='share'>

        <text class='sharemsg'>分享</text>

    </button>

    1

    2

    3

    在js文件中实现onShareAppMessage()方法:


    onShareAppMessage: function (options) {

        console.log(options)

    }

    1

    2

    3