WeChat 微信小程序开发 案例实战

顶部 bar 的文本修改

修改app.json文件：

如果遇到修改无效，请删除app.json中的"renderer": "skyline"

WXML 模板 参考

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

显示图片

数据绑定

逻辑语法

条件逻辑

列表渲染 

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

 block wx:if

类似 block wx:if ，也可以将 wx:for 用在 <block/> 标签上，以渲染一个包含多节点的结构块。

 动态改变列表

一次性添加全部数据objectArray

 点击时每次添加一条数据

 动态刷新导致button覆盖问题

通过 app.json 设置 "renderer": "skyline" 

通过数字集合动态改变列表

模版

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，如：

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。 

动态模版

 引用

WXML 提供两种文件引用方式import和include。

使用定义的 template

在 one_temp.wxml 中定义了一个叫 item的 template ：

 在 index.wxml 中引用了 one_temp.wxml，就可以使用 item模板

需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。

使用 include 标签 

include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置。

创建 footer.wxml 和 header.wxml 模版

在inex.wxml引入 header.xml 和 footer.xml 模版

WXSS 样式

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。

WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。

 app.wxss

项目公共样式：根目录中的app.wxss为项目公共样式，它会被注入到小程序的每个页面。页面样式：与app.json注册过的页面同名且位置同级的WXSS文件。

 比如：app.json注册了pages/rpx/index页面，那pages/rpx/index.wxss为页面pages/rpx/index.wxml的样式。

页面样式 

组件样式

尺寸单位

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。

WXSS引用

创建 base.wxss 文件

在 index.wxss 样式文件中引入 base.wxss 样式

在 logs.wxss 样式文件中引入 base.wxss 样式

内联样式

WXSS内联样式与Web开发一致

<!--内联样式-->
<view style="color: red; font-size: 48rpx"></view>

动态内联样式

小程序支持动态更新内联样式

选择器

类选择器 .class

id选择器 #id

 元素选择器 element

微信小程序元素选择器是一种在小程序中根据元素的特征进行定位的方式。

例如设置：text、button、image 标签等样式。 

伪元素选择器 ::after

 伪元素选择器 ::before

 WXSS 权重 

权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。

参考 微信小程序开发者平台样式权重

 官方样式库

小程序开发实战案例