小程序渲染页面结构

小程序渲染页面结构

小程序使用WXML模板语法来渲染页面的结构，WXML是一种类似HTML的语言，支持数据绑定、列表渲染、条件渲染、事件等操作。

数据绑定

小程序中可以使用双大括号语法{{}}来进行数据绑定，将变量或表达式包裹在{{}}中即可。

示例代码：

<view>{{message}}</view>

data: {
  message: 'Hello World!'
}

列表渲染

在WXML中可以使用wx:for指令来遍历数组或对象，并渲染列表。

示例代码：

<view wx:for="{{items}}" wx:key="{{index}}">
  <text>{{index}} - {{item}}</text>
</view>

data: {
  items: ['item1', 'item2', 'item3']
}

条件渲染

在WXML中可以使用wx:if、wx:elif和wx:else指令来进行条件渲染。

示例代码：

<view wx:if="{{condition}}">条件成立</view>
<view wx:else>条件不成立</view>

data: {
  condition: true
}

事件绑定

在WXML中可以使用bind或catch前缀来绑定事件，bind前缀表示事件会冒泡，catch前缀表示事件不会冒泡。事件绑定的处理函数可以写在对应页面的JavaScript文件中。

示例代码：

<button bindtap="onTap">点击按钮</button>

Page({
  onTap: function() {
    console.log('按钮被点击了')
  }
})

小程序样式美化

小程序使用WXSS样式来美化页面结构，WXSS是一种类似CSS的语言，支持选择器、样式声明、变量等操作。

尺寸单位

在WXSS中可以使用rpx作为尺寸单位，rpx是一个相对单位，可以根据屏幕宽度进行自适应。

示例代码：

.button {
  width: 200rpx;
  height: 80rpx;
  font-size: 28rpx;
}

样式导入

在WXSS中可以使用@import语句来导入其他WXSS文件。

示例代码：

@import "common.wxss";

全局样式和局部样式

可以在app.wxss中定义全局样式，也可以在页面的WXSS文件中定义局部样式。如果局部样式和全局样式有重复的定义，则以局部样式为准。

示例代码：

/* app.wxss */
.button {
  border-radius: 4px;
}

/* index.wxss */
.button {
  background-color: #00C1DE;
  color: #FFFFFF;
}

小程序全局配置

小程序的全局配置可以使用app.json文件进行配置，app.json文件位于小程序根目录下。

pages属性

pages属性用于配置小程序的所有页面路径，数组的第一项代表小程序的初始页面。

示例代码：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "小程序"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }
}

window属性

window属性用于配置小程序的全局窗口属性，如导航栏、背景色等。

示例代码：

"window": {
  "navigationBarTitleText": "小程序",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "backgroundColor": "#f5f5f5"
}

tabBar属性

tabBar属性用于配置小程序的底部导航栏，其中list属性用于配置导航栏的每一项。

示例代码：

"tabBar": {
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/home.png",
      "selectedIconPath": "icons/home-selected.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "icons/logs.png",
      "selectedIconPath": "icons/logs-selected.png"
    }
  ]
}

小程序页面配置

小程序的页面配置可以使用page.json文件进行配置，page.json文件位于每个页面目录下。

对单个页面进行个性化配置

使用page.json文件可以对单个页面进行个性化配置，如设置导航栏标题、背景颜色等。

示例代码：

{
  "navigationBarTitleText": "页面标题",
  "backgroundColor": "#f5f5f5"
}

就近原则

如果app.json和page.json中有重复的配置项，则以page.json为准，即就近原则。

网络数据请求

小程序中可以使用wx.request方法来发起网络数据请求，请求成功后可以在onLoad事件中获取到返回的数据。

示例代码：

Page({
  onLoad: function () {
    wx.request({
      url: 'https://api.example.com/data',
      success: function (res) {
        console.log(res.data)
      }
    })
  }
})

以上是小程序的一些基础知识点和操作，可以根据需要进行详细学习和补充。