咱就不晦涩了，俺物理作业还没动，直接进入正题。
关于小程序的界面设置，首先需要分析一下小程序的文件设定与前端三大件的区别与联系，在小程序中每个分页面都有wxml、wxss、js以及json文件，整体上，可以说wxml就等价于html，wxss就等价于css，js与前端一致，只是小程序默认就将三大件分开了，网页可能不需要分开，至少网页代码少的时候也没必要（写项目的时候还是有必要的）。
与网页不同的是，小程序多了一个json文件，json文件，在我目前的水平看来， 除了app.json多了一个tabBar设置（具体后面再说进一步展开），所有的json文件都一样，都是用来设置分页界面的。仔细一想还是很好理解的，因为手机端用户使用的时候，用户界面本来就很小，经常切换页面是很有必要的，小程序这样设定是 为了提高用户体验。
在app.json文件里面有三个常用属性:
1.pages，设置小程序的页面，里面包含了小程序的所有可展示的页面，在里面能够快速实现新建页面（增添页面路径后保存就行），pages里面的第一个就行小程序默认展示的页面；
2.window，设置小程序上方的导航栏样式，常用的有：
navigationBarBackgroundColor:导航栏背景颜色，只能用16进制表示，eg:#00bfff,这个可以用vscode鼠标在颜色上悬停，然后调节左键点击上方的颜色种类获得：
navigationBarTitleText ：小程序标题内容；
navigationBarTextStyle：小程序标题颜色，只能为white或者black，不支持其他的颜色设置，默认为白色；
enablePullDownRefresh：小程序下拉刷新，只能为true或者是false，表示是否下拉刷新，默认为false；
backgroundColor：小程序下拉时的背景颜色，支持16进制
backgroundTextStyle:小程序下拉时的背景颜色，只能为dark和light，当它为dark的时候下拉刷新会出现闪动，否则不会出现闪动。
说明：小程序的app.json的window设置即代表了所有页面的默认设置；
3.tabBar，这是是一个很好的属性，能够实现页面的跳转，提供跳转提示，常用属性如下：
color：对应页面不是当前展示页面时显示的颜色，只支持16进制；
selectedColor:页面与当前页面对应是字体颜色；
list:建立分页面的基础，其下有多个属性：
iconPath：页面与当前页面不对应时展示的图片路径，大小限制40kb,建议尺寸81*81px；
selectedIconPath：页面与当前页面对应时展示的图片路径；
text: tab上面的文字。
接下来是数据渲染：
在小程序中的数据渲染与网页数据渲染不一样，网页是通过节点来获取和修改，而小程序主要是通过data来进行数据的动态渲染的，形式为{{message}} ，通过js里面的data进行赋值，里面的message可以是整型，字符串，布尔类型，数组等，当为数组的时候需要以节点的形式来进行读取里面的值，一维数组用list[0]的形式，二维用list[0].name的形式来获取。
其次，小程序{{}}里面可以进行运算，从一目运算到三目运算都可以。
数据动态渲染的遍历，对于一个数组，如果想进行遍历展示那么可以使用wx:for={{list}} 来实现，其中，还能够使用wx:for-index=“first"以及wx:for-item=“last"来进行命名，注意为了保证数据的对应，常常还要加一个wx:key=”(唯一属性)”，如果唯一属性不好说明就使用*this填补。