认识小程序-(网络请求)数据渲染-五八三

小程序模板语法-数据绑定

在页面中渲染数据时所用到的一系列语法叫做模板语法，对应到 Vue 中就是指令的概念。

数据绑定

把数据和模板联系起来的操作。

在js中定义数据

Page({

  data: {



    isOpen: true,
    message: 'hello world!'
  }
})

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

在模块中获取使用数据

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

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

<!-- 数据绑定 -->
<view class="binding">
  <!-- 开关组件 -->
  <switch checked="{{isOpen}}"/>
  <view class="message">{{message}}</view>
</view>

{{ }} 内写的是表达式

<view>{{ 1 + 1 }}</view>
<view>{{ 1 ? '男' : '女'}}</view>
<view>{{ false || '你好'}}</view>

简易双向绑定

小程序中提供了 model:value="{{数据名}}" 语法来实现双向的数据绑定
目前只能用在 input 和 textarea 组件中。

双向绑定的问题

只能是一个单一字段的绑定，如:

Page({


  data: {



    obj: {
      message: ''
    }
  }
})

下面的情况不生效！！！

<view>
    输入框：<input type="text" model:
          value="{{obj.message}}" />
  </view>

小程序修改数据

<元素 bind:事件名="处理函数"/>

更新数据

this.setData({
  属性名1： 新值1，
  属性名2： 新值2
})



this.setData({
  "属性1.属性2": 值
})

模板语法—条件渲染

条件渲染的两种方式

小程序中的条件渲染的方式有两种

wx:if

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

hidden

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

<text>pages/wxif/index.wxml</text>


<!-- 条件渲染 wx:if 和 wx:else -->
<view class="welcome">
  <text wx:if="{{isLogin}}">大师兄</text>
  <text wx:else>游客</text>你好:
</view>


<!-- 条件渲染 wx:if  wx:elif和 wx:else -->
<view wx:if="{{gender === 1}}">
  男
</view>
<view wx:elif="{{gender === 0}}">
  女
</view>
<view wx:else>
  未知
</view>

<!-- 条件渲染 hidden -->
<view class="loading">
  <!-- 可以单独使用 -->
  <!-- <text wx:if="{{!loaded}}">正在加载...</text> -->
  <text hidden="{{loaded}}">正在加载...</text>
</view>

wx:if vs hidden

区别

1. wx:if是通过动态创建或移除元素来控制元素是否可见
2. hidden 是通过样式(none/block)来控制元素是否可见

要点

如果一个标签频繁切换显示，建议使用 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="{{list}}"
	wx:for-item="value"
	wx:for-index="key"
>
	{{key}}-{{value}}
</view>

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

key的作用

提高列表渲染时的效率

key的用法

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

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

小程序内置API-网络请求

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

网络请求

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

wx.request({
  url: '这里是接口的地址',
  method: '这里是请求的方法',
  data: '请求时提交的数据',
  header: {/* 请求头信息 */},
  success: () => {/* 成功的回调 */},
  fail: () => {/* 失败的回调 */},
  complete: () => {/* 成功或失败的回调 */}
})

直接请求会导致请求失败,开发情况下可设置:

也可以在开发管理中设置服务器域名:

一般情况下开发人员不需要设置服务器域名了解即可~

小程序内置api-界面交互

showLoading效果

配合网络请求来使用

wx.showLoading 显示 loading 提示框

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

hideLoading

wx.hideLoading 隐藏 loading 提示框

showToast

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

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

微信小程序本地存储

wx.setStorageSync(key, value) 存入一个数据，复杂类型数据不需要 JSON.stringify 处理
wx.getStorageSync(key) 读取一个数据，复杂类型数据不需要 JSON.parse 处理
wx.removeStorageSync(key) 删除一个数据
wx.clearStorageSync()清空全部数据

微信小程序API的特征

小程序中提供的 API 数量相当的庞大，很难也没有必要将所有的 API 全部掌握，在使用的过程中，我们一般通过查文档的方式来学习。

不过，API有一些共性的特点，掌握了这些特点，将非常有利于我们的开发。

API的用法分类

分成三类：

同步的api（少量）
异步的api（大量）

1. 支持promise的api

同步 API

部分 API 支持以同步方式获取结果，这些 API 的名称都以 Sync 结尾。如

wx.getStorageSync : 获取本地存储
wx.getSystemInfoSync: 获取系统信息

基本格式：

const result = wx.api名称()

异步 API

绝大部分的 API 都是异步方式，通过回调函数获取 API 执行的结果

success API 调用成功时执行的回调
fail API 调用失败时执行的回调
complete API 调用结束时执行的回调（无论成功或失败）

基本格式：

wx.api名称({success(res){ console.log(成功执行api的结果) }})

例如： wx.request, wx.showLoading

支持promise的api

部分异步的 API 也支持以 Promise 方式返回结果，此时可以配合 asyc/await 来使用。

例如：

支持Promise格式的异步api有：

wx.getSystemInfo()
wx.getStorage

不支持Promise格式的异步api有：

wx.request()

事件处理-事件对象&传参

事件对象

前面已经介绍过小程序事件监听的语法：bind:事件类型=事件回调，当对应的事件发生时，小程序就会自动去调用这个事件回调函数，并自动把事件对象传进去。即：回调函数第1个参数即为事件对象。

事件对象中包括了很多有用的信息：

<button bind:tap="eventHandler">点击我看看</button>


Page({
  eventHandler(ev) {
    // 查看事件对象
    console.log(ev)
  }
})

事件回调传参

但是小程序的事件回调不支持传参数！例如，我希望调用eventHandler时，把100这个值传给回调函数，下面的代码是不对的。

<button bind:tap="eventHandler(100)">点击我看看</button>

因此要将模板中的数据传递到事件回调中就必须要通过事件对象来实现。

方式1：

补充参数 <button bind:tap="eventHandler" mark:属性名="值" >点击我看看</button>
获取值：eventHandler(ev){ console.log(ev.mark.属性名) }

方式2：

补充参数 <button bind:tap="eventHandler" data-属性名="值" >点击我看看</button>
获取值：eventHandler(ev){ console.log(ev.target.dataset.属性名) }

事件处理-组件事件

组件事件

事件类型只属于某个组件，我们将其称为组件事件

前面介绍的 tap 事件可以在绝大部分组件中监听，我们可以将其理解为通用事件类型，然而也有事件类型只属于某个组件，我们将其称为组件事件。

组件不同，支持的事件也不同

`scroll-view` 组件中的事件

bind:scrolltolower 当滚动内容到达底部或最右侧时触发
bind:refresherrefresh 执行下拉操作时触发

另外，还有注意一个特别的属性

refresher-triggered 用它来控制下拉刷新状态

演示代码-上拉加载更多 -下拉刷新

模板

<scroll-view 
    refresher-triggered="{{isPulling}}"
  bindrefresherrefresh="onPulltoRefresh"
  bindscrolltolower="onScrolltoButtom" 
    scroll-y refresher-enabled class="content">


    <view wx:for="{{6}}" wx:key="*this" class="item"></view>
    
  </scroll-view>

Page({

  data: {



    isPulling: false
  },

  
  onScrolltoButtom() {
    console.log(1)
    wx.request({
      url: 'https://hmajax.itheima.net/api/books',
      data: {
        creator: '张三'
      },
      complete: () => {
        wx.showToast({
          title: '加载OK',
        })
      }
    })
  },
  onPulltoRefresh() {
    console.log('下拉刷新')
    this.setData({ isPulling: true })
    wx.request({
      url: 'https://hmajax.itheima.net/api/books',
      data: {
        creator: '张三'
      },
      complete: () => {
        wx.showToast({
          title: '加载OK',
        })
        this.setData({ isPulling: false })
      }
    })
  }
})

事件处理-表单组件中的事件

如何获取表单中，用户选择的值？

input: 简易双向绑定
radioGroup: 绑定change事件，在事件对象中detail.value拿到值
checkboxGroup: 绑定change事件，在事件对象中detail.value拿到值
picker: 绑定change事件，在事件对象中detail.value拿到值

change 表单数据发生改变时触发（input 不支持）

整体表单提交

form: submit事件 表单提交时触发，button 按钮必须指定 form-type 属性

生命周期-页面生命周期

生命周期介绍

定义

- 一个组件或者页面生老病死的过程
- 一组会在特定时期触发的函数

分类

- 应用生命周期
- 页面生命周期
- 组件生命周期 (暂不介绍)

生命周期是一些名称固定，会自动执行的函数。

页面生命周期-基本使用

onLoad 在页面加载完成时执行，只会执行 1 次，常用于获取地址参数和网络请求
onShow 在页面处于可见状态时执行，常用于动态更新数据或状态
onHide 在页面处于不见状态时执行，常用于销毁长时间运行的任务，如定时器

Page({


  onLoad(){
    console.log('生命周期页面， 加载完成')  
  },

  onReady(){
    console.log('生命周期页面， 页面初次渲染完成')  
  },
  onShow(){
    console.log('生命周期页面， 处于可见状态')  
  },
  onHide(){
    console.log('生命周期页面， 处于不可见状态')  
  }
})

页面生命周期-应用场景

onLoad(){ // 发起请求 }

onShow(){ // 动态更新数据或状态 }

onHide 在页面处于不见状态时执行，常用于销毁长时间运行的任务，如定时器

onReady 在页面初次渲染完成时执行，只会执行 1 次，常用于节点操作或动画交互等场景

生命周期-应用生命周期

onLaunch 小程序启动时执行1次，常用于获取场景值或者启动时的一些参数（如自定义分享）
onShow 小程序前台运行时执行，常用于更新数据或状态
onHide 小程序后台运行时执地，常用于销毁长时间运行的任务，如定时器。

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

前端
# 前端

认识小程序-(网络请求)数据渲染