前言
由于项目需要，最近开始了微信小程序开发的学习，从官方的开发工具开始。微信小程序无论是从开发难度还是从便捷性上来讲都是不错的选择，而且对于学生来说也不必考虑太多的东西。这个系列就是就是打算写一下学习笔记，以后可以参考，也是一种回忆，如果能够给有缘阅读到的人一点点帮助，那真是荣幸之至。
准备
工具
安装和建立工程都很简单，APPID暂时选测试号或者不填（如果需要上线才需要用真实的ID），语言选JavaScript。新建的工程里有默认的代码，刚开始学习看不懂那些代码，将其删除即可。一眼望去，我们可以看到开发者工具主要分为五个部分，仿真器（仿真移动设备），编辑器（写代码）、调试器、目录树和工具栏，前面四个都可以通过在工具栏中设置而隐去。
仿真器（Simulator）
仿真器中有手机型号和状态栏的选择，最重要的是手机型号。一般选择iphon6为基准，因为我们开发的小程序是要应用到多种移动设备上去的，而设备的屏幕分辨率又各有不同，所以如果用px写死样式，那么换一个设备样式就会坏掉。微信小程序用rpx来解决这个问题的，也就是在一个宽度为375物理像素的屏幕下，1rpx = 375/375=1px。而对于iPhone6，屏幕宽度为750个物理像素，依旧是375px，所以得出1rpx = 375 / 750 px = 0.5px。
目录树（Drectory Tree）
目录树与物理地址之间存在映射关系，而在小程序中访问只是采用相对地址。我们可以看到默认工程的目录树主要包含了三个部分，pages目录，utils目录和一些全局的文件。pages里存放的一般是每一个页面，默认工程里包含两个页面，首页index和一个日志页，每个页面由对应的布局样式文件组成。utils主要放一些工具型函数，比如网络请求，在util.js中实现，然后导出，最后再在需要的页面导入就可以使用其中的某些部件。我们以后可能还会用到组件（Component），我们就可以再建一个名为Component的目录用来存组件。
编辑器（Editor）
如果不喜欢背景的颜色，或者字体大小，可以在设置->外观设置中修改。
结构
代码由.js文件（小程序的主要开发语言是 JavaScript ，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求），.json文件（ JavaScript Object Notation，是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色），.wxml文件（WeiXin Markup language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构），.wxss文件（WeiXin Style Sheet，是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改）组成。
全局配置文件
- Project.config.json：用于配置开发环境。
{
"description": "Project configuration file",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"autoAudits": false
},
"compileType": "miniprogram",
"libVersion": "2.6.6", //库版本
"appid": "wx866f52f21b24eed3", //appID
"projectname": "miniprogram-test-2",
"debugOptions": {
"hidedInDevtools": []
},
"isGameTourist": false,
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"game": {
"currentL": -1,
"list": []
},
"miniprogram": {
"current": -1,
"list": []
}
}
}- app.wxss：整体样式文件，container类可以被项目的每一个页面使用（公共样式）。
/**app.wxss**/
.container {
height: 100%; //高度是整个容器高度
display: flex; //布局方式：flex
flex-direction: column; //主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。
align-items: center; //非主轴方向居中对齐
justify-content: space-between; //项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0
padding: 200rpx 0; //表示一个框内边距--这一层位于内容框的外边缘与边界的内边缘之间
box-sizing: border-box; //用属性box-sizing来调整框模型
background-color: red; //背景颜色
} - app.json：小程序根目录下的
app.json文件用来对微信小程序进行全局配置（静态），文件内容为一个 JSON 对象，pages和window为其众多属性中的两个。前者用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息，后者用于用于设置小程序的状态栏、导航条、标题、窗口背景色。（注：实际书写代码不能放注释）
{
"pages":[ // 页面路径列表
"pages/index/index",
"pages/logs/logs"
],
"window":{ //全局的默认窗口表现
"backgroundTextStyle":"light", //下拉loading的样式，仅支持 dark/light
"navigationBarBackgroundColor": "#fff", //导航栏背景颜色
"navigationBarTitleText": "WeChat", //导航栏标题文字内容
"navigationBarTextStyle":"black" //导航栏标题颜色，仅支持 black / white
}
}- app.js：整个项目的逻辑处理。包括一些生命周期函数的使用，如onLoad、onshow和onReady等。
页面配置文件
- .json：每一个小程序页面也可以使用
.json文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖app.json的window中相同的配置项。 - .wxml：用于构建出对应页面结构
<!--index.wxml--> <!--view:视图容器 类-->
<view class="container"> <!--container：全局的一个容器，样式在app.wxss中-->
<view class="userinfo"> <!--userinfo：存放用户信息的容器，在index.wxss中设置样式-->
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button> <!--button：表单组件：按钮-->
<block wx:else> <!-- <block/> 标签可将多个组件包装起来-->
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <!-- image 媒体组件：图片-->
<text class="userinfo-nickname">{{userInfo.nickName}}</text> <!-- image 文本组件；userinfo-nickname：昵称容器，在index.wxss中设置样式-->
</block>
</view>
<view class="usermotto"> <!-- image 签名容器，在index.wxss中设置样式-->
<text class="user-motto">{{motto}}</text>
</view>
</view>
- .wxss：按照容器类，调整页面样式，提升视觉效果。
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%; //圆形为50%，小于50%为圆角
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px; //外边框顶部与其他容器外边框间隔200px
}hello world！
最简单的hello world只需要一行代码就可以实现，我们先将除Project.config.json外，其他文件中的内容删除，包括logs目录，然后依次在app.json、index.js、index.wxml中填入如下代码，就可以实现hello word。
{"pages":[ "pages/index/index"]}
Page({})<text>hello world!</text>我们来一点一点增加难度，完成一个进阶版的hello world。首先引入变量，在Page类的data属性中添加hello变量，并赋值。然后用{{}}去使用它。
Page({
/**
* 页面的初始数据
*/
data: {
hello:"hello world!"
}
}<view>{{hello}}</view>我们可以给hello word修改一下样式，比如修改背景颜色，修改字体打下颜色等，先给容器取个名字：hello，然后设置样式。
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
</view>.hello_group{
background: #0c960c; //将鼠标放在#0c960c，会弹出色谱，可以根据这个选择自己喜欢的颜色
width: 750rpx;
height: 750rpx;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}微信小程序的view容器 支持两种布局方式：Block 和 Flex，这里我们引入Flex布局来折腾一下我们的hello world，这里设置文字为水平竖直方向居中，选择水平方向从左到右为主轴。
.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}我们把hello world放到两个分别叫hello和word的容器里，然后再用Flex布局。
Page({
data: {
hello:"你好",
world:"世界"
}
）<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
</view>.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}我们接着可以用image组件给小程序一个世界的图片，https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u= 1879049657,3980794066&fm=11&gp=0.jpg。然后发现布局乱了，我们来修改一下，虽然还是比较丑，但是比刚才似乎好了不少。
<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
<image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
</view>.hello_group{
background: #0c960c;
width: 750rpx;
height: 750rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap; //换行
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}
.world_image{
width: 500rpx;
height: 500rpx;
border-radius: 50% //圆形
}我们可以来继续搞事情，底下那么多的空白让强迫症患者肯定很不舒服，加点东西，然后加个滑动窗口。来加一点文字吧，比如就是我们地球的简介。先从百度百科上复制一点文字下来：“地球（Earth）是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1] 它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。地球赤道半径6378.137千米，极半径6356.752千米，平均半径约6371千米，赤道周长大约为40076千米，呈两极稍扁赤道略鼓的不规则的椭圆球体。地球表面积5.1亿平方公里，其中71%为海洋，29%为陆地，在太空上看地球呈蓝色。地球内部有核、幔、壳结构，地球外部有水圈、大气圈以及磁场。地球是目前宇宙中已知存在生命的唯一的天体，是包括人类在内上百万种生物的家园。”然后加进去。再设置一下状态栏。
.hello_group{
background: #0c960c;
width: 750rpx;
height: 700rpx;
display:flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.hello_text
{
color: #fff;
font-size: 100rpx;
}
.world_text{
color: #fff;
font-size: 30rpx;
margin-top: 70rpx;
}
.world_image{
width: 500rpx;
height: 500rpx;
border-radius: 50%
}
.brif_group{
margin-top: 20rpx;
margin-bottom: 80rpx;
margin-left: 20rpx;
margin-right: 20rpx;
}
.brif_title{
color: #13b3e4;
margin-bottom: 20rpx;
font-size: 50rpx;
}
.brif_content{
font-size: 25rpx;
}<view class = "hello_group">
<view class = "hello_text">{{hello}}</view>
<view class = "world_text">{{world}}</view>
<image class = "world_image" src = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1879049657,3980794066&fm=11&gp=0.jpg"></image>
</view>
<view class = "brif_group">
<view class = "brif_title">地球（Earth）</view>
<text class = "brif_content">太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1] 它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。地球赤道半径6378.137千米，极半径6356.752千米，平均半径约6371千米，赤道周长大约为40076千米，呈两极稍扁赤道略鼓的不规则的椭圆球体。地球表面积5.1亿平方公里，其中71%为海洋，29%为陆地，在太空上看地球呈蓝色。地球内部有核、幔、壳结构，地球外部有水圈、大气圈以及磁场。地球是目前宇宙中已知存在生命的唯一的天体，是包括人类在内上百万种生物的家园。
</text>
</view>app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Hello",
"navigationBarTextStyle": "black"
}
}
还有很多没有写，下一篇再继续，太多了看起来累，刚刚开始学习，感觉基本的操作就是先写很多个容器，然后往容器里填写东西，然后再设置一下样式。
参考
