微信小程序开发笔记（四）数据绑定

川长思鸟来 2022-03-21 05:55 353阅读 0赞

参考教材：《微信小程序开发入门与实践》 雷磊  
前置知识：JavaScript，CSS

为了更好的学习后续知识，先来新建一个页面。（以下代码来自《微信小程序开发入门与实践》，下载地址：[https://pan.baidu.com/s/1cxQXie，][https_pan.baidu.com_s_1cxQXie] 源代码和图片资源在里面都可以找到）  
我们先新建一个post界面，并作为首页,用到图片资源如`resource`目录所示

并修改其中的post.wxml和post.wxss  
post.wxml代码如下:  
其中< swiper >是滑块视图容器, 这里用来实现轮播图的效果,具体用法说明请查看官方api [https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html][https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]

<view>
      <swiper indicator-dots="true" autoplay="true" interval="5000" circular="true">
        <swiper-item>
          <image src="../resource/post-1@text.jpg"/>
        </swiper-item>
        <swiper-item>
          <image src="../resource/post-2@text.jpg" />
        </swiper-item>
        <swiper-item>
          <image src="../resource/post-3@text.jpg"/>
        </swiper-item>
      </swiper>
      <view class="post-container">
        <view class="post-author-date">
          <image src="../resource/my.jpg" />
          <text>2018.1.31</text>
        </view>
        <text class="post-title">小时候的冰棍儿与雪糕</text>
        <image class="post-image" src="../resource/post-4.jpg" mode="aspectFill" />
        <text class="post-content">冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯，而5分1毛的 冰棍儿就像现在的老冰棒。时过境迁，...</text>
        <view class="post-like">
          <image src="../resource/icon/wx_app_collect.png" />
          <text>23</text>
          <image src="../resource/icon/wx_app_view.png"></image>
          <text>3</text>
          <image src="../resource/icon/wx_app_message.png"></image>
          <text>0</text>
        </view>
      </view>
    </view>

post.wxss如下

/* pages/post/post.wxss */
    swiper{
        
         width:100%;
         height:600rpx;
     }
    
      swiper image{
        
         width:100%;
         height:600rpx;
     }
    .post-container{
        
        flex-direction:column;
        display:flex;
        margin:20rpx 0 40rpx;
        background-color:#fff;
        border-bottom: 1px solid #ededed;
        border-top: 1px solid #ededed;
        padding-bottom: 5px;
    }
    
    .post-author-date-{
        
        margin: 10rpx 0 20rpx 10px;
        display:flex;
        flex-direction: row;
        align-items: center;
    }
    
    .post-author-date image{
        
        border-radius: 50rpx;
        width:60rpx;
        height:60rpx;
    }
    .post-author-date text{
        
        margin-left: 20px;
    }
    
    .post-image{
        
        width:100%;
        height:340rpx;
        margin-bottom: 15px;
    }
    
    .post-date{
        
        font-size:26rpx;
        margin-bottom: 10px;
    }
    .post-title{
        
        font-size:16px;
        font-weight: 600;
        color:#333;
        margin-bottom: 10px;
        margin-left: 10px;
    }
    .post-content{
        
        color:#666;
        font-size:26rpx;
        margin-bottom:20rpx;
        margin-left: 20rpx;
        letter-spacing:2rpx;
        line-height: 40rpx;
    }
    .post-like{
        
        display:flex;
        flex-direction: row;
        font-size:13px;
        line-height: 16px;
        margin-left: 10px;
        align-items: center;
    }
    
    .post-like image{
        
        height:16px;
        width:16px;
        margin-right: 8px;
    }
    
    .post-like text{
        
        margin-right: 20px;
    }

界面运行结果如图  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70][]  
现在文章的数据都写在wxml文件里了,但是wxml文件的担任的角色应该是视图层,不应该包含太多的业务数据.所以我们现在要把这些业务数据放到js文件里,然后在wxml文件里引用这些数据,这个过程就叫数据绑定.

### 初始化数据绑定 ###

初始化数据绑定是将业务数据放在page方法参数的data对象下面,然后在wxml文件中引用这些数据.小程序使用双大括号`{ {}}`在wxml组件里进行数据的绑定. 双括号里的名称对应data对象里的属性名.可见,数据绑定非常简单,只要将data对象的属性名填入到双大括号`{ {}}`中即可.MINA框架会自动在运行时用data数据替换这些`{ {}}`.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 2]

// pages/post/post.js
    Page({
        
    
      /**
       * 页面的初始数据
       */
      data: {
        
        date: "2018.1.31",
        title: "小时候的冰棍儿与雪糕",
        postImg: "../resource/post-4.jpg",
        avatar: "../resource/my.jpg",
        content: "冰棍与雪糕绝对不是同一个东西。3到5毛钱的雪糕犹如现在的哈根达斯，而5分1毛的 冰棍儿就像现在的老冰棒。时过境迁，...",
        readingNum: 23,
        collectionNum: 3,
        commentNum: 0,
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
        
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
        
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
        
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
        
    
      }
    })

更改后的post.wxml,图片路径看个人目录路径.

<view>
      <swiper indicator-dots="true" autoplay="true" interval="5000" circular="true">
        <swiper-item>
          <image src="../resource/post-1@text.jpg" />
        </swiper-item>
        <swiper-item>
          <image src="../resource/post-2@text.jpg" />
        </swiper-item>
        <swiper-item>
          <image src="../resource/post-3@text.jpg" />
        </swiper-item>
      </swiper>
      <view class="post-container">
        <view class="post-author-date">
          <image src="{
         {avatar}}" />
          <text>{
       {date}}</text>
        </view>
        <text class="post-title">{
       {title}}</text>
        <image class="post-image" src="{
         {postImg}}" mode="aspectFill" />
        <text class="post-content">{
       {content}}</text>
        <view class="post-like">
          <image src="../resource/icon/wx_app_collect.png" />
          <text>{
       {collectionNum}}</text>
          <image src="../resource/icon/wx_app_view.png"></image>
          <text>{
       {readingNum}}</text>
          <image src="../resource/icon/wx_app_message.png"></image>
          <text>{
       {commentNum}}</text>
        </view>
      </view>
    </view>

开发工具为我们提供了一个AppData面板用来查看和调试数据绑定变量.建议当读者遇到数据绑定相关问题时,首先打开这个面板查看具体的数据绑定情况.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 3]  
值得一提的是,data对象的属性可以是简单的文本和数字,也可以是一个对象或者数组.

### 数据绑定更新 ###

还可以用`setData`函数来做数据绑定.这种方法可以理解韦"数据更新". 大多数情况下,我们使用`this.setData`的方式来调用这个函数.  
`setData`的参数结构一个`对象`,以`key`和`value`的 形式将page下`data对象`中的key对应的内容设置成value. 这样说可能有点难以理解,下面举个具体的例子  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 4]  
在上面这个例子中,在data对象里,title属性的值为"小时候的冰棍儿和雪糕",然后我们用了setData函数把title属性更新为"令人怀念的冰棍",同时其他属性的值保持不变.

我们还可以更进一步,把data里的属性全都放到setData函数里.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 5]  
或者,把数据存到一个对象里,然后在setData函数里引用这个对象

[https_pan.baidu.com_s_1cxQXie]: https://pan.baidu.com/s/1cxQXie%EF%BC%8C
[https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70]: /images/20220321/b3e364d6cc934ae88392ca980ff7c771.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190131164822585.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 2]: /images/20220321/ef5bb3a1a3f843f0818f1da982f2d829.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 3]: /images/20220321/8160a1dc2a93407192e63dc579762ff6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 4]: /images/20220321/f5a186a8ba2a429eb6c935cef8dcd540.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbl96dW8_size_16_color_FFFFFF_t_70 5]: /images/20220321/bd511c468e20447cbea7ba98b6e5ef66.png