【小程序开发0基础】黑马程序员微信小程序开发02

本文是笔者自己学习过程中的笔记，仅记录，如需参考，留赞自取即可。可能存在疏漏等，敬请指正。如有侵权，可联系删文。结合黑马程序员的视频和ppt更易理解。

如果有HTML/CSS/Javascript基础，了解过vue框架阅读会更加流畅。通过阅读本文可以快速掌握小程序开发基础，从页面渲染到网络请求全流程梳理！涵盖 WXML 数据绑定与事件处理、WXSS 样式语法、全局 / 页面配置优化及网络请求实战技巧，适合新手入门与开发者查漏补缺，助力高效构建小程序页面。

一、WXML 模板语法

1. 数据绑定

• 定义数据：在页面 .js 的 data 对象中声明（如 data: { msg: "Hello" }）。
• 使用方式：通过 {{变量名}} 渲染，支持以下场景：
  • 内容绑定：{{text}}
  • 属性绑定：
  • 运算绑定：
    • 三元运算：{{score >= 60 ? '及格' : '不及格'}}
    • 算术 / 字符串运算：{{a + b}} {{name + '您好'}}

2. 事件绑定

• 作用：连接渲染层（WXML）与逻辑层（JS），传递用户行为数据。
• 核心事件：
  • bindtap（点击事件）：
    • 传参：通过 data-自定义参数（如 点击），在 JS 中用 event.target.dataset.id 接收。
    • 数据更新：通过 this.setData({ 变量: 值 }) 触发页面重新渲染。
  • bindinput（输入事件）：实现双向绑定，如：

    handleInput(e) {
      this.setData({ inputText: e.detail.value }); // e.detail.value 为输入内容
    }
    

• 事件对象：
  • target：触发事件的源头组件（可能是子组件）。
  • currentTarget：当前绑定事件的组件（父组件，常用于事件委托）。

3. 条件渲染

• wx:if 系列（动态创建 / 移除节点，类似 v-if）：

  
    男
  
  
    女
  
  
    保密
  
  

• hidden（切换样式 display: none，类似 v-show）：

• 区别：wx:if 适合不频繁切换的场景（性能更高），hidden 适合频繁显示 / 隐藏（保留节点）。

4. 列表渲染

• wx:for：遍历数组渲染结构，默认索引 index、当前项 item，可自定义别名：

  
    第{{idx + 1}}项：{{itemData.name}}
  
  

• 注意：需为列表项添加唯一 key（如 wx:key="id"），提升渲染性能。

二、WXSS 样式语法

1. 尺寸单位 rpx

• 适配原理：将屏幕宽度等分为 750 份（如 iPhone 6 宽度 375px → 1rpx=0.5px），自动适应不同屏幕尺寸。
• 使用场景：推荐以 iPhone 6 为设计稿标准，直接按像素值的一半写 rpx（如 30px → 60rpx）。

2. 样式导入

• 全局样式：在 app.wxss 中定义，作用于所有页面，优先级低于局部样式。
• 局部样式：在页面 .wxss 中定义，仅作用于当前页面。
• 导入公共样式：

  /* 在页面 wxss 中导入 */
  @import "/styles/common.wxss";
  

3. 选择器

支持类选择器（.class）、标签选择器（view）、ID 选择器（#id）等，优先级与 CSS 一致。

三、全局配置 app.json

1. 页面路由

• pages：配置小程序所有页面路径（第一项为首页），如：

  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ]
  

2. 窗口配置 window

设置导航栏、状态栏等外观，常用配置：

"window": {
  "navigationBarTitleText": "小程序标题",  // 导航栏标题
  "navigationBarBackgroundColor": "#ffffff", // 导航栏背景色
  "enablePullDownRefresh": true, // 启用下拉刷新（全局）
  "navigationStyle": "custom" // 自定义导航栏（需配合 `navigation-bar` 组件）
}

3. 底部标签栏 tabBar

配置底部导航（最多 5 个标签），需指定页面路径、图标及文字：

"tabBar": {
  "color": "#999", // 未选中图标/文字颜色
  "selectedColor": "#ff0000", // 选中颜色
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/home.png", // 未选中图标
      "selectedIconPath": "icons/home-active.png" // 选中图标
    }
  ]
}

四、页面配置 page.json

覆盖全局配置，实现个性化设置（如当前页面禁用下拉刷新）：

{
  "navigationBarTitleText": "详情页", // 单独设置当前页导航标题
  "enablePullDownRefresh": false // 关闭当前页下拉刷新
}

五、网络数据请求

1. 基础用法 wx.request

// 在页面 JS 中发起请求
Page({
  onLoad() {
    wx.request({
      url: "https://api.example.com/data", // 需在小程序后台配置合法域名
      method: "GET", // 请求方法（GET/POST等）
      data: { id: 1 }, // 请求参数
      success: (res) => {
        this.setData({ list: res.data }); // 将数据存入 data 并更新页面
      },
      fail: (err) => {
        console.error("请求失败：", err);
      }
    });
  }
});

2. 注意事项

• 合法域名：需在 微信公众平台 配置服务器域名，否则请求会被拦截。
• 异步处理：请求为异步操作，需通过 success 回调处理数据。
• 封装优化：可封装公共请求函数（如处理加载动画、错误提示），提高复用性。

六、知识对比

功能	WXML 语法	对比 / 注意点
条件渲染	wx:if vs hidden	wx:if 动态创建节点，hidden 切换样式，按需选择。
列表渲染	wx:for + wx:key	必须添加唯一 key，提升 Diff 效率。
样式适配	rpx 单位	以 iPhone 6 为基准，简化多设备适配。
事件传参	data-* 自定义属性	通过 event.target.dataset.参数 接收，避免直接传参。
配置优先级	page.json > app.json	页面配置覆盖全局配置，局部样式覆盖全局。