编写第一个小程序页面

笔记内容：开发第一个小程序页面
笔记日期：2018-01-04

---

自动生成的小程序文件结构简介

新建一个项目：

建立完项目后，能够看到左边有个手机窗口般的界面，这是效果的展现页面：

还能够查看启动日志：

右边则是工程代码编写的地方，pages目录下存放着全部页面相关的文件或目录，index目录和logs目录就表明着以上的两个页面：

程序的入口文件，这三个文件在全局中是惟一的，并且文件名称是固定的：

接着咱们先来看看web开发常见的文件结构：

而后再来看看小程序的文件结构：

能够看到，与web开发的文件结构很类似，因此不难看出实际上小程序开发用的就是web的技术。

在上图的文件结构中，.js文件和.json就没什么好说的了，就是JavaScript文件和json文件，除此以外能够看到有.wxml和.wxss文件，这个两个文件分别对应着html和css文件。并且也有就近原则：当有两个样式文件对某个组件设置了样式的话，会以最近的那个样式文件为准。例如，我要改变index页面的文本颜色，我在app.wxss文件中设置了文本颜色为红色，而后再到index.wxss文件里设置了文本颜色为蓝色，最终会以index.wxss文件里设置的为准，由于它离index.wxml近。其余文件也是同样的。

关于页面的层级：
上图中的index.wxml是一级页面，而logs.wxml是二级页面，虽然看似两个页面的目录是平级的，可是由于须要经过index.wxml才能到logs.wxml，因此logs.wxml是二级页面，而官方规定小程序的层级页面最多只有五级。

新建一个本身的项目

上面演示建立的是官方提供的模板项目，此次咱们来建立一个本身的项目：

建立完成，是一个空白的项目：

因为尚未建立入口文件，因此控制台会报错。

项目建立好后，开始建立相应的目录、文件：

基本的目录、文件建立完成：

开始制做项目启动页

而后咱们来编写第一个程序：Hello World！，首先编辑welcome.wxml文件为如下内容：

<view>
  <text>hello world！</text>
</view>

这段代码意思是在窗口中显示这个文本内容。

编辑welcome.js为如下内容：

Page({

})

这是为了调用页面对象，即使什么都没有写，由于新版本不这么作会报错。

编辑app.json为如下内容：

{
  "pages": [
    "pages/welcome/welcome"
  ]
}

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。上面这段是用于指明页面文件所在的路径。

运行结果：

ps：除了微信官方提供的开发工具，咱们也可使用其余的开发工具进行代码的编辑，例如：Sublime、WebStorm等，而后代码调试在微信开发工具里进行调试就能够了。

关于移动设备的分辨率和自适应单位rpx

首先来看一个问题，经过这个问题来描述移动设备的分辨率：
问题：为何模拟器下ip6的宽度分辨率是375，而设计图通常给750？
咱们先来看看下图中，Iphone系列机型的物理分辨率：

咱们先来看看图中的pt和px，pt是逻辑分辨率，简单来理解就是一个长度单位、视觉单位，与屏幕的尺寸相关。而px则是物理分辨率，与屏幕的尺寸无关，px是像素点，点是不能描述大小的，1px表明1个像素点。一个逻辑分辨率（pt）下能够包含多个物理像素点（px），因此在一样的pt分辨率下，px分辨率越高的屏幕就会越清晰。上图中的Reader就描述了每一个机型的pt分辨率和px分辨率的关系，@1表示1:1的关系，@2则是2:1，@3则是3:1，以此类推。

PPI那一列表示的是每一寸包含多少个物理像素点，那么这个数字是怎么求出来的？使用勾股定理，例如求iPhone3GS的PPI，就是以320x480平方开根号而后除以3.5英寸就能获得PPI的数字。

知道逻辑分辨率和物理分辨率的关系后，如今就能回答刚刚那个问题了：在小程序模拟器中给出的ip6的宽度分辨率是375，这是逻辑分辨率（pt），而不是一个物理分辨率（px）。设计图通常都给的是物理分辨率，在上图中能够看到ip6的逻辑分辨率和物理分辨率的关系是@2x，也就是2倍关系，或者说2:1的关系，因此就能够得知：375 * 2 = 750。这就是为何模拟器中给的是375，而设计图通常给的是750的缘由了。

自适应单位rpx：

首先要知道在小程序中最好是使用rpx来表示分辨率，rpx表示的是逻辑分辨率，而一般咱们web前端开发中使用的px是物理分辨率。使用px来表示分辨率不能起到自适应的效果，而rpx则有自适应的效果，由于使用rpx的话小程序会自动在不一样的分辨率下进行转换。而px则不能够，因为小程序会运行在不一样分辨率的手机上，因此使用px是不行的，由于分辨率一变样式就会乱掉。

px、rpx以及pt单位在iphone6下的换算关系（注意是iphone6，在其余不一样分辨率的机型下就不同了）：

1px = 1rpx = 0.5pt

为何要用iphone6的物理分辨率来作设计图？理由只有三个字：好换算，例如ip6下是1px=1rpx，而在ip6 plus下是1px=0.6px，这样比较起来就能够看出ip6 plus换算起来就比较麻烦，而ip6则很方便直接就是1:1的关系，这是由于小程序当时就是基于iphone6来设计的rpx。

要注意的是：不是全部的单位都适合用rpx，由于有些样式的分辨率就不须要有自适应的效果，这种状况下使用rpx只会拔苗助长，因此要根据状况来使用相应的单位。

编写一个带有图片的简单页面，图片的分辨率是 200x200px ：

<!-- wxml是编写小程序骨架的文件 -->
<!-- view和html中的div是同样的 -->
<view>
  <!-- rpx是逻辑分辨率，在iphone6下与px的转换关系是1:1的比例 -->
  <image style='width:200rpx;height:200rpx' src='/images/image.png'></image>
  <text>Hello Wolrd！</text>
  <view>
    <text>开启小程序之旅</text>
  </view>
</view>

以上这个页面的图片能够适应不一样机型的屏幕分辨率。

注意：在小程序中，只有被text标签包围的文字，才能在手机上长按选中。

样式与弹性盒子模型

在咱们编写web页面的时候须要引用某个css文件中的样式都须要使用link标签来将css文件导入后，才能进行引用，可是在小程序中却不须要，直接引用就能够了。例如，我在wxss文件里有这样一个样式：

.user-avatar{
  width: 200rpx;
  height:200rpx
}

wxml里我不须要导入这个样式文件也可以引用该文件中的样式：

<!-- wxml是编写小程序骨架的文件 -->
<!-- view和html中的div是同样的 -->
<view>
  <!-- 无需导入wxss文件 -->
  <image class='user-avatar' src='/images/image.png'></image>
  <text>Hello Wolrd！</text>
  <view>
    <text>开启小程序之旅</text>
  </view>
</view>

这是由于咱们在app.json文件中已经配置好了：

{
  "pages": [
    "pages/welcome/welcome"
  ]
}

这段配置会把welcome目录下以welcome为前缀的文件都关联到一块儿，因此在wxml中就无需去导入样式文件就能引用样式了。

关于style中写样式仍是在样式文件中写样式：

• 若是是静态样式的话，写在样式文件里会提升性能和复用性
• 动态样式则能够写在style属性里，方便于动态改变

关于弹性盒子模型：
可能不少人在web开发时使用的是块（block）来做为显示，使用block的话，须要本身手动去调整样式的排列，而使用弹性盒子模型（flex），就能够很方便的横向或纵向排列样式，例如我要一个view标签内的元素都纵向排列而且居中就能够这么写：

.container{
  // 使用弹性盒子模型
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user-avatar{
  width: 200rpx;
  height:200rpx;
  margin-top:160rpx;
}
.user-name{
  font-size: 32rpx;
  font-family: MicroSoft Yahei;
  font-weight: bold;
}
.moto{
  font-size: 22rpx;
  font-family: MicroSoft Yahei;
  font-weight: bold;
}

若是有通用性较强的样式能够写在app.wxss里，这样就能够做用于全局。

而后在wxml里引用这个样式便可：

<!-- wxml是编写小程序骨架的文件 -->
<!-- view和html中的div是同样的 -->
<view class="container">
  <!-- 无需导入wxss文件 -->
  <image class="user-avatar" src="/images/image.png"></image>
  <text class="user-name">Hello Wolrd！</text>
  <view>
    <text class="moto">开启小程序之旅</text>
  </view>
</view>

运行结果：

上方这个黑色的导航栏能够经过配置app.json来改变颜色，配置内容以下：

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window":{
    "navigationBarBackgroundColor":"#b3d4db"
  }
}

其余相关配置的官方参考文档地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

完善以前编写的页面，如下是完整的代码：
welcome.wxml代码：

<!-- wxml是编写小程序骨架的文件 -->
<!-- view和html中的div是同样的 -->
<view class="container">
  <!-- 无需导入wxss文件 -->
  <image class="user-avatar" src="/images/image.png"></image>
  <text class="user-name">Hello Wolrd！</text>
  <view class="moto-container">
    <text class="moto">开启小程序之旅</text>
  </view>
</view>

welcome.wxss代码：

.container{
  // 使用弹性盒子模型
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user-avatar{
  width: 200rpx;
  height:200rpx;
  margin-top:160rpx;
}
.user-name{
  margin-top: 100rpx;
  font-size: 32rpx;
  font-weight: bold;
}
.moto{
  font-size: 22rpx;
  font-weight: bold;
  line-height: 80rpx;
  color:#405f80; 
}
.moto-container{
  margin-top:200rpx;
  border: 1px solid #405f80;
  width: 200rpx;
  height: 80rpx;
  border-radius: 5px;
  text-align: center;
}
image{
  border-radius: 50%;
}
page{
  // 小程序页面中会默认有一个page标签，相似于html中的根标签
  height: 100%;
  background-color: #b3d4db;
}

app.wxss代码：

text{
  font-family: MicroSoft Yahei;
}

app.json配置内容：

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window":{
    "navigationBarBackgroundColor":"#b3d4db"
  }
}

完成效果：