小程序实现组织架构图插件 小程序框架图

1 小程序框架介绍

微信小程序原生框架——MINA框架

一个对比：

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

每一个页面都应当有这四种文件。

1. utils放的是帮助文档的js。
2. app.js入口文件，全局文件。
3. app.json 全局的标题设置（局部也可修改）。
4. app.wxss全局样式设置。
5. project.config.json和工具栏-详情按钮的内容相同。
6. sitemap.json配置子页面是否能在微信内搜索到。

2 全局配置文件（app.json）

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，详见链接

2.1 pages字段

表明当前项目有几个子页面。

如图就只有index和logs两个子页面

新增页面的技巧

1. 在page字段内输入想要添加页面的名称如：page/demo01/demo01，注意逗号。
3. 编译（ctrl+r）或保存（ctrl+s）即可自动创建有关文件。



4. 如果想以demo01为首页，将相应字段放在pages字段第一行即可。alt+上下键可以快速调整某一行代码的位置哦！
5. 如果是从vscode中操作的话先随便按几个空格再保存即可。

2.2 window字段

定义小程序所有页面的顶部颜色，文字颜色定义等（全局默认窗口表现）。

1. navigationBarBackground：导航栏背景色
2. navigationBarTitleText：导航栏文字内容。
3. navigationBarTextStyle：导航栏文字颜色，只能是白色white黑色black。
4. enablePullDownRefresh：是否开启全局的下拉刷新。
5. backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light_{需设置“enablePullDownRefresh”=true才能看到效果哦}
6. backgroundColor：窗口的背景色
7. 小tips：

1. 建议在微信开发工具中写配置文件，因为可以自动补全，而vscode里不可以哦（好像也没有相关的辅助插 件）。
2. 同时注意配置文件里不能写注释哦！

2.3 tabbar字段

1. pagePath：点击后跳转页面的路径。
2. text：显示的文本内容。
3. iconPath：未选中时显示的图标的路径。
4. selectedIconPath：选中时显示的图标的路径。
   其他属性就不说了，那张图也挺全的，想了解更多直接看开发者文档 吧。
   PS：路径为相对路径，还有安利一个icon的网站这个是阿里的icon库，超多。

3 页面配置page.json

每一个小程序页面(如demo01)可以使用 .json 文件来对本页面的窗口（window）表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项，文件内容为一个 JSON 对象，可配置属性详见开发文档链接。强调一下，只能覆盖window中的相同配置项。

4 sitemap.json配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；属性详见开发文档初期学还用不到