type
status
date
slug
summary
tags
category
icon
password
今天继续来写微信小程序系列的第二篇，简单记录一下项目的基本结构、开发第一个页面以及如何在 vscode 中开发微信小程序
项目结构
较为完整的项目结构如图，其中：
pages
存放各个页面文件
每一个页面文件夹都默认包含
.wxml、.wxss、.js、.json后缀的文件。其中.wxml存放页面元素，即html；.wxss存放页面样式，即css；.js存放页面的逻辑代码；.json存放页面配置components
存放公共组件
request
api 接口
utils
存放配置项、封装的工具函数等
styles
公共样式
images
公共图片
全局配置
app.js
调用App()，注册一个小程序
app.json
全局配置
app.wxss
全局样式
开发第一个页面
新建小程序项目后，点击编译即可运行当前项目。接下来，我们来创建新页面并展示！创建页面有两种方式：
1. 在
pages中创建demo文件夹，然后在demo中在分别创建.wxml、.wxss、.js、.json后缀的文件；最后我们在app.json中的pages中添加新创建的demo文件夹的路径即可
2. 第一种方式并不推荐，比较繁琐，接下来展示第二种方式：我们不需要事先创建好demo文件夹，而是直接在app.json中的pages中添加需要创建的demo路径，然后手动保存一下，那么小程序开发工具就已经帮我们把pages中的demo文件创建好了！
注意：小程序默认加载app.json中pages数组中的第一个元素。所以，如果你希望小程序在初始化时默认加载哪个页面，只需要将其路径放在第一个即可！VSCode 开发小程序
使用VSCode开发前，先安装微信小程序开发工具插件，这样在VSCode中就支持小程序语法啦。我们可以在VSCode中敲击代码，然后在小程序开发编辑器中保存并查看效果，也可以进行真机调试等。
注意：如果是在VSCode中开发，那么上述第二种创建页面的方式就无效了！
- 作者:Leeson
- 链接: /article/wx-2
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章