核心语法包括: 数据驱动原则、常用事件和属性列表、事件传参、实现【双向数据绑定】、条件渲染、列表渲染、配置文件解读、数据请求、异步编程方案、生命周期、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. 配置文件解读
index 页面、list 页面
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 的状态分为几种,分别是什么?
- 待定(pending):初始状态,既没有被兑现,也没有被拒绝
- 已兑现(fulfilled):意味着操作成功完成
- 已拒绝(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】页面的方式分别是什么?
- 声明式导航
- <navigator open-type="navigate"(默认可不指定) url="xx" />
- 编程式导航
- wx.switchTab({ url: 'xx' })
- wx.navigateTo({ url:'xx' })
12.3. 如何进行导航传参
【小程序】的导航传参遵循:get 请求的标准
- 以 ? 分割 url 和参数
- 以 = 连接参数的 key 和 value
- 以 & 来拼接参数