如何使用微信小程序设计和设置表格并展示数据？

1、双击打开微信小程序开发工具，新建一个对应的界面，然后插入多个view元素，并添加class属性，如下图所示：

2、没有给这些view样式，然后保存代码并预览效果，结果出现从上到下排列，如下图所示：

3、在对应的wxss文件中，设置表格的表头和表体的样式，如下图所示：

4、再次保存代码并在模拟器中预览效果，发现形成了表格，如下图所示：

5、在thtd添加一个border-bottom属性，设置底部边框属性，如下图所示：

6、结果发现最后一行的底部边框展示的有点粗，是因为table和td设置了边框，加粗了，如下图所示：

一、小程序架构

每个小程序的结构都有两个主要部分构成：主体部分+各个页面。类似于许多框架，主体部分主要用于核心的配置，各个页面主要用于不同业务场景。

1.1、主体部分主要由3个文件构成

1）app.js：小程序逻辑，初始化APP

2）app.json：小程序配置，比如导航、窗口、页面http请求跳转等

3）app.wxss：公共样式配置

主体配置完成之后，就是对应业务开发了，也就是开发者最常 *** 作的页面。小程序页面设计基本上也是遵循MVC结构进行构建。

1.2、页面由4个文件构成

1）js：页面逻辑，相当于控制层（C）；也包括部分的数据（M）

2）wxml：页面结构展示，相当于视图层（V）

3）wxss：页面样式表，纯前端，用于辅助wxml展示

4）json：页面配置，配置一些页面展示的数据，充当部分的模型（M）

二、配置app.json

app.json

全局配置页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabBar

通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。tabBar配置数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序。

networkTimeout

可以设置各种网络请求的超时时间。

debug：true/false

可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发。可以帮助开发者快速定位一些常见的问题

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的哦诶址比app.json全局配置简单的多，只是设置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。

微信小程序的字体颜色可以使用CSS属性color来进行设置。

1. 首先，在wxml文件中，使用<style>标签来设置样式。

2. 在样式表中使用color属性，然后设置字体颜色。

例如，设置文字为红色：

```

<Style>

.red-text {

color: #ff0000

}

</Style>

```

3. 在页面中，将要设置颜色的文字标签使用class属性来关联对应的样式类。

例如，将一个文字标签设置为红色：

```

<Text class="red-text">这段文字将会显示为红色。</Text>

```

注意：#ff0000表示红色的十六进制颜色值。更多的CSS样式可以参考CSS手册。

---