一、前言需要知识：

HTML

CSS

注意：微信小程序的语法与HTML和CSS不同，但本质是相同的。

要求：进入开发人员工具并创建测试小程序，选择创建快速模板，并在pages目录下创建第一个文件夹，其中包含指定的四个文件，并将第一页设置为第一页

3.使用框模型和flex布局制作了first.wxml中所示的ui界面

4.用黑眼圈统一表示用户个人资料图片和待付款的四个圆圈

5.用户ID和余额应写在first.js文件中，然后在wxml中获取js的内容。具体的操作培训已经提到了rpx布局的使用。根据手机的大小，您可以尝试将其添加到first.json文件中。对顶级样式的一些修改需要证明：

image.png

二、身体

由于微信小程序被自动分为WXML，WXSS，JS和JSON文件，因此有必要在不同的文件中编写不同的代码。

image.png

1.使用JSON设置顶部样式

{ "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#003366", "navigationBarTitleText": "个人中心", "navigationBarTextStyle": "white"}

2.用WXML建立了一个网页框架，并依次写下了请求的内容

{{motto}} 用户可自定义个性签名(限制字数） {{balance}} 我的订单 全部订单 待付款 待确认 进行中 待评价 我的钱包 我的收藏 地址管理 联系客服 投诉建议