微信小程序开发③ - 核心语法

204 阅读5分钟

核心语法包括: 数据驱动原则、常用事件和属性列表、事件传参、实现【双向数据绑定】、条件渲染、列表渲染、配置文件解读、数据请求、异步编程方案、生命周期、pullToRefresh、页面跳转

1. 数据驱动原则

1.1. 什么是数据驱动

当数据发生变化时,视图理应发生变化

1.2. 小程序中如何完成数据绑定

① 在 data 中定义数据

② 在 wxml 中通过 {{}} 使用数据

2. 常用事件和属性列表

2.1. 如何为按钮添加点击事件?

bandtap || band:tap

2.2. 如何修改 data 中数据的值?

通过 this.setData({}) 定义新的值

通过 this.data 访问具体的值

3. 事件传参

3.1. 如果想要在【点击事件中】传递参数,需要怎么做?

① 通过属性绑定(data-xx)的形式,把需要传递的参数绑定到 当前DOM 元素中

② 在对应的回调函数中,通过 e.target.dataset 进行访问

4. 实现【双向数据绑定】

4.1. 什么叫做双向数据绑定?小程序中如何实现双向数据绑定?

双向数据绑定就是“当视图发生变化时,数据跟随发生变化;当数据发生变化时,视图跟随发生变化”

通过 value 为 input 视图绑定数据

通过监听 bindinput 获取视图的变化,在回调方法中修改数据

5. 条件渲染

5.1. v-if 和 hidden 的区别是什么?

v-if 用来控制 【组件是否会被渲染】

hidden 用来控制 【组件是否会被隐藏】

一般来说,wx:if 有更高的切换消耗,而 hidden 有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变,则 wx:if 较好。

6. 列表渲染

6.1. 使用 wx:for 时,当前项的【下标变量名】和【当前项变量名】默认分别是什么?block组件是否会被渲染?

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item;block 只是一个包裹性质的容器,不会被渲染。

7. 配置文件解读

  1. app.json

index 页面、list 页面

  1. 页面.json

8. 数据请求

8.1. 小程序中数据请求有什么限制?如何解决这种限制?

限制:只能请求 HTTPS 类型的接口;必须将接口的域名添加到新人列表中

解决方案:

① 生产环境:将想要请求的域名协议【更改为 HTTPS】并 【添加到域名信任列表】

② 开发环境:通过勾选“不校验合法域名,webview业务域名),tls版本以及htps证书”

8.2. 小程序的数据请求会存在跨域问题吗?为什么?

不会,跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域问题。

8.3. 小程序的数据请求可以叫做 ajax 请求吗?为什么?

不可以。ajax 的核心是依赖于 【浏览器端】的 XMLHttpRequest 对象。

小程序的宿主环境不是浏览器,而是微信客户端,所以小程序的数据请求不可以叫做 ajax 请求。

9. 异步编程方案

9.1. promise 是如何解决回调地狱的问题的?

通过 .then 的方式进行 链式调用

9.2. Promise 的状态分为几种,分别是什么?

  1. 待定(pending):初始状态,既没有被兑现,也没有被拒绝
  2. 已兑现(fulfilled):意味着操作成功完成
  3. 已拒绝(rejected):意味着操作失败

9.3. 如何让 Promise 变成已兑现(fulfilled)的状态,如何接收已兑现(fulfilled)的结果

  • 通过 resolve 可以把 Promise 的状态,从【待定(pending)】转变为【已兑现(fulfilled)】
  • 通过 promise 实例 .then 方法可以接收 已兑现(fulfilled)的结果

9.4. async 和 await 的作用是什么?

  • async 和 await 可以简化 promise 操作
  • 使 promise 的异步操作拥有 同步写法

9.5. 使用 await 的注意事项是什么?

await 必须在被 async 标记的函数中使用

9.6. 如何使 wx.request 配合 async 和 await 使用?

  • 使用 promise 封装 wx.request 请求
  • 使用 async 和 await 简化 promise 的操作

10. 生命周期

10.1. 什么是生命周期?什么是生命周期函数?

  • 所谓 生命周期 就是:一件事物由 创建 到 销毁 的全过程
  • 在这个过程中会有很多“关键的时刻”,这些关键的时刻就是 生命周期函数

10.2. onReady 的调用时机是什么?

页面初次渲染完成后调用。我们可以在这里从服务端获取数据

11. pullToRefresh 下拉刷新与上拉加载

11.1. 如何开启下拉刷新

对页面对应的 json 文件中通过“enablePullDownRefresh”: true 开启

11.2. 在 onPullDownRefresh 中,一般进行什么操作

  • 重置页数
  • 重置数据源
  • 关闭下拉动画

11.3. 在 onReachBottom 中,一般进行什么操作

  • 判断数据是否已经加载完成
  • 自增页数
  • 累加数据

12. 页面跳转

12.1. 页面跳转的方式有哪几种?

  • 声明式导航
  • 编程式导航

12.2. 跳转到 【tabbar】页面和【非 tabbar】页面的方式分别是什么?

  1. 声明式导航
  • <navigator open-type="navigate"(默认可不指定) url="xx" />
  1. 编程式导航
  • wx.switchTab({ url: 'xx' })
  • wx.navigateTo({ url:'xx' })

12.3. 如何进行导航传参

【小程序】的导航传参遵循:get 请求的标准

  • 以 ? 分割 url 和参数
  • 以 = 连接参数的 key 和 value
  • 以 & 来拼接参数