参考教材：《微信小程序开发入门与实践》 雷磊
前置知识：JavaScript，CSS

新建项目

微信开发者工具测试号新建

界面显示及目录结构

如下图，这就是小程序开发的主界面，分为左中右三个部分，左边部分是模拟器的预览视图，中间是代码的树状结构，右边是代码的编辑区。
模拟器可以可以模拟微信小程序在客户端真实的运行情况，顶部有一条工具栏，你可以选择不同的机型、不同的网络情况、不同的缩放比例，以及home键模拟等等操作。
中间是项目文件的树状管理器，可以整体预览项目文件和组织关系。
右边是代码编辑区，不多赘述。
右下角是信息输出区域，这个区域会显示程序运行的错误信息、警告信息以及用户自己打印的信息。

基本文件结构

值得注意的是，以上四种类型的文件类型的文件文件名字必须相同

另外，系统自动生成utils文件夹是用来放一些公共的js文件，比如utils下面的util.js.当然你也可以新建其他文件夹存放。

新建界面

把log界面当成首页pages"pages/index/index"pages/index/index.js.json.wxmlwxss

app.jsonpages

hello.jshello.jsonhello.wxmlhello.wxssapp.jsonpagesapp.jsonpagesCtrl+s点击编译app.jsonpages

wxml组件

resource

Hello 小程序

开启小程序之旅

viewtextimageviewdivtextspanimageimg

wxss样式

接下来我们在hello.wxss里给界面添加样式，首先我们先给hello.wxml中的组加上样式名称 class name

Hello 小程序

开启小程序之旅

然后设置页面样式。其实wxss的语法和css是一样的，wxss支持的选择器少了许多。

/* pages/index/hello.wxss */
.container{
  /* 设置所有组件元素的容器样式 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar{
  /* 设置图片的大小和样式 */
  width: 200rpx;
  height: 200rpx;
  margin-top: 10rpx;
  border-radius: 100px;/*图片以圆形的方式显示*/
}
.motto{
  /* 设置 "hello,小程序"的样式 */
  margin-top: 200rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #9F4311;
}
.journey-container{
  /* 设置"开启小程序之旅"外边框样式 */
  margin-top: 200rpx;
  border: 1px solid #EA5A3C;
  width:200rpx;
  height: 80rpx;
  border-radius: 5px;
  text-align: center;
}
.journey{
  /* 设置圆角矩形内的文本样式 */
  font-size: 22rpx;
  font-weight: bold;
  line-height: 80rpx;
  color:  #EA5A3C
}

效果图如下

支持的css选择器：

在官方文档里，声明支持的选择器如下，不过，经过测试，其他很多选择器也是支持的。但为了避免出现问题，还是尽量使用官方推荐的选择器

页面根元素 page

pagepagepage

顶部导航栏设置

window

#000000blackwhitedefaultcustomdarklightautoportraitlandscape

这里我修改了导航栏的背景颜色。其他属性读者自行设置尝试。