小程序的本质是：轻应用，就是不用安装就能使用的手机APP。

 

　　“跳一跳”养成了大家下拉寻找常用小程序的习惯。

 

　　小程序对开发者而言也是非常友好的。

 

　　微信就是一个“虚拟机”，小程序使用JavaScript编程，小程序将JavaScript翻译为机器能够识别的Java、OC等语言，能操作硬件，比如蜂鸣器、陀螺仪、相册、闪关灯、摄像头。

 

　　小程序屏蔽了手机操作系统之间的差异，我们写iOS的小程序、安卓的小程序是不需要考虑系统的差异的。

 

　　二、小程序开发账号注册

 

　　一个人最多只能有5个小程序项目，只能有5个小程序AppID，公司账户可以有20个小程序项目。

 

　　https://mp.weixin.qq.com/

 

　　去自己的邮箱点击激活右键的超级链接：

 

　　然后在打开的页面选择个人开发者，需要让你填写身份证号码和用户真实姓名，这里为了隐私就不截图了。

 

　　三、获得AppID下载使用开发者工具

 

　　https://mp.weixin.qq.com/登录

 

　　3.1添加小程序信息

 

　　3.2添加开发者

 

　　可以有15个人为我们的小程序进行测试。

 

　　最高管理员有所有的权限：

 

　　添加了一些同学当做体验者权限：

 

　　3.3获得AppID

 

　　即可看到AppID，备份好。

 

　　3.4开发者工具

 

　　微信官方的开发者工具，集项目创建、开发、调试于一身。

 

　　下载地址：

 

　　https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 

　　安装完毕之后，使用：

 

　　勾选「建立普通快速启动模板」后，会为项目生成一份HelloWorld代码，这样可以方便我们了解小程序框架的代码目录结构。你也可以对比看看不勾选时建立的空项目是如何的。

 

　　微信小程序开发工具集成度很高：

 

　　实时调试热更新

 

　　脚手架起步

 

　　预览自动打包

 

　　控制台有网络请求和console，集成了Chrome浏览器的功能

 

　　由于开发条件的限制，不可能对所有尺寸手机的屏幕进行测试，但往往很多bug出现在屏幕适配的问题上，所以这些提供了很多屏幕尺寸进行测试。

 

　　四、小程序程序开发初步

 

　　4.1认识默认的文件夹结构

 

　　当创建“默认普通快速启动模板”之后，项目会自动创建了一些文件。把这样的能够帮我们起步的工具叫做“脚手架”。React，有脚手架React-cli。Vue有脚手架vue-cli，还有第三方脚手架，比如yeoman。

 

　　零散文件：

 

　　app.js

 

　　微信小程序本质上JavaScript开发，程序都是.js结尾的。

 

　　app.js这个文件是整个小程序的第一个入口文件。写法必须是App({})。App函数是小程序内置的，每个项目必须有且只能有一个，必须出现在app.js中。大括号中描述这个App的一些生命周期和全局数据。

 

　　app.json

 

　　小程序当前项目的“程序配置”。可以配置小程序有哪些页面，标题栏，tab栏等内容。

 

　　app.wxss

 

　　小程序的全局的样式表，小程序使用wxss而不是css，基本上和css差不多。这个样式表是所有页面都能够看见的样式。

 

　　project.config.json

 

　　项目配置文件

 

　　通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等，当你换另外一台电脑重新安装工具时，还要重新配置。

 

　　project.config.json文件就是为了减少开发者重复配置开发工具而产生的，通过json数据格式，每个小程序项目都在配置文件里定义了开发者习惯的配置参数，无论开发环境如何变更，只要载入同一个项目的代码包，开发者工具就通过project.config.json自动恢复开发项目的个性化配置，其中会包括编辑器的颜色、编辑设置、代码上传时自动压缩等等一系列选项。

 

　　关于其他配置项细节可以参考文档「开发者工具的配置」。

 

　　事实上这个文件不需要手动更改，可以在菜单中可视化面板进行更改。

 

　　page.json页面配置文件

 

　　作为页面的个性化配置，page.json里只能定义app.json中window相关的配置项，这部份比较简单，可以直接参考文档「小程序的配置page.json」，这里不作赘述。

 

　　删除app.js文件大括号中的默认配置：

 

　　App({});

 

　　看一下pages文件夹，文件夹中的子文件夹就是小程序的一个个页面。一个页面就是一个文件夹。

 

　　每个页面文件夹中，有四个文件，都是同名文件。

 

　　.js

 

　　页面的程序逻辑

 

　　.json

 

　　页面的配置

 

　　.wxml

 

　　页面的结构，类似于HTML

 

　　.wxss

 

　　页面的样式表

 

　　将index.wxml的页面删除干净：

 

　　<viewclass="container">

 

　　<view>你好，我是小程序</view>

 

　　</view>

 

　　将index.js文件删干净：

 

　　Page({});

 

　　这里Page函数是内置的函数，表示创建一个页面。大括号中的内容是页面的一些生命周期、数据。

 

　　删除logs文件页面，和utils文件夹，此时项目非常干净：

 

　　4.2app.json全局配置

 

　　每个小程序都是由多个页面组成的，但在这些页面之上，存在被所有页面共用的内容，比如标题颜色，网络超时设置等，这些被统称为「全局配置」，而app.json文件里保存的就是这些配置内容。

 

　　「全局配置」包含5个部份，包括：

 

　　pages「页面路径」：用于指定小程序里所有页面对应的目录路径，只有加入到这个配置项里，页面才会生效

 

　　window「窗口表现」：用于指定小程序窗口的外观表现，比如上面提到的标题颜色、背景颜色等等

 

　　tabBar「底部tab」：小程序允放进开发者设置底部tab进行页面切换，这个配置项就是用于定义底部tab按钮样式。

 

　　networkTimeout「网络请求超时」：在开发小程序的开发过程中，不可避免会出现网络请求失败的情况，如果没有设置一个网络超时时间，在出现错误的时候，小程序就会一直等待请求响应数据，如果有了超时时间，在超过设置的时间没有收到数据时，我们可以为用户输出异常反馈信息，并引导用户后续可以尝试的操作，提高程序代码的可用性

 

　　debug「调试模式」：开启调试模式时，调试信息会输出到控制台里，包括页面路由，数据更新，事件触发等，可以帮助开发者快速定位常见问题。

 

　　关于其他配置项细节可以参考文档「小程序的配置app.json」。

 

　　手册：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

 

　　4.2.1pages配置

 

　　接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数组进行修改。

 

　　文件名不需要写文件后缀，因为框架会自动去寻找路径下.json,.js,.wxml,.wxss四个文件进行整合。

 

　　4.2.2window配置

 

　　写程序就两个东西：API、算法，API不用背，算法忘不掉。

 

　　{

 

　　"pages":[

 

　　"pages/index/index",

 

　　"pages/haha/haha"

 

　　],

 

　　"window":{

 

　　"backgroundTextStyle":"light",

 

　　"navigationBarBackgroundColor":"#2bb",

 

　　"navigationBarTitleText":"小灰灰的家",

 

　　"navigationBarTextStyle":"white",

 

　　"backgroundColor":"#eee"

 

　　}

 

　　}

 

　　示例代码

 

　　4.2.3tabBar配置

 

　　tabBar的属性：

 

　　其中list属性数组项的属性：

 

　　更改之后的完整的app.json文件：

 

　　{

 

　　"pages":[

 

　　"pages/index/index",

 

　　"pages/meishi/meishi",

 

　　"pages/lvyou/lvyou"

 

　　],

 

　　"window":{

 

　　"backgroundTextStyle":"light",

 

　　"navigationBarBackgroundColor":"#2bb",

 

　　"navigationBarTitleText":"WeChat",

 

　　"navigationBarTextStyle":"black"

 

　　},

 

　　"tabBar":{

 

　　"color":"#eee",

 

　　"selectedColor":"#2bb",

 

　　"backgroundColor":"#fff",

 

　　"list":[

 

　　{

 

　　"text":"首页",

 

　　"pagePath":"pages/index/index",

 

　　"iconPath":"images/i1_a.png",

 

　　"selectedIconPath":"images/i1_b.png"

 

　　},

 

　　{

 

　　"text":"美食",

 

　　"pagePath":"pages/meishi/meishi",

 

　　"iconPath":"images/i2_a.png",

 

　　"selectedIconPath":"images/i2_b.png"

 

　　},

 

　　{

 

　　"text":"旅游",

 

　　"pagePath":"pages/lvyou/lvyou",

 

　　"iconPath":"images/i3_a.png",

 

　　"selectedIconPath":"images/i3_b.png"

 

　　}

 

　　]

 

　　}

 

　　}

 

　　4.3小程序开发语言

 

　　小程序采用WXML+WXSS+JS三种开发语言组合，其和网页编程采用的HTML+CSS+JS类似，WXML用来描述当前这个页面的结构，WXSS用来描述页面的样式，JS用来处理这个页面和用户的交互。

 

　　4.3.1WXML

 

　　WXML（WeXinMarkupLanguage）和HTML类似，也有标签和属性，但针对小程序平台做了些优化。

 

　　相较HTML，小程序的标签显得更加简洁，比如div、section、header等块级标签统一为view、p、span、b等文案类标签统一为text，同时新增很多实用标签，比如picker滚动选择器、map地图、web-view网页容器等。

 

　　可以简单理解为，小程序所有的标签都是原生组件。

 

　　4.3.2WXSS

 

　　WXSS（WeXinStyleSheets）是微信定义的一套样式语言，其具有CSS大部分特性，同时为了更适合开发微信小程序，WXSS对CSS进行了扩充以及修改。

 

　　小程序使用rpx（responsivepixel）作为尺寸单位。屏幕宽度固定为750rpx，设置了rpx单位的元素可以根据屏幕宽度进行自适应，所以设计稿统一以750px输出（iPhone6标准）。

 

　　小程序没有html、body标签，如果想要设置页面的样式，可以直接使用page选择器：

 

　　page{background:#FFFFFF;}

 

　　4.3.3JavaScript

 

　　小程序中JavaScript没有window、document等变量，大部分浏览器中全局方法会被禁用，比如alert。但也有部分被支持，比如setTimeout、encodeURIComponent等，具体可以在开发者工具中尝试使用，官方文档并没有详细的介绍。

 

　　五、WXSS与CSS的开发差异

 

　　5.1选择器

 

　　小程序官网上只列出6种可支持的选择器，实际上可支持的选择器很多。通过图表，我们可以对比WXSS与CSS选择器的差异：