微信小程序开发基础1-全局页面配置

微信小程序的基础入门

开发者工具的使用

在有空的时候可以点开微信开放文档查看

微信开放文档 (qq.com)

快捷键

Ctrl+S：保存文件
Ctrl+【， Ctrl+】：代码行缩进
Ctrl+Shift+【， Ctrl+Shift+】：折叠打开代码块
Ctrl+C Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行
Shift+Alt+F：代码格式化
Alt+Up，Alt+Down：上下移动一行
Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行
Ctrl+Shift+Enter：在当前行上方插入一行

Ctrl+End：移动到文件结尾
Ctrl+Home：移动到文件开头
Ctrl+i：选中当前行
Shift+End：选择从光标到行尾
Shift+Home：选择从行首到光标处
Ctrl+Shift+L：选中所有匹配
Ctrl+D：选中匹配
Ctrl+U：光标回退

在全局配置app.json中有两个字段分别为pages和window字段

小程序配置 | 微信开放文档 (qq.com)

详细的使用可以参考上方链接

pages

在开发者工具中我们可以找到pages下通过代码增加小程序的界面比如在下图的pages中加入 "pages/deom01/deom01"

可以看到在文件夹中增加了一个叫demo01的文件夹，这就是我们为小程序添加的页面（这里要注意一下，只有最后一条命令不加","其他的后面都要用逗号隔开）

window

window用于小程序所有页面的顶部样式。通过单词不难看出第二个是顶部背景颜色，#fff是白色，而这里我改成了#0094ff就改成了蓝色

第三个自然就是标题

第四个是字体颜色（这里只能是black或者white）

下面补充在window中常用的命令

下拉条刷新

下拉条刷新的颜色这里背景是white所以用黑色dark才看得见

下拉刷新区域的颜色

标签页tabbar

自行在app.json中增加tabar字段

list就是一个页面，list里有几个{}对应底部就有几个选项

pagepath对应相应的页面，text对应底部选项的名字

这里要注意一下iconpath是代表未选中当前页面的时候显示的图标，selectediconpath是选中时显示的图标，这里面的参数都应该加上后缀，比如这里.png不加的话就会一直报错

全局配置 | 微信开放文档 (qq.com)

这个链接里有全局配置里的各个模块，点击对应的模块有各模块里详细的配置属性当不知道时可以点击查看

页面配置

每个页面文件都有对应的json，里面对应的属性控制和window中的差不多，但是在页面的json中我们可以控制单个界面显示时的效果，包括标题栏的名称颜色。

sitemap