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

发布于：2024-10-09 ⋅ 阅读:(46) ⋅ 点赞:(0)
微信交流群：https://732903.hlcode.cn/?id=NK1fWUR

1. WXML 模板语法

  • 数据绑定 
    <!-- 在页面对应的.js文件中 -->
Page({
  data: {
    // 字符串类型数据
    info: 'Hello, World!',
    // 数组类型数据
    msgList: [
      {msg: 'Apple'},
      {msg: 'Banana'}
    ]
  }
})
<!-- 在WXML文件中 -->
<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>组件实现页面跳转。 
      <!-- 导航到tabBar页面 -->
<navigator url="/pages/tabbarPage/tabbarPage" open-type="switchTab">去tabBar页面</navigator>
<!-- 导航到非tabBar页面 -->
<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 代码快。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布