微信小程序开发学习报告

微信小程序开发

（参考文档）

起步

1.申请账号

根据指引填写信息和提交相应资料，拥有自己的小程序账号

2.安装开发工具

下载地址

3.创建第一个小程序

新建项目，选择小程序项目，选择代码存放的硬盘路径，填入申请小程序时得到的AppID，给小程序命名，最后，勾选“创建QuickStart项目”（注意：你要选择一个空的目录才有这个选项），点击确定，这样就得到了第一个小程序了。点击顶部菜单编译就可以在IDE预览你的第一个小程序。

代码构成

1.JSON配置文件

1.1 app.json

app.json是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。配置项列表：

pages: 接受一个数组， 每一项都是字符串，来指定小程序由哪些页面组成。每一项对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对pages数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径下.json，.js，.wxml，.wxss四个文件进行整合

window：用于设置小程序的状态栏、导航条、标题、窗口背景色。

tab：如果小程序是一个多tab应用（客户端窗口底部或顶部有tab栏可以切换页面），可以通过tabBar配置项指定tab栏的表现，以及tab切换时显示的对应页面。（当设置position为top时，将不会显示icon；tabVar中的list是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序）

networkTimeout：可以设置各种网络请求的超时时间

debug：可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发。可以帮助开发者快速定位一些常见的问题。

1.2 page.json

每一个小程序页面也可以使用json文件来对本页面的窗口表现进行配置。页面的配置比app.json全局配置简单得多，只是设置app.json中的window配置项的内容，页面中配置项会覆盖app.json的window中相同的配置项。页面的json只能设置window相关的配置项，以决定本页面的窗口表现，所以无需写window这个键。

1.3 project.config.json

小程序开发者工具在每个项目的根目录都会生成一个project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到你开发项目时的个性化配置，其中包括编译器的颜色、代码上传时自动压缩等一系列选项。

2.WXML模板

WXML用来描述当前页面的结构，和HTML非常相似，有标签、属性等构成。但也有很多不一样的地方。详见WXML

2.1 标签名字不一样。

写HTML时，经常用到的标签是div,p,span，开发者在写一个页面的时候可以根据这些基础的标签组合成不一样的组件，如日历、弹窗等。WXML把这些常用的组件包装起来，用的是view，button，text等小程序给开发者包装好的基本功能。

小程序的组件

2.2 多了一些wx:if这样的属性以及这样的表达式

在网页的一般开发流程中，我们通常用JS操作DOM，这样代码会充斥这非常多的界面交互逻辑和程序的各种状态变量。因此有了MVVM的开发模式（例如React，Vue），提倡吧渲染和逻辑分离，简单来说就是不让JS直接操控DOM，JS只用管理状态即可，然后通过一种模板语法来描述状态和界面结构的关系。WXML通过的语法（Mustache 语法）把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要if/else,for等控制能力，在小程序里边，这些控制能力都用wx:开头的属性来表达

3.WXSS样式

WXSS具有CSS大部分的特性，小程序在WXSS也做了一些扩充和修改

3.1 新增了尺寸单位

在写CSS样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位rpx，开发者可以免去换算的烦恼

3.2 提供了全局的样式和局部样式

3.3 WXSS仅支持部分CSS选择器

4.JS交互逻辑

通过编写JS脚本响应用户操作或者调用API。