html做成小程序,微信小程序——简单静态网页的制作

一、前言

需要知识：

HTML

CSS

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

要求：

进入开发者工具并且创建一个测试小程序， 选择建立快速模板

在pages目录底下新建一个first的文件夹，其中包括指定的四个文件，并且设置第一个页面为first页面

3.在first.wxml里制作如图ui界面，采用盒模型以及flex布局

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

5.用户id和余额应在first.js文件里面写，然后wxml里面获取js的内容，具体操作培训已讲

采用rpx布局，根据手机大小自适应

可以尝试在first.json文件里面将顶部样式做一些修改

要求样张：

image.png

二、正文

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

image.png

1.在JSON中设置顶部样式

{

"backgroundTextStyle": "light",

"navigationBarBackgroun