WX官方参考资料：
https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Resource_Center_Homepage.html
image.png
本文只侧重于记录前端开发过程：
WX公众平台，可扫码
一. 创建项目流程（开发者）
1.获取 小程序id
• 小程序后台–>开发–>开发管理–>开发设置–>开发者ID
• AppID(小程序ID) wxxxxxxxxxxx
image.png
2.下载开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
image.png
3.微信开发者工具新建项目
image.png
页面更改即时渲染
image.png
4.模拟器设置
基础设置
• 设置–>编辑器设置–>改变字体大小
• 视图–>外观–>移动模拟器位置
• 可以勾选掉不显示：模拟器，调试器等
二.项目目录结构
2.1 项目目录结构
2.1.1 目录介绍
1.项目主配置文件，在项目根路径下，控制整个项目的
• app.js # 小程序入口文件，小程序启动就执行这个js
• app.json # 小程序的全局配置：顶部的颜色，标题
• app.wxss # 小程序全局样式：所有样式，全局生效
app.js 和app.json 必须有
image.png
2.页面文件
• pages文件夹下，有很多文件夹（login,register,home,my）–>每个文件夹下有4个文件
• xx.js # 页面逻辑，js代码控制(一些工具js可以跟js文件平行放置，也可以放在utils文件夹)
• xx.wxml # 页面结构，布局，html—>wxml就等同于html，但标签有些区别
• xx.json # 页面配置，当前页面顶部颜色，标题（暂时只用来配置引入自定义导航了）
• xx.wxss # 页面的样式，如果全局样式也有，以当前页面为准
xx.js和xx.wxml 必须有
image.png
3.项目主结构
├── components 【页面中使用的组件】
├── pages 【页面文件目录】
│ ├── index 【页面】
│ │ ├── index.js 【页面JS】
│ │ ├── index.json 【页面配置】
│ │ ├── index.wxml 【页面HTML】
│ │ └── index.wxss 【页面CSS】
│ └── logs 【页面】
│ ├── logs.js …
│ ├── logs.json …
│ ├── logs.wxml …
│ └── logs.wxss …
├── utils 【自定义工具】
│ └── utils.js 【功能的定义】
├── app.js 【全局JS】
├── app.json 【全局配置】
├── app.wxss 【全局CSS】
├── project.config.json 【开发者工具默认配置】
├── project.private.config.json 【开发者工具用户配置,在这里修改，优先用这个，可以删除】
├── .eslintrc.js 【ESlint语法检查配置】
├── sitemap.json 【微信收录页面，用于搜索，上线后，搜索关键字就可以搜到我们】
至此我们可以开始专注进行我们的页面的开发了
app.josn文件在后续主包和分包文件里将在后续相关文章二里一起介绍。
