微信小程序开发详细流程 六 (小程序的页面创建编写)

从现在开始就可以正式写页面了

1.在pages 中添加一个目录,命名为home

2.在home目录下分别创建以下四个文件

3.在app.json里配置路径,要展示的页面放在第一个位置,(不要忘记加,逗号,最后一个不要加逗号)

4.编写页面,也就是wxml文件,

<view>
  <text>这是首页</text>
</view>

<view>标签是视图容器。相当于web里面的<div>        详细属性介绍可以查看API文档

上面三行代码写完Ctrl+S一下,就可以看到以下效果

这是最简单的一个页面,

下面可以给它加个样式,

5.编写样式.wxss文件

首先要在<view>标签里加一个class='样式名'

wxml部分:

<view class='container'>
  <text>这是首页</text>
</view>

wxss部分:

.container{
  /*弹性盒子模型,这个后面会单独讲*/
  display: flex;
  flex-direction: column;

  font-size: 30px;/*控制字体大小*/
  color:#000000;/*控制字体颜色*/
  line-height:15px;/*控制行间距*/
  font-weight: bold;/*控制字体加粗*/
  font-family:宋体;/*注明是什么字体*/
}

字体常用到的样式也就这么多了

最后效果

后面单独写页面如何跳转