微信小程序-制作简单的静态网页

1、 前言

所需知识：

HTML语言

CSS公司

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

要求：

进入开发人员工具并创建测试小程序。选择以创建快速模板

在pages目录下创建一个新的第一个文件夹，包括指定的四个文件，并将第一页设置为第一页

3.首先创建UI界面，如图所示。wxml，使用box模型和flex布局

4.用户头像和待付费等四个圆圈统一用黑色圆圈表示

5.用户ID和余额应写在第一位。js文件，然后在wxml中获取js的内容。介绍了具体的操作培训

采用rpx布局，适应手机尺寸

您可以尝试修改第一个中的顶部样式。json文件

所需样本：

图像.png

2、 阀体

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

图像.png

1.在JSON中设置顶部样式

{

“backgroundTextStyle”：“浅”，

“navigationBarBackgroundColor”：“#003366”，

“navigationBarTitleText”：“个人中心”，

“navigationBarTextStyle”：“白色”

}

2.在WXML中建立网页框架，并依次写下需求中的内容

<视图>

<；/图像>

{座右铭}}

用户可以自定义个人签名（限制字数）</view>

{余额}}

我的订单</view>

所有订单</view>

<视图>

<；/图像>

<；/图像>

待付款</view>

<；/图像>

待确认</view>

<；/图像>

进行中</view>

<；/图像>

待评估</view>

我的钱包</view>

<；/图像>

我的收藏夹</view>

<；/图像>

地址管理</view>

<；/图像>

联系客户服务</view>

<；/图像>

投诉建议</view>

<；/图像>

3.在WXSS中设置不同类的属性

/*页数/第一页/第一页。wxs软件*/

.容器{

显示器：柔性；