微信小程序开发教程3：熟悉项目结构并创建home页面

平凡也就两个字: 懒和惰;
成功也就两个字: 苦和勤;
优秀也就两个字: 你和我。
跟着我从0学习JAVA、spring全家桶和linux运维等知识，带你从懵懂少年走向人生巅峰，迎娶白富美！
关注微信公众号【 IT特靠谱 】，每天都会分享技术心得~

 

微信小程序开发教程3：熟悉项目结构并创建home页面

 

1 项目初始化结构

      创建小程序项目后，初始化项目结构如下:

      （1）pages目录：存放所有小程序页面

      （2）utils目录：存放通用js工具

      （3）app.js：app项目入口

      （4）app.json：全局（公共）配置文件。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。详见官方文档：

             https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

      （5）app.wxss：全局（公共）样式文件。

      （6）project.config.json：项目配置文件。配置项目参数，如：appid等配置。里面的参数其实就是右上角“详情”页面展示的配置信息。既可以修改详情页的参数，也可以修改project.config.json来达到同样目的！

 

2 创建一个home页面

      上面项目结构中可以看到初始化项目时有两个页面：index和log。那么我们如何创建一个页面呢？

      可以安装如下步骤进行创建新page：

      （1）打开app.json全局配置文件，在pages配置里面新增"pages/home/index"；注意小程序的所有页面都要配置到app.json中！

      （2）ctrl + s保存，小程序工具会自动给我们生成home页面的4要素（index.js、index.wxml、index.wxss和index.json）文件。

 

3 默认启动显示home页面

      上面成功新建了一个home页面。但是编译项目后，默认打开的还是index页面。如何让项目启动的时候默认打开的是我们创建的home页面呢？答案是：将app.json全局配置文件中pages配置的"pages/home/index"移动到最上面。这样小程序启动后，默认打开的就是home页面了！

      调整后，配置如下：

      重新编译下，可以看到小程序默认显示home页面：

      如果对你有疑问或需要技术支持，关注公众号联系我吧~