微信小程序入门系列学习笔记：（一）认识微信小程序开发者工具、代码结构并用一个进阶版的hello word！玩遍微信小程序基本操作

本文主要是介绍微信小程序入门系列学习笔记：（一）认识微信小程序开发者工具、代码结构并用一个进阶版的hello word！玩遍微信小程序基本操作，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

由于项目需要，最近开始了微信小程序开发的学习，从官方的开发工具开始。微信小程序无论是从开发难度还是从便捷性上来讲都是不错的选择，而且对于学生来说也不必考虑太多的东西。这个系列就是就是打算写一下学习笔记，以后可以参考，也是一种回忆，如果能够给有缘阅读到的人一点点帮助，那真是荣幸之至。

准备

开发者工具
系统：win7及以上版本

工具

安装和建立工程都很简单，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;                                       //布局方式：flexflex-direction: column;                              //主轴纵向，方向从上指向下。项目沿主轴排列，从上到下排列。                                                  align-items: center;                                 //非主轴方向居中对齐justify-content: space-between;                      //项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0padding: 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" }
}