小程序数据绑定

最新推荐文章于 2024-03-28 14:45:00 发布

有所执着

最新推荐文章于 2024-03-28 14:45:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lljxk2008/article/details/81096589

本文介绍了小程序中数据绑定的概念，讲解了如何将JavaScript中的数据绑定到WXML页面上，通过{{}}表达式进行数据展示，并利用wx:if、wx:else、block标签进行条件控制。还探讨了数据绑定中的对象使用、简单的运算和判断操作，以及如何通过临时修改AppData区的数据进行快速调试。此外，文章提到了小程序的渲染层与逻辑层的分离，渲染层在webView进程中运行，每个页面都有独立的webViewId，而逻辑层运行在jsCore进程中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序的数据绑定是指将页面中要使用的数据, 从js中读取过来, 即将js中的数据绑定到页面中

在.js文件中定义些数据, 比如:

mo, userid, showInfo等

Page({
  data: {
    mo: 'Hello World!!',
    userid : '123214',
    userInfo: {},
    hasUserInfo: false,
    showInfo: true,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },

在小程序中页面的显示内容是.wxml文件的数据, 使用{{}} 获取 js的data中对应的数据

<!--index.wxml-->
<view class="container">
  <view class="usermotto">
    <text class="user-motto" id="user_{{userid}}">{{mo}}</text>
  </view>

  <view wx:if="{{showInfo}}">显示A</view>
  <view wx:else>显示B</view>

  <block wx:if="{{showInfo}}">
    <view>显示</view>
    <view>显示</view>
  </block>
  
</view>

wx:if ... wx:else是条件判断

block标签可同时作用多个view, 要全部显示或全不显示

每一个组件都有一个叫hidden的属性, 也可以用来控制隐藏或显示

<view hidden='{{userid == 1234}}'>为真则隐藏, 为假则显示</view>

数据绑定也可以使用对象:

Page({
  data : {
    "obj" : {
      "name" : "霸王别姬",
      "age" : 1997
    },
    "count" : 100000,
    "score":95
  }
});

绑定数据:

<view>{{obj.name}}</view>

使用{{}}做数据绑定, 还可以做简单的运算, 判断操作

<view>{{score>=60 ? "及格" : "不及格}}</view>

<view>{{score+count}}</view>

使用数据绑定就可以灵活改变页面中的部分数据, 从而根据数据改变页面展示的内容

在AppData区内, 可以临时改变数据来观察效果:

比如这里的score的值就可以直接改, 从而可以快捷方便地观察页面的展示效果, 方便调试

这里还有一个数据 _webviewId_ 是系统加上去的, 表示使用的进程(每编译一次, 这个数据就会自动加1)

渲染层和逻辑层:

渲染层包括wxml和wxss, 运行在webView进程之中中

渲染层的每一个页面都是运行在独立的webView进程中

上面有这个_webviewId_ 表示当前页面运行在id为88的webView进程中

每次编译都会使用不同的webView进程

而逻辑层包括js, 运行在jsCore进程中