一、前言
需要知识:
HTML
CSS
注意:微信小程序的语法与HTML和CSS不太相同,但本质是一样的。
要求:
进入开发者工具并且创建一个测试小程序, 选择建立快速模板
在pages目录底下新建一个first的文件夹,其中包括指定的四个文件,并且设置第一个页面为first页面
3.在first.wxml里制作如图ui界面,采用盒模型以及flex布局
4.用户头像和待付款等四个圆圈统一用黑色的圆圈表示
5.用户id和余额应在first.js文件里面写,然后wxml里面获取js的内容,具体操作培训已讲
采用rpx布局,根据手机大小自适应
可以尝试在first.json文件里面将顶部样式做一些修改
要求样张:
![96fc1c4a7acc](https://www.jianshu.com/p/96fc1c4a7acc)
image.png
二、正文
由于微信小程序中,自动分为WXML、WXSS、JS和JSON文件,所以需要在不同的文件中写出不同的代码。
![96fc1c4a7acc](https://www.jianshu.com/p/96fc1c4a7acc)
image.png
1.在JSON中设置顶部样式
{
"backgroundTextStyle": "light",
"navigationBarBackgroun