【web】微信小程序笔记小结（模板与配置）

news2024/11/28 2:50:53

来源：黑马程序员前端微信小程序开发教程

I. WXML 模板语法

① 数据绑定

※※ 基本原则

※※ 在 data 中定义数据

※※ 在 WXML 中使用数据

※※※※ Mustache 语法的格式

※※※※ Mustache 主要应用场景

1）动态绑定内容

2）动态绑定属性

3）运算(三元运算、算术运算等)

※※❀ 三元运算

※※❀ 算术运算

② 事件绑定

※※ 事件概念

※※ 常用事件

※※ 事件对象的属性列表

※※ target 和 currentTarget 的区别

※※ bindtap 的语法格式 🚀

※※ 在事件处理函数中为 data 中的数据赋值

③ 事件传参

※※ 概念

※※ bindinput 的语法格式 🚀

※※ 实现文本框和 data 之间的数据同步

※※※※ 步骤

※※※※ 各部分代码

1）wxml

2）wxss

3）js

※※※※ 预览图

④ 条件渲染

※※ wx:if

※※ 结合< block >使用 wx:if

※※ hidden

※※ wx:if 与 hidden 的对比

⑤ 列表渲染

※※ wx:for

※※※※ 手动指定索引和当前项的变量名（用得少）

※※ wx:key 的使用

II. WXSS 模板样式

① WXSS 与 CSS 的关系

※※ WXSS 概念

※※ 关系及WXSS拓展特性

② rpx 单位

※※ 概念

※※ 实现原理

※※ rpx 与 px 之间的单位换算（用得少）

③ 样式导入

※※ 概念

※※ @import 的语法格式

④ 全局样式和局部样式

※※ 概念

※※ 全局配置文件及常用的配置项

※※※※ window

1）小程序窗口的组成部分

2）window 节点常用的配置项

※※✿ 导航栏

（1）设置导航栏の标题

（2）设置导航栏の背景色

（3）设置导航栏の标题颜色

（4）全局开启下拉刷新功能

（5）设置下拉刷新时窗口の背景色

（6）设置下拉刷新时 loading の样式

（7）设置上拉触底的距离

※※✿ tabBar

（1）概念

（2）组成部分

※※✿✿ 各部分名称

（3）tabBar 节点的配置项

（4）每个 tab 项的配置选项

（5）案例 → 配置 tabBar

⑤ 页面配置

※※ 作用

※※ 页面配置和全局配置的关系

※※ 页面配置中常用的配置项

III. 网络数据请求

① 小程序中网络数据请求的限制

② 配置 request 合法域名

③ 发起 GET 请求

④ 发起 POST 请求

⑤ 在页面刚加载时请求数据

⑥ 跳过 request 合法域名校验

⑦ 关于跨域和 Ajax 的说明

⑧ 案例-本地生活（首页）【还没写】

I. WXML 模板语法

① 数据绑定

※※ 基本原则

1）在 data 中定义数据

2）在 WXML 中使用数据

※※ 在 data 中定义数据

※※ 在 WXML 中使用数据

※※※※ Mustache 语法的格式

※※※※ Mustache 主要应用场景

1）动态绑定内容

2）动态绑定属性

3）运算(三元运算、算术运算等)

※※❀ 三元运算

※※❀ 算术运算

② 事件绑定

※※ 事件概念

※※ 常用事件

※※ 事件对象的属性列表

标红的常用，后面有详解

※※ target 和 currentTarget 的区别

※※ bindtap 的语法格式 🚀

※※ 在事件处理函数中为 data 中的数据赋值

③ 事件传参

※※ 概念

※※ bindinput 的语法格式 🚀

※※ 实现文本框和 data 之间的数据同步

※※※※ 步骤

1）定义数据

2）渲染结构

3）美化样式

4）绑定 input 事件处理函数

※※※※ 各部分代码

1）wxml

<!--index.wxml-->
<input value="{{msg}}" bindinput="iptHandler"></input>

2）wxss

input {
  border: 5px solid rgb(38, 123, 235);
  margin: 5px;
  padding: 5px;
  border-radius: 3px;
}

3）js

// index.js
// 获取应用实例
const app = getApp()

Page({
    data: {
      info: 'hello world',
      imgSrc: 'http://www.itheima.com/images/logo.png',
      randomNum1: Math.random() * 10,
  randomNum2: Math.random().toFixed(2),
  count: 0,
  msg: '你好'
},
//文本框内容改变的事件
iptHandler(e) {
  this.setData({
    //通过 e.detail.value获取到文本框最新的值
    msg: e.detail.value
  })
}
})