微信小程序开发快速入门-第一个页面编写（2/5） - WXOPEN Club

前言

我相信很多小伙伴看完上次的《微信小程序开发快速入门-小程序之开发前准备（1/5）》已经迫不及待想要开始编码了，今天就满足大家把代码给大家安排上！

今天主要分享的内容有以下 2 个点：

1. 项目结构及代码分析
2. 码仔备忘录项目

在这里我们会从官方提供的案例去阅读代码中的秘密，阅读完成之后我们再从零到一写一个小项目就叫码仔备忘录。在这个过程中我会从前端基础讲起，先从显示层然后再去做逻辑层，循序渐进带领大家做一个小程序。

项目结构分析

我们先要分析最外层的目录结构以及文件：

pages 下面都是有两个文件夹，这个下面代表两个页面一个是index一个是logs。
utils文件夹是存在工具js文件，属于工具类。
然后下面有三个以app开头的文件，这三个属于全局文件。
app.js：全局App实例，是全部页面共享的。其他页面可以通过getApp()获取该实例，通常会把全局的对象存放在这里面供所有页面调用，如：用户对象。
app.json：包含全局配置，所有的页面都需要配置到这里面，还有小程序头部样式。这里注意pages数组的第一项代表小程序的首页。更多配置看可以查看：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html。
app.wxss：全局样式，这里面的样式全部共享到所有页面，无需额外引用。
project.config.json：这个是基于整个⼯具的配置，例如界⾯颜⾊、编译配置等等。不需要你在

配置⽂件⾥⾯修改，⽽是通过⼯具的功能操作后，⾃动在这⾥会⽣成配置。配置详细可见：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

project.private.config：私有化配置与 project.config.json 配置一样只是权限不一样。
sitemap.json：小程序搜索配置，详细可见：https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

通常在开发过程中我们只会关注 app.js,app.json,app.wxss 这三个文件。

页面结构

外层了解完后，再继续深入了解：

每个页面都有四个文件。

1. js：负责页面逻辑。如：登录操作，点击触发的事件处理等等

2. json：负责页面配置。如：⻚⾯的标题，⻚⾯的导航栏颜⾊等等

3. wxml：负责页面布局。如：有几个元素，如何摆放顺序等等

4. wxss：负责页面样式。如：元素⼤⼩，颜⾊等等

为了让大家更好都理解，我用游戏LOL来举个例子：

1. wxml：英雄

2. wxss：皮肤

3. js：技能

4. json：附文

到这里我们有提到页面配置和全局配置，这两个配置有一样的地方，但是很多不同到配置项，具体可见页面配置详情：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

在一个页面中，通常主要用到wxml、wxss、js。json文件大部分可以不用，直接删除不受任何影响。

小程序中的wxml，wxss，js 相当于网页开发中的html，css，js。

分析完目录结构后我们在来看看更具体的代码。

项目代码分析

小程序运行机制最开始是从app.json配置项解析。

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "Weixin",

    "navigationBarTextStyle":"black"

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

然后再来看看首页，在这里不看页面的逻辑处理，先看页面的展示结构布局，打开调试器的Wxml来分析以下。

这里面有三个元素，头像，名字，欢迎文案。结构是从上到下排列下来。

可以看到布局代码中有view、text，这些都是小程序组件。

组件都是以标签的形式成对出现。每个组件都有属性，如：class属性。

小程序组件列表：https://developers.weixin.qq.com/miniprogram/dev/component/

后续会结合案例来单独讲解常用的组件，大家可以大概了解下小程序的组件类型。

那么组件的颜色、大小、居中以及之间的距离都是属于样式。

我们可以看到这个Hello World文本距离上面有200px的距离，这种是属于样式信息，样式都是写在wxss里面的。

在这里说明下，小程序是自动引入当前文件夹同名的样式，网页开发则需要手动额外引入。

现在大家看到这里以及大概了解一些基本概念。接下来由于官方案对于初学者来说有些复杂，接下来我们来从零到一写一个简单的页面。

基于现在的项目我们删除一些无用的代码。大家把utils文件夹删除，logs文件夹删除，app.wxss样式删除，app.json文件只留下index路径，代码如下。

{

  "pages":[

    "pages/index/index"

  ]

}

然后index文件夹下面的四个文件删除，再右键新增Page，这样就会直接新增好四个空的基础文件。然后我们得到的就是这样的一个页面。

清空掉一切无用代码后，接下里我们要开始搞个小程序项目了。最近听说码仔最近有个需求，我们去帮帮它！

码仔备忘录

需求分析

需求背景：由于码仔每天有做不完的事情，所以经常忘记一些事情。这样时候码仔需要一个备忘录用于记录自己的事情。

码仔需求：

1. 我希望有一个记录文字备忘录的功能，为了解决我健忘的毛病。
2. 我希望可以同时记录多条备忘录，因为要做的事情实在太多了。
3. 我希望可以删除备忘录，眼不见心不烦，做完了就不想在看了。

项目界面：

1. 开启页面

2. 列表页面

    1. 无数据状态

    2. 有数据状态

3. 添加页面

布局编写

先从启动页面开始，布局分析：

一共是两个元素，一个是码仔图片，一个是按钮。

首先在项目中新建一个images文件夹存放码仔图片和按钮背景图与pages文件夹同级。

在新建的时候注意选择最外层的文件，如：app.js，因为只有这样建立的文件夹才会与pages同层级，否则如果选中pages那就是与在pages下一级文件夹了。

建立好images文件夹后右键打开文件夹，把下载好的素材图片改好名字放入文件。

准备好素材之后我们开始对页面做布局代码编写。

通常我们都会用view容器来包裹住所有组件。image组件就有个src属性用于放显示的图片路径。

具体可以查看image的文档，https://developers.weixin.qq.com/miniprogram/dev/component/image.html 有问题查文档，我们可以把文档当作字典来使用，用的时候就针对性查阅。

代码如下：

<view>

<image src="/images/home_logo.png"></image>

<view>按钮</view>

</view>

这里我们是用view组件包裹来一个image组件和view组件，那么这个时候有人就说为什么不用button组件？因为button组件用起来比较麻烦，button自带很多样式，布局起来比较麻烦。除非要用到button到特殊能力，否则通常情况下是不用button组件的，view组件可以通过css来完成按钮样式。

看下上面代码显示的样式，我们会发现图片有些变形。

这个是为什么呢？我们通过调试器Wxml定位看下。

小技巧：wxml用旁边的小鼠标可以点击元素快速定位布局。

我们可以看到图片组件有个默认样式宽度320px、高度240px。

接下来我们给这个图片来个样式。通常是根据图片的实际大小来设置宽度和高度。

这张图片是500x468，那么给它来一个样式。

<view>

  <image src="/images/home_logo.png" style="width:468rpx;height: 500rpx;"></image>

  <view>按钮</view>

</view>

知识点：样式选择器

从图片样式上来看，没有问题了。但是这里其实还包含个css知识点。上面用style属性来直接编写样式叫行内样式。这种虽然可以实现效果但是不够灵活，所以更好的写法实在wxss里面写。

代码如下：

index.wxss

.logo{
  width: 500rpx;
  height: 468rpx;
}

index.wxml

  <view>

  <image src="/images/home_logo.png" class="logo"></image>

  <view>按钮</view>

</view>

这种是最常用的类选择器，还有一种类型选择器，写法如下：

index.wxss

image{
  width: 500rpx;
  height: 468rpx;
}

index.wxml

  <view>

  <image src="/images/home_logo.png" ></image>

  <view>按钮</view>

</view>

能达到效果都一样，一个是类选择器主要是针对具体的组件引用样式，类型选择器就是这个页面所有这种类型的组件都会被应用这个样式。如果是在一个页面多个组件都是同样都样式就用类型选择器，如果是单个就用类选择器。

知识点：样式优先级

还有一种情况就是如果有多个页面都用同一个样式，那就把样式放在app.wxss里面这样可以所有页面都共享这个样式，这样可以减少重复代码编写。这个时候有人会说了，如果公共样式里面有都，我当前页面重复了会怎么样呢？就近原则，当前样式大于公共样式，无论是样式还是配置一样原则。

接下来我们回过头来再次选中图片来看看这个图片的样式。

我们可以看到结合刚才的原则，两个都是类型选择器样式，我们当前的样式就覆盖了默认的图片样式。不知道有没有人发现了一个小细节，默认样式的宽高单位和我们自己写的单位不一致，一个是px另外一个是rpx。那么这两个有什么区别呢？

知识点：rpx

看下文档对rpx解释：

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

在iPhone6上1px = 2rpx。拿上面那张图举例500x468，px就是250x234才能显示一样的大小。这个rpx是小程序独有的，可以用于适配各种屏幕做到等比例缩放，所以以后咱们就用rpx。

具体对比效果，你可以通过切换模拟器机型来体验px和rpx的效果。px为固定大小，rpx为自适应大小。

好了，到这里继续写下面的代码，写完图片样式之后，我们再来看看按钮。我们可以看到素材按钮其实也是一张图片，我们把原来的view组件改成image组件。这里需要注意的是这个时候需要把类型选择器改成类选择器，因为两个都是image图片样式也不是一样的，所以我们还是选择用类选择器的写法。

看效果，用上面同样的写法来完成

wxml

  <view>

  <image src="/images/home_logo.png" class="logo" ></image>

  <image src="/images/home_btn.png" class="btn"></image>

</view>

wxss

.logo{
  width: 500rpx;
  height: 468rpx;
}

.btn{
  width: 550rpx;
  height: 150rpx;
}

接下来还要写个改变下背景颜色，这个时候我们可以给page设置一个背景颜色。

在这里肯定你会有疑问，page这个组件好像没在布局里面写呀，它是哪里来的？这个就是小程序每个页面都会自己套一层page组件，可以通过调试器的Wxml看到page组件。通常我写背景颜色都用它，page文档里面也没有说明，有时候需要大家细心观察。

知识点：Flex布局

接下来还需要把这两张图片居中显示，这个时候就要用到css最常用的Flex布局了。我们可以把包裹这两张图片的view看成一个容器，然后控制容器的样式来改变容器内里面组件的布局样式。

看效果

wxml

 
<view class="container">

  <image src="/images/home_logo.png" class="logo" ></image>

  <image src="/images/home_btn.png" class="btn"></image>

</view>

wxss

.container{

  /* 显示类型 ：弹性布局 */

  display: flex; 

  /* 排列方向：垂直方向，从上到下 */

  flex-direction: column;

  /* 纵轴对齐方式：居中 */

  align-items: center;

  /* 向上的边距：100rpx */

  margin-top: 100rpx;

}

.logo{

  width: 500rpx;

  height: 468rpx;

}

.btn{

  width: 550rpx;

  height: 150rpx;

}

page{

  background-color: #F8D300;

}

这个flex布局方式非常常用，所以要重点学习。

Flex 布局教程：语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

然后再来看下与效果图的对比，按钮和上面logo图片距离相隔168像素，给btn样式加一个外边距的样式margin-top样式。

如果前端基础弱的同学可以外边距的教程：https://www.runoob.com/css/css-margin.html

添加完距离之后在看看效果。

最后就差头部这个标题栏部分了，之前就有提到如果是全局配置就找在app.json。来看看全局配置文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

在配置里面有个window对象里面配置下navigationBarBackgroundColor属性配置成主色调。

看下效果

app.json

{

  "pages": [

    "pages/index/index"

  ],

  "window": {

    "navigationBarBackgroundColor":"#F8D300"

  }

}

好了，我们第一个小程序静态页面大功告成。

最后

这一章节主要是带着大家完成来一个小程序静态页面，主要目的是为了让大家了解下小程序到页面和样式。在此再次强调Flex布局非常重要。大家一定要反复练习，后续会被频繁使用到。

gaoyang 1楼•3 年前

图挂了然后app.josn？

yong94 2楼•10 个月前

不如出个视频教程比较好，如果出系列教程的话