【微信小程序开发】入门Day2 —— 从视图逻辑到配置请求全方位解析

计时开始不睡觉

于 2024-10-01 16:35:50 发布

阅读量358

点赞数 9

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/2303_76696898/article/details/142671918

版权

1. WXML 模板语法

数据绑定
```

Page({
  data: {
    // 字符串类型数据
    info: 'Hello, World!',
    // 数组类型数据
    msgList: [
      {msg: 'Apple'},
      {msg: 'Banana'}
    ]
  }
})

<view>{{info}}</view>
<view>{{msgList[0].msg}}</view>
```
- 基本原则：在data中定义数据，在WXML中使用Mustache语法（双大括号）绑定数据。
- 数据定义：在页面对应的.js文件中，将数据定义在data对象里，可包含字符串、数组等类型。
- 应用场景：包括绑定内容、绑定属性以及进行运算（三元运算、算术运算等）。

事件绑定

<!-- 在WXML文件中 -->
<button bindtap="handleTap">点击我</button>
<input bindinput="handleInput" />
<checkbox bindchange="handleChange" />

<!-- 在页面对应的.js文件中 -->
Page({
  handleTap: function(event) {
    console.log('点击事件被触发', event);
  },
  handleInput: function(event) {
    console.log('输入框内容改变', event.detail.value);
  },
  handleChange: function(event) {
    console.log('复选框状态改变', event.detail.value);
  }
})

事件概念：是渲染层到逻辑层的通讯方式，用于处理用户在渲染层的行为。
常用事件：如bindtap（类似click）、input（文本框输入）、change（状态改变）等。
事件对象：包含type、timeStamp、target、currentTarget等属性。
事件传参：通过data-*自定义属性传参，在事件处理函数中通过event.target.dataset.参数名获取参数值。

条件渲染

<!-- wx:if -->
<view wx:if="{{isVisible}}">我是根据条件显示的元素</view>
<view wx:elif="{{isAnotherCondition}}">我是另一个条件下显示的元素</view>
<view wx:else>我是其他情况显示的元素</view>

<!-- 结合<block>使用wx:if -->
<block wx:if="{{isBlockVisible}}">
  <view>我是<block>中的第一个元素</view>
  <view>我是<block>中的第二个元素</view>
</block>

<!-- hidden -->
<view hidden="{{isHidden}}">我是根据hidden属性隐藏或显示的元素</view>

wx:if：根据条件判断是否渲染代码块，可搭配wx:elif和wx:else。
结合<block>：使用<block>标签包裹多个组件，在<block>上使用wx:if控制展示与隐藏。
hidden：通过设置hidden="{{ condition }}"控制元素显示与隐藏，与wx:if相比，运行方式和使用场景有所不同。

列表渲染

<!-- 在页面对应的.js文件中 -->
Page({
  data: {
    userList: [
      {id: 1, name: '张三'},
      {id: 2, name: '李四'}
    ]
  }
})
<!-- 在WXML文件中 -->
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

wx:for：根据指定数组循环渲染组件，默认索引为index，当前项为item，也可手动指定变量名。
wx:key：建议为列表项指定唯一key值，提高渲染效率。

2. WXSS 模板样式

WXSS 简介：是用于美化WXML组件样式的语言，类似CSS，具有CSS大部分特性，并进行了扩充和修改。
rpx 尺寸单位
```
/* 在.wxss文件中 */
.example {
  width: 100rpx;
  height: 50rpx;
  background-color: red;
}
```
- 定义：微信小程序独有的解决屏适配的尺寸单位，将屏幕宽度等分为 750 份。
- 换算原理：在不同设备上会自动换算成像素单位，如在iPhone6上1rpx = 0.5px。

样式导入：

/* common.wxss文件 */
.common-style {
  color: blue;
  font-size: 14px;
}

/* 在页面的.wxss文件中 */
@import "common.wxss";
.page-style {
  background-color: yellow;
}

使用@import语法导入外联样式表。

全局样式和局部样式
```
/* app.wxss文件（全局样式） */
.global-style {
  text-align: center;
}

/* 在页面的.wxss文件（局部样式） */
.local-style {
  color: green;
  font-weight: bold;
}
```
- 全局样式：定义在app.wxss中，作用于每一个页面。
- 局部样式：在页面的.wxss文件中定义，只作用于当前页面，当局部样式和全局样式冲突时，根据就近原则和权重覆盖。

3. 配置文件

全局配置

// app.json文件
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTextStyle": "white",
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "dark",
    "enablePullDownRefresh": false,
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "images/tabbar/logs.png",
        "selectedIconPath": "images/tabbar/logs_active.png"
      }
    ]
  }
}

配置文件：app.json是小程序的全局配置文件，常用配置项包括pages、window、tabBar、style等。
window 配置：可设置导航栏标题、背景色、标题颜色，以及窗口背景色、下拉刷新功能、上拉触底距离等。
tabBar 配置：用于实现多页面快速切换，可配置背景色、边框色、文字颜色、图标路径等，tabBar中只能配置 2 - 5 个tab页签。

页面配置
```
// 例如在pages/index/index.json文件
{
  "navigationBarTitleText": "首页",
  "navigationBarBackgroundColor": "#333333",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": true
}
```
- 配置文件作用：每个页面都有自己的.json配置文件，用于对当前页面的窗口外观、页面效果等进行配置。
- 与全局配置关系：当页面配置与全局配置冲突时，根据就近原则，以页面配置为准。

4. 网络数据请求

// 在页面的.js文件中
Page({
  onLoad: function () {
    wx.request({
      url: 'https://example.com/api/data', // 这里需要替换为合法的https接口
      method: 'GET',
      data: {
        param1: 'value1',
        param2: 'value2'
      },
      success: function (res) {
        console.log('请求成功', res);
      },
      fail: function (err) {
        console.log('请求失败', err);
      }
    });
  }
})

请求限制：只能请求HTTPS类型的接口，且必须将接口的域名添加到信任列表中。
配置域名：登录微信小程序管理后台进行request合法域名配置，域名需满足一定条件且有修改次数限制。
发起请求：使用wx.request()方法发起GET或POST请求，可在页面onLoad事件中请求数据。
跨域说明：小程序不存在跨域问题，因为宿主环境不是浏览器。

5. 页面导航

导航方式
- 声明式导航：使用<navigator>组件实现页面跳转。
```

<navigator url="/pages/tabbarPage/tabbarPage" open-type="switchTab">去tabBar页面</navigator>

<navigator url="/pages/otherPage/otherPage">去其他页面</navigator>

<navigator open-type="navigateBack" delta="2">后退两页</navigator>
```
  - 导航到 tabBar 页面：需指定url（以/开头，指向 tabBar 页面地址）和open-type="switchTab"属性。
  - 导航到非 tabBar 页面：指定url（以/开头），open-type="navigate"（可省略）。
  - 后退导航：open-type="navigateBack"，可指定delta属性表示后退层级（默认为 1，后退到上一页面可省略）。
- 编程式导航：调用小程序导航 API 实现跳转。
```
// 在页面的.js文件中
Page({
  // 导航到tabBar页面
  goToTabBarPage: function () {
    wx.switchTab({
      url: '/pages/tabbarPage/tabbarPage'
    });
  },
  // 导航到非tabBar页面
  goToOtherPage: function () {
    wx.navigateTo({
      url: '/pages/otherPage/otherPage?param=value'
    });
  },
  // 后退导航
  goBack: function () {
    wx.navigateBack({
      delta: 1
    });
  }
})
```
  - 导航到 tabBar 页面：使用wx.switchTab(Object object)方法，Object包含url等属性。
  - 导航到非 tabBar 页面：使用wx.navigateTo(Object object)方法，Object包含url等属性。
  - 后退导航：使用wx.navigateBack(Object object)方法，Object包含delta等属性。
导航传参
```
// 在接收导航参数的页面的.js文件中的onLoad函数中
Page({
  onLoad: function (options) {
    console.log('接收到的参数', options);
  }
})
```
- 声明式导航传参：navigator组件的url属性后可携带参数，参数与路径用?分隔，参数键值用=相连，不同参数用&分隔。
- 编程式导航传参：调用wx.navigateTo方法跳转时也可携带参数。
- 接收导航参数：在onLoad事件中可获取导航传递的参数。

6. 页面事件

下拉刷新事件
```
// 在页面的.js文件中
Page({
  data: {
    count: 0
  },
  onPullDownRefresh: function () {
    this.setData({
      count: 0
    });
    // 模拟数据加载过程
    setTimeout(() => {
      console.log('数据加载完成');
      wx.stopPullDownRefresh();
    }, 2000);
  }
})
```
- 启用下拉刷新：可全局（在app.json的window节点设置enablePullDownRefresh为true）或局部（在页面的.json配置文件设置）开启。
- 配置窗口样式：通过backgroundColor和backgroundTextStyle配置下拉刷新窗口的背景色和loading样式。
- 监听事件：在页面的.js文件中通过onPullDownRefresh()函数监听，可在函数中处理数据重置等操作，处理完需调用wx.stopPullDownRefresh()停止下拉刷新效果。

上拉触底事件

// 在页面的.js文件中
Page({
  data: {
    itemList: [],
    isLoading: false
  },
  onLoad: function () {
    this.loadData();
  },
  onReachBottom: function () {
    if (!this.data.isLoading) {
      this.data.isLoading = true;
      this.loadData();
    }
  },
  loadData: function () {
    // 模拟数据加载过程
    setTimeout(() => {
      const newItems = [
        {id: this.data.itemList.length + 1, name: '新数据' + (this.data.itemList.length + 1)}
      ];
      this.setData({
        itemList: this.data.itemList.concat(newItems),
        isLoading: false
      });
    }, 2000);
  }
})

监听事件：在页面的.js文件中通过onReachBottom()函数监听。
配置触底距离：可在全局或页面的.json配置文件中通过onReachBottomDistance属性配置，默认距离为50px。
案例实现步骤：包括定义获取随机颜色方法、页面加载时获取初始数据、渲染 UI 结构并美化、上拉触底时调用方法、添加loading提示效果以及对上拉触底进行节流处理。

7. 生命周期

生命周期概念：指对象从创建到运行再到销毁的整个阶段，小程序分为应用生命周期和页面生命周期。
生命周期函数：由小程序框架提供的内置函数，伴随生命周期按次序执行，用于在特定时间点执行特定操作。
- 应用的生命周期函数：
```
// app.js文件
App({
  onLaunch: function (options) {
    console.log('小程序初始化完成');
  },
  onShow: function (options) {
    console.log('小程序启动或从后台进入前台显示');
  },
  onHide: function () {
    console.log('小程序从前台进入后台');
  }
})
```
  在app.js中声明，包括onLaunch（小程序初始化完成时执行）、onShow（小程序启动或从后台进入前台显示时触发）、onHide（小程序从前台进入后台时触发）。
- 页面的生命周期函数：
```
// 在页面的.js文件中
Page({
  onLoad: function (options) {
    console.log('页面加载');
  },
  onShow: function () {
    console.log('页面显示');
  },
  onReady: function () {
    console.log('页面初次渲染完成');
  },
  onHide: function () {
    console.log('页面隐藏');
  },
  onUnload: function () {
    console.log('页面卸载');
  }
})
```
  在页面的.js文件中声明，包括onLoad（监听页面加载，一个页面只调用 1 次）、onShow（监听页面显示）、onReady（监听页面初次渲染完成，一个页面只调用 1 次）、onHide（监听页面隐藏）、onUnload（监听页面卸载，一个页面只调用 1 次）。

8. WXS 脚本

WXS 概述
- 定义：小程序独有的脚本语言，结合WXML构建页面结构。
- 应用场景：主要作为 “过滤器”，解决wxml中无法调用页面.js中定义函数的问题。
- 与 JavaScript 的关系：语法类似但有区别，有自己的数据类型，不支持部分 ES6 及以上语法，遵循 CommonJS 规范。

基础语法

内嵌 wxs 脚本：编写在wxml文件的<wxs>标签内，需提供module属性指定模块名称。

<view>{{m1.toUpper(username)}}</view>
<wxs module="m1">
  // 将文本转为大写形式zs->ZS
  module.exports.toUpper = function(str) {
    return str.toUpperCase();
  }
</wxs>

定义外联的 wxs 脚本：编写在以.wxs为后缀名的文件内。

// tools.wxs文件
function toLower(str) {
  return str.toLowerCase();
}
module.exports = {
  toLower: toLower
};

使用外联的 wxs 脚本：在wxml中引入时，<wxs>标签需添加module和src属性。
```
<view>{{m2.toLower(country)}}</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>
```

WXS 的特点
- 与 JavaScript 不同：虽借鉴语法但本质不同。
- 不能作为组件的事件回调：典型应用是 “过滤器”，不能作为组件事件回调函数。
- 隔离性：运行环境与其他 JavaScript 代码隔离，不能相互调用。
- 性能好：在 iOS 设备上比 JavaScript 代码快。