51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 2035|回复: 0
打印 上一主题 下一主题

微信小程序入门到实战(三)

[复制链接]

该用户从未签到

跳转到指定楼层
1#
发表于 2019-2-14 14:53:44 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
上一遍文章的结尾介绍了小程序简单的数据绑定方式,但是核心要知道:数据绑定,都是借用data这个属性作为一个中转地,服务器上面获取的数据,经过处理,使用this.setData()方法绑定到data属性中的一个变量,在通过这个变量绑定到页面上面。

接下来说一下数据绑定的其他用途:

标签的显隐

前面说到,小程序里面没有dom的概念,就不能通过标签的display和visibility属性来控制,那怎么控制呢?

在小程序里面,对于一个标签的属性值是true / false的时候,在绑定数据的时候,就会对其中的数据进行布尔值的比较,有值就为真,绑定的数据是false或者是空的时候就是假;

  1. <swiper  wx:if='{{date}}'  catchtap='onSwiperTab' indicator-dots='{{date}}' vertical='{{false}}' autoplay='{{false}}' interval='5000'>
  2.     <swiper-item>
  3.       <image src='/images/post/bl.png' data-postid='3'></image>
  4.     </swiper-item>
  5.     <swiper-item>
  6.       <image src='/images/post/xiaolong.jpg' data-postid='2'></image>
  7.     </swiper-item>
  8.   </swiper>
复制代码

就拿前面说的轮播组件来说,当我在对应的页面data属性里面设置date的值的时候,只要不为空或者false,那么swiper中的两个通过绑定数据的方式设置属性值的属性,其属性值就都会被解析为true。那个直接设置false的autoplay属性就不会自动轮播。

注意那个wx:if='{{date}} ',才是控制标签显示和隐藏的关键。如果date是真,那么wx:if='{{date}} '结果为真,就会显示轮播组件,如果date是假,那么wx:if='{{date}} '结果为假,就会隐藏轮播组件


图片的切换

通常我们做图片的切换,一般是通过改变图片的路径来实现;在小程序里面可以使用if else动态的控制图片的切换。

类似上面说的控制标签的显示和隐藏,也要使用到数据绑定:

  1. <view class='circle-img'>
  2.       <image catchtap='onCollectionTap' wx:if='{{collected}}' src='/images/icon/collection.png'></image>
  3.       <image catchtap='onCollectionTap' wx:else src='/images/icon/collection-anti.png'></image>
  4.       <image catchtap='onShareTap' class='share-img' src='/images/icon/share.png'></image>
  5. </view>
复制代码

上面代码里面,只显示两张图片,通过collected这个从服务器传过来的标识,来判断是显示wx:if='ture'的图片,还是显示wx:else的图片,两者选其一,很方便的控制了图片的切换。


数据的循环

通常编写页面的时候,想把相同的区域呈现多次,又不想编写冗余的代码,小程序里面通过一个属性:wx:for='{{数据源}}'

  1. <view wx:for='{{datesArry}}' wx:for-item='item' wx:for-index='idx'>
  2.   <view catch:tap='onBind'>{{item.date}}</view>
  3.   <view catch:tap='onBind'>{{item.title}}</view>
  4.   <view catch:tap='onBind'>{{item.content}}</view>
  5. </view>

  6. // Page页面中的数据源
  7.     onLoad: function (options) {
  8.     var datasArr = [{
  9.       date: '2018/2/3',
  10.       title: '神盾局特工1',
  11.       content: '神盾局特工这个礼拜六停播,说好的不冬歇的呢?'
  12.     }, {
  13.       date: '2018/2/3',
  14.       title: '神盾局特工2',
  15.       content: '神盾局特工科学组CP要结婚啦!'
  16.     }]
  17.     this.setData({ datesArry: datasArr })
  18.     // this.setData(datasArr)   setData 方法接收的是一个对象,而不是数组
  19.   }
复制代码
我们把要呈现多次的区块,用一个标签包裹view / block,然后在其上面作用于wx:for属性,接收一个数组或者集合的数据,datesArry就是要循环的数据数组,wx:for-item='item' wx:for-index='idx'中的item是被循环的子对象,idx是对应子对象在数据数组里面的索引位置;这两个值都默认是有的,即使不写。

前面也说道过,this.setData()方法是把里面接收到的数据,绑定到Page下面的data属性里面,然后在展示在页面中,小程序的数据绑定,都是从Page中的data属性中读取数据去完成数据绑定。这个读取data属性中的数据去绑定到页面的动作是发生在onLoad事件之后的。

既然这么说的话,那么可不可以直接给data对象身上直接添加属性,并且直接赋值:this.data.datesArry=datasArr,这样是绑定不了数据到页面上,虽然不会报错,小程序的前期版本里面是可以这样绑定数据的。所以都建议使用this.setData()方法去主动更新数据。

要是数据是存放在其他的文件夹下面,应该怎么样读取呢?在数据文件中,通过抛出一个数据出口,来通过其他文件进行访问:
  1. module.exports = {
  2.     postList: dataBase  // 数据数组的名字  
  3. }
复制代码
在要使用数据的js文件下,引入要使用数据的路径,应该在page外面引入:
  1. var postsData = require('数据文件所在的路径');
复制代码
注意这个require中的路径名是相对路径,不能是绝对路径。


分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2024-11-22 07:21 , Processed in 0.057456 second(s), 24 queries .

Powered by Discuz! X3.2

© 2001-2024 Comsenz Inc.

快速回复 返回顶部 返回列表