数据绑定

在 js 中定义数据

Page({
  data: {
    isOpen: true,
    message: 'hello world!'
  }
})

小程序的data是一个对象，不同于vue的data是一个函数

在模块中获取使用数据

小程序中使用 {{}} 实现数据与模板的绑定

1. 内容绑定：<view>{{ 属性名 }}</view>
2. 属性绑定: <input value="{{属性名}}" />

简易双向绑定

什么是双向绑定呢?

接下来我来演示一个案例,让input框里面写了我们想要的东西后,按钮会自动变成 true

 // wxml 代码

<!-- 数据绑定 -->
<view class="binding">
  <!-- 开关组件 -->
  <switch checked="{{message==='hello'}}" />
  <!-- 双向数据绑定 -->
  <view>
    输入框：<input type="text" model:value="{{message}}" />
  </view>
  <view>输入的内容是：</view>
  <view class="message">{{message}}</view>
</view>

 // js 代码
 Page({
  data: {
    message: ''
  }
})

双向绑定还有一个问题,只能单一字段,比如:

Page({
  data: {
    obj: {
      message: ''
    }
  }
})

---

<view>
    输入框：<input type="text" model:value="{{obj.message}}" />
  </view>
  // 这样代码就不会运行了

所以不能用 对象.属性名,有且还会报一个错误

意思就是说双向绑定目前不支持复杂的数据路径,这种双向绑定将被忽略.

模板语法-条件渲染

掌握小程序的条件渲染语法

条件渲染的两种方式

1. wx:if

   • 在小程序中，使用wx:if="{{条件}}"来判断是否需要渲染该代码块
   • 也可以用wx:elif 和 wx:else来添加else判断

2. hidden

   • 在小程序中，使用hidden="{{条件}}"也能控制元素的显示与隐藏
   • 条件为true则隐藏，否则则显示

wx:if vs hidden

1. 区别

a. wx:if是通过动态创建或移除元素来控制元素是否可见

b. hidden 是通过样式(none/block)来控制元素是否可见

1. 要点

• 如果一个标签频繁切换显示，建议使用 hidden。例如：折叠面板，抽屉面板等等
• 如果不频繁切换，建议使用wx:if，它有更好的初始化性能。

模板语法—列表渲染—基础

掌握小程序列表渲染

列表渲染简介

使用小程序中列表渲染技术，可以很方便的将数组中的数据显示到页面中。

wx:for 用来重复渲染组件内容。

Page({
  data: {
    history: ['苹果', '华为', 'OPPO', '三星'],
    students: [
      {id: 1, name: '贺洋', age: 20, gender: '男', level: '菜鸟'},
      {id: 2, name: '唐刚', age: 18, gender: '女', level: '笨鸟'},
      {id: 3, name: '常超', age: 20, gender: '女', level: '老鸟'}
    ]
  }
})


<元素 wx:for="{{列表数据}}" >
   <!-- 
    wx:for 结构内可以使用两个变量
      （1）item：   循环项
      （2）index：  循环索引
    -->
   {{item}}, {{index}}
</元素>

如图,会更好理解

基础用法

<view wx:for="{{history}}"> {{index}}-{{item}} </view>
	<!-- 
	wx:for 结构内可以使用两个变量
		item  循环项
  	index  循环索引
  -->
  

模板语法-列表渲染-wx:key

掌握小程序列表渲染key的使用

key的作用

提高列表渲染时的效率

key的用法

wx:key 针对不同的数组类型有不同的写法

• 普通数组 wx:key="*this"
• 数组对象 wx:key="具有唯一性的某个属性名"

小程序内置API-网络请求

内置 API 实际上就是小程序提供的一系列的方法，这些方法都封装在了全局对象 wx 下，调用这些方法实现小程序提供的各种功能，如网络请求、本地存储、拍照、录音等。

网络请求

调用 wx.request 能够在小程序中发起网络请求与后端接口进行数据的交互，其语法格式如下：

 // wx.request({
  url: '这里是接口的地址',
  method: '这里是请求的方法',
  data: '请求时提交的数据',
  header: {/* 请求头信息 */},
  success: () => {/* 成功的回调 */},
  fail: () => {/* 失败的回调 */},
  complete: () => {/* 成功或失败的回调 */}
})  //
------------------------------------------------------
Page({
  data: {
    books: []
  },
  // 调用数据接口的方法
  getBooks() {
    // 调用小程序的 API 发起请求
    wx.request({
      url: 'https://hmajax.itheima.net/api/books',
      method: 'GET',
      data: {
        creator: 'zhangsan'
      },
      success: (result) => {
        // 更新数据，渲染页面
        this.setData({ books: result.data.data })
      }
    })
  }
})

配置网络请求合法域名

域名必须是https

如果只是看看效果可以进行以下操作

这样请求就可以发出去得到结果了

小程序内置api-界面交互

showLoading效果

配合网络请求来使用

wx.showLoading 显示 loading 提示框

• title 文字提示内容
• mask 是否显示透明蒙层，防止触摸穿透

hideLoading

• wx.hideLoading 隐藏 loading 提示框

showToast

wx.showToast 消息提示框（轻提示）

• title 提示的标题
• mask 是否显示透明蒙层，防止触摸穿透
• duration 延迟时间（提示框显示多久，单位是毫秒）
• icon 指定图标，none 不使用图标

操作

1. 发请求之前，showLoading
2. 请求结束之后（无论成败），hideLoading
3. 数据渲染成功之后，showToast