微信小程序入门教程：从零开始，轻松上手！

推荐阅读

智能化校园：深入探讨云端管理系统设计与实现（一）
智能化校园：深入探讨云端管理系统设计与实现（二）

---

小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
小程序优点：无需安装，不占内存，易传播

小程序生态

开发准备

注册登录账号，安装开发者工具
小程序注册指引 | 微信开放社区

小程序配置

全局配置

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

属性	类型	描述
entryPagePath	string	小程序默认启动首页
pages（必填）	string[]	页面路径列表
window	Object	全局的默认窗口表现
tabBar	Object	底部 tab 栏的表现
networkTimeout	Object	网络超时时间
debug	boolean	是否开启 debug 模式，默认关闭
functionalPages	boolean	是否启用插件功能页，默认关闭
subpackages	Object[]	分包结构配置
workers	string	Worker 代码放置的目录
requiredBackgroundModes	string[]	需要在后台使用的能力，如「音乐播放」
requiredPrivateInfos	string[]	调用的地理位置相关隐私接口
plugins	Object	使用到的插件
preloadRule	Object	分包预下载规则
resizable	boolean	PC 小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad 小程序是否支持屏幕旋转。默认关闭
usingComponents	Object	全局自定义组件 配置
permission	Object	小程序接口权限相关设置
sitemapLocation（必填）	string	指明 sitemap.json 的位置
style	string	指定使用升级后的weui样式
useExtendedLib	Object	指定需要引用的扩展库
entranceDeclare	Object	微信消息用小程序打开
darkmode	boolean	小程序支持 DarkMode
themeLocation	string	指明 theme.json 的位置，darkmode为true为必填
lazyCodeLoading	string	配置自定义组件代码按需注入
singlePage	Object	单页模式相关配置
supportedMaterials	Object	聊天素材小程序打开 相关配置
serviceProviderTicket	string	定制化型服务商 票据
embeddedAppIdList	string[]	半屏小程序 appId
halfPage	Object	视频号直播半屏场景设置
debugOptions	Object	调试相关配置
enablePassiveEvent	Object或boolean	touch 事件监听是否为 passive
resolveAlias	Object	自定义模块映射规则
renderer	string	全局默认的渲染后端

entryPagePath

默认首页面。（不填，即默认pages列表的第一项）不支持带页面路径参数。

{
  "entryPagePath": "pages/index/index"
}

pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

在创建文件夹时，可以直接选用创建page.系统会自动创建好4个文件。

（未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。
小程序中新增/减少页面，都需要对 pages 数组进行修改。

 "pages": [
    "pages/helloword/helloword",
    "pages/index/index"
  ]

window

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

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor（十六进制颜色）	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。
homeButton	boolean	default	在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启全局的下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为 px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化
restartStrategy	string	homePage	重新启动策略配置
initialRenderingCache	string		页面初始渲染缓存 配置，支持 static / dynamic
visualEffectInBackground	string	none	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none
handleWebviewPreload	string	static	控制预加载下个页面的时机 。支持 static / manual / auto

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#fff",
    "enablePullDownRefresh": true
  }

tabBar

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

属性	类型	必填	默认值	描述
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色， 仅支持 black / white
list	Array	是		tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 bottom / top
custom	boolean	否	false	自定义 tabBar，见详情

list 接受一个数组，至少2个最多5个tab。每一项都是一个对象。

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

iconfont可以去这里面找不同的颜色的图标。
iconfont-阿里巴巴矢量图标库

"tabBar": {
    "color": "#8a8a8a",
    "selectedColor": "#1AAD16",
    "backgroundColor": "#fff",
    "list": [
      {"pagePath": "pages/helloword/helloword",
      "text": "首页",
      "iconPath": "images/tabbar/tabbar1.png",
      "selectedIconPath": "images/tabbar/tabbar1_selected.png"
      },
      {
        "pagePath":"pages/index/index" ,
        "text": "测试"
      }
    ]

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。
:::danger
“debug”: true
:::

permission

微信客户端 7.0.0 及以上版本支持

小程序接口权限相关设置。字段类型为 Object，结构为：

属性	类型	必填	默认值	描述
scope.userLocation	PermissionObject	否		位置相关权限声明

PermissionObject 结构

属性	类型	必填	默认值	说明
desc	string	是		小程序获取权限时展示的接口用途说明。最长 30 个字符

{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }
}

sitemapLocation

指明 sitemap.json 的位置；默认为 ‘sitemap.json’ 即在 app.json 同级目录下名字的 sitemap.json 文件

"sitemapLocation": "sitemap.json"

themeLocation

自定义 theme.json 的路径，当配置"darkmode":true时，当前配置文件为必填项。

{
  "themeLocation": "/path/to/theme.json"
}

renderer

指定小程序全局的默认渲染后端。
可选值：webview, skyline
默认值：webview

页面配置

app.json 中的部分配置，也支持对单个页面进行配置，可以在页面对应的 .json 文件来对本页面的表现进行配置。
页面配置项的优先级大于全局配置。页面中配置项在当前页面会覆盖 app.json 中相同的配置项（样式相关的配置项属于 app.json 中的 window 属性，但这里不需要额外指定 window 字段）。
文件内容为一个 JSON 对象，有以下属性（以下属性，页面配置可以覆盖全局配置）：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮。
homeButton	boolean	false	在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 dark / light
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 auto / portrait / landscape 详见 响应显示区域变化
disableScroll	boolean	false	设置为 true 则页面整体不能上下滚动。 只在页面配置中有效，无法在 app.json 中设置
usingComponents	Object	否	页面自定义组件 配置
initialRenderingCache	string		页面初始渲染缓存 配置，支持 static / dynamic
style	string	default	启用新版的组件样式
singlePage	Object	否	单页模式相关配置
restartStrategy	string	homePage	重新启动策略配置
handleWebviewPreload	string	static	控制预加载下个页面的时机 。支持 static / manual / auto
visualEffectInBackground	string	否	切入系统后台时，隐藏页面内容，保护用户隐私。支持 hidden / none，若对页面单独设置则会覆盖全局的配置，详见 全局配置
enablePassiveEvent	Object或boolean	否	事件监听是否为 passive，若对页面单独设置则会覆盖全局的配置，详见 全局配置
renderer	string	否	渲染后端

{
  "usingComponents": {},
  "navigationBarTitleText": "Weixin",
  "navigationBarBackgroundColor": "#ccc",
  "navigationBarTextStyle": "black",
  "backgroundColor": "#ffffff",
  "enablePullDownRefresh": true
}

sitemap配置

小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个 JSON 对象，如果没有 sitemap.json ，则默认为所有页面都允许被索引；

属性	类型	必填	描述
rules	Object[]	是	索引规则列表

rules配置项指定了索引规则，每一项规则都是json对象。并包含了action,page,params,matching,priority这几种属性。具体的规则实例可以参照文档。
sitemap 配置 | 微信开放文档