微信小程序开发 [01] 小程序基本结构和官方IDE简介

1、小程序账户注册

实际上在进行开发时没有注册小程序账户也是可以的，官方提供的IDE提供实时编译模拟预览，和当前你有没有绑定小程序账户没有关系。

当然，最终你要正式上线你的小程序的话，肯定还是需要账户的，申请流程不再阐述了，请参考官方文档《小程序注册》，个人开发者选择个人就行了。

2、官方demo和基本结构

在下载官方的小程序开发工具之后，新建项目选择小程序：

 

然后IDE会自动生成一个简单的小程序，如下：

 

在中间的目录结构中可以看到，不论是根目录下还是其他单个模块的页面下，有这四类文件：

• .js  编写函数，处理页面逻辑
• .json  页面配置
• .wxml  页面骨架结构
• .wxss  页面样式表

可以看到，除了 .js 和 .json，.wxml 和 .wxss 是两个我们比较陌生的文件类型，实际上两种文件是微信另外规定的格式，会由小程序进行专门的编译，这里的 .wxml 和 html 相似，那么 .wxss 不用多说，就和 css 相似了。因为是微信官方特殊定义的形式，所以在用法上就得参照官方的API，因为各组件已经和html中的组件使用不再相同，不过 .wxss 和 css 在我目前接触的范围来看倒基本是通用的。

整个小程序的构成分为 ”主体“ 和 ”页面“，即包含一个描述整体程序的app和多个描述各自页面的page：

 

其中主体就是指整个整体程序，页面自然是指代在小程序中要跳转的各个页面。这样一来，那么demo中的那些文件也就好解释了：

• app.xx 指代的就是小程序主体相关的设置，因为主体不存在页面，所以也就没有 app.wxml
• app.xx 必须在根目录下，有且只有这一套

• 其他的在某个页面分类文件夹下的 xx.js / xx.json / xx.wxml / xx.wxss 则分别表示指定页面的逻辑/配置/结构/样式
• 描述页面的四个文件必须具有相同的路径与文件名
• js文件和json不能为空，前者必须至少包含代码 Page({ })，后者必须至少包含空的json对象 { }，否则编译出错

而每种文件特别是json和js两种文件的具体配置和参数，默认对象等，这里就不再展开了，详情参考官方文档《文件结构》

3、IDE界面基本说明

如上图，整个IDE分为四个部分：

• 中间的文件目录树
• 模拟器（左侧）
• 编辑器（右上）
• 调试器（右下）

其中调试器是不是很熟悉？没错，和你用的chrome开发者工具一模一样，稍微有点要提醒的是：

• .js 类型的文件，在Sources中都有两个，其中 xx.js 是编译后的，xx.js ?[sm] 才是和我们实际文件相同，调试时使用 xx.js ?[sm]

 

• Storage可以看到当前小程序的缓存内容

 

• AppData可以查看当前程序中的数据信息

 

最后，模拟器的预览和执行必须在编译后，所以每当你代码进行了更新，先点击一下”编译“，效果才会是最新的。