本文主要为使用微信小程序开发项目前的准备工作及项目和页面基础信息介绍。
目录
小程序开发准备
申请测试号
先体验一下，申请一个测试账号。
网址：小程序
点击前往申请，就会跳转到一个有二维码的页面，使用微信扫描确认后即可生成测试账号。
登录测试账号
使用微信平台登录，选择微信扫码登录。
使用微信扫码后，从小程序列表中选择测试小程序，即可登录。
这样就拥有了AppId和AppSecret，就可以进入开发了。
安装微信开发者工具
可以从官网上下载微信开发者工具压缩包，下载后解压后双击开始安装。
选择自定义文件夹-安装完成
创建小程序
可以自定义项目名称和目录，如填写项目名称为“miniTest”，目录为“E:\miniTest”。
参数介绍
AppID：填写注册的小程序获取的AppID即可。如果不想使用自己的AppID，也可以使用测试号，二者的区别是，前者能够使用的功能比后者多，例如代码的上传和发布。
开发模式：直接默认小程序即可。
后端服务：有“微信云开发”和“不使用云服务”两种选择。在“微信云开发”中，开发者无须搭建服务器，即可使用云函数、云数据库、云存储和微信云托管等完整云端能力。云开发较难，选择不使用云服务。
模板选择：微信开发者工具提供了多种模板用于快速创建微信小程序项目。
为了方便学习，此处选择“不使用模板”。
将上图中的内容填写完成后，单击“确定”按钮创建微信小程序项目。
稍作等待后，微信小程序项目即可创建完成。
微信小程序项目
项目结构
微信小程序项目创建完成后，微信开发者工具会自动创建微信小程序的项目结构。
如下图：
pages
用于存放微信小程序的所有页面。
eslintrc.js
用于格式化代码，使代码风格保持一致。
app.js
入口文件，用于描述微信小程序的整体逻辑。
app.json
全局配置文件，用于设置页面路径、窗口外观、页面表现、标签栏等。
app.wxss
全局样式文件，文件可以为空。
project.config.json
在微信开发者工具上做的任何配置都会写入这个文件中，当重新安装工具或者更换计算机工作时，只要载入同一个项目的代码包，微信开发者工具会根据该文件自动恢复成开发微信小程序时的个性化配置。
project.private.config.json
用于保存微信开发者工具的私人配置，
配置的优先级高于project.config.json。
sitemap.json
用于配置微信小程序及其页面是否允许被微信索引，如果没有该文件，则默认为所有页面都允许被索引。当开发者允许微信小程序页面被微信索引时，微信会通过爬虫的形式，为微信小程序的页面建立索引。当用户的搜索词条触发该索引时，微信小程序的链接地址将可能展示在搜索结果中。
项目加载流程
微信客户端在启动微信小程序时，首先会把整个微信小程序的代码包下载到本地；
然后解析app.json全局配置文件，通过该文件解析出微信小程序的所有页面路径；
接着执行app.js入口文件，调用App()函数创建微信小程序的实例；
最后渲染微信小程序的首页。
微信小程序页面
一个微信小程序是由一个或多个页面组成的，这些页面被存放在pages目录中。
页面组成
下面以pages目录下的index页面为例展示其组成部分。
index页面的组成部分如下图所示：
index页面由4个文件组成，即：index.js、index.json、index.wxml和index.wxss。
分别使用JS、JSON、WXML和WXSS语言编写，关于这4种语言的说明如下：
JS
类似网页制作中的JavaScript语言，用于实现页面逻辑和交互，文件扩展名为.js。
注意：微信小程序中的JS不含DOM和BOM，但它提供了丰富的API，可以实现许多特殊的功能，例如微信登录、音频播放、文件上传等。
JSON
JavaScript对象符号（JavaScript Object Notation）：用于利用JSON语法对页面进行配置，文件扩展名为.json。
WXML
微信标记语言（WeiXin Markup Language）：类似于网页制作中的HTML语言，用于构建页面结构，文件扩展名为.wxml。
WXSS
微信样式表（WeiXin Style Sheets）：类似于网页制作中的CSS语言，用于设置页面样式，文件扩展名为.wxss。
加载页面流程
微信客户端在加载微信小程序页面时，首先读取并解析页面中JSON文件的配置；
然后加载页面的WXML文件、WXSS文件和JS文件，实现页面渲染。
其中，页面中WXSS文件的样式会覆盖项目根目录下的app.wxss文件中相同的全局样式；
页面中JS文件的Page()函数会被调用，用于创建页面实例。
总结
本文主要为使用微信小程序开发项目前的准备工作及项目和页面基础信息介绍。
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
