微信小程序之学习笔记

开发工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

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.js //小程序的全局逻辑文件 

├── app.json //小程序的全局配置 

├── app.wxss //小程序的全局样式

├── pages //小程序的页面文件存放文件夹

│ ├── index //index 页面 │ │ ├── index.js

│ │ ├── index.wxml

│ │ └── index.wxss

│ └── logs //logs 页面

│ ├── logs.js //logs 页面的逻辑文件

│ ├── logs.json //logs 页面配置文件

│ ├── logs.wxml //logs 页面的结构文件 html

│ └── logs.wxss //log 页面的样式文件 css

└── utils //公共的 js 代码

└── util.js

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： 

文件 必填 作用

app.js 是 小程序逻辑

app.json 是 小程序公共设置

app.wxss 否 小程序公共样式表

一个小程序页面由四个文件组成，分别是： 

文件类型 必填 作用 

js 是 页面逻辑

wxml 是 页面结构

wxss 否 页面样式表

json 否 页面配置

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同

的路径与文件名。

全局配置 app.json

app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网

络超时时间、设置多 tab 等。

 
注意：配置文件中不能出现注释

app.json 配置项列表

属性 类型 必填 描述

Pages String Array 是 设置页面路径 第一个参数默认首页

Window Object 否 设置默认页面的窗口表现

tabBar Object 否 设置底部 tab 的表现

networkTimeout Object 否 设置网络超时时间

debug Boolean 否 设置是否开启 debug 模式

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项

代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。

小程序中新增/减少页面，都需要对 pages 数组进行修改。 {

 "pages":[

 "pages/index/index",

 "pages/logs/logs"

 ],

}

字段的含义

1. pages

字段用于描述当前⼩程序所有页面路径，这是为了让微信客⼾端知道当前你的小程序

定义在哪个目录。

2. window

字段定义⼩程序所有顶部背景颜色，文字颜色定义等。

3. 完整的配置信息请参考

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

tabbar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

页面配置

开发者可以独立定义每个页面的属性，如顶部颜色、是否允许下拉刷新等等。 页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json
的 window 中相同的配置项。