微信小程序官方文档
https://developers.weixin.qq.com/miniprogram/dev/index.html
https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a
第一步:
安装开发工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19040320
前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。
打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!
第二步:
体验你的第一个小程序
打开ide,选择新建项目
完成后进入项目,如图:
第三步:
认识小程序文件目录结构
app.js 小程序逻辑
app.js文件是微信小程序项目的入口文件
https://www.cnblogs.com/e0yu/p/8488133.html
app.json 小程序公共配置
app.json
是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
app.wxss 小程序公共样式表
微信小程序公共样式表,作用于全部页面
https://www.jianshu.com/p/d016c7f64ad1
project.config.json 工具配置
通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json
,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
sitemap.json 微信索引配置
小程序根目录下的 sitemap.json
文件用来配置小程序及其页面是否允许被微信索引。
util文件夹下的util.js 公用函数
提供公共方法的,如果你没有用到。可以删掉
page文件夹下的 index 和 log 各个页面目录
一个小程序页面由四个文件组成,分别是:
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
json | 否 | 页面配置 |
wxss | 否 | 页面样式表 |
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。
page.json 页面配置
这里的 page.json
其实用来表示 pages/logs 目录下的 logs.json
这类和小程序页面相关的配置。
如果你整个小程序的风格是蓝色调,那么你可以在 app.json
里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了 page.json
,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。