小程序开发，核心重点知识梳理

必备

作为优秀的前端工程师必备技能，小程序是当下最爆火的轻应用开发技术，需要能够独立开发企业级小程序，拥有解决主流小程序功能需求的能力 。

1、基础概念

名称	描述
AppID（小程序 ID）	小程序 ID，可以在 “小程序管理后台 -> 开发选项 -> 开发者设置 ”中找到 AppID
rpx（小程序中的单位）	wxss 中的尺寸单位，可以根据屏幕宽度进行自适应。 规定屏幕宽为 750rpx ，如：在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

2、小程序中的文件类型

名称	描述
.js	js 文件，编写页面逻辑代码
.json	json 文件，设置页面的配置项
.wxml	wxml 文件，编写页面结构代码
.wxss	wxss 文件，编写页面的 css 样式

3、全局文件介绍

名称	描述
app.json	小程序全局配置，可以作用于所有页面
app.wxss	小程序全局样式，可以作用于所有页面
app.js	小程序全局逻辑，可以作用于所有页面
project.config.json	项目配置文件，开发者使用的，一般不会修改这个文件
sitemap.json	用来配置小程序及其页面是否允许被微信搜索到，可用来提高小程序排名（了解即可）

4、全局配置

名称	描述
pages	以数组形式存放所有页面的路径列表，数组的第一项代表小程序的初始页面（首页） 示例："pages": ["pages/index/index", "pages/logs/logs"]
window	设置小程序的状态栏、导航条、标题、窗口背景色等全局的样式
style	指定使用升级后的 weui 样式，一般不需要修改
sitemapLocation	指明 sitemap.json 的位置，一般不需要修改
tabbar	配置底部 的 tab 栏

5、页面配置

TIP

页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项

名称	描述
usingComponents	配置页面所需要的自定义组件（了解即可）
disableScroll	设置为 true 则页面整体不能上下滚动。只在页面级别的配置中有效，无法在全局的 app.json 中设置

6、window 属性相关的配置

TIP

在页面级配置不需要书写 window 属性，可以直接设置这些属性

名称	描述
navigationBarBackgroundColor	导航栏背景颜色，值为十六进制的颜色值，如：#000000
navigationBarTextStyle	导航栏标题颜色，值仅支持 black 和 white
navigationBarTitleText	导航栏标题文字内容
backgroundTextStyle	下拉 loading 的样式，仅支持 dark 和 light
enablePullDownRefresh	是否开启全局的下拉刷新。开启之后才可以看到下拉 loading 的样式

7、tabbar 属性相关的配置

名称	描述
position	tabBar 的位置，仅支持 bottom / top，当值为 top 时，设置的 icon 图标无效
borderStyle	tabbar 上边框的颜色， 仅支持 black / white
color	tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	tab 上的文字选中时的颜色，仅支持十 六进制颜色
list	tab 的列表，接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每项都是一个对象

8、list 相关配置

名称	描述
pagePath	页面路径，表示点击当前 tab 选项，跳转到对应页面的路径，必须在 pages 中先定义
text	tab 上显示的文字
iconPath	默认的图片路径，注意项： ① icon 大小限制为 40kb，建议尺寸为 81px * 81px ② 不支持网络图片 ③ 当 position 为 top 时，不显示 icon
selectedIconPath	选中时的图片路径，注意项： ① icon 大小限制为 40kb，建议尺寸为 81px * 81px ② 不支持网络图片 ③ 当 position 为 top 时，不显示 icon

9、小程序 App 和页面 Page

名称	描述
App({})	注册小程序，必须在 app.js 中调用一次
page({})	注册小程序中的一个页面，指定页面的初始数据、生命周期函数、事件处理函数等
getApp()	获取小程序全局唯一的 App 实例，从而获取到全局的 app.js 中写在 App({})内部的所有属性和方法

10、小程序的生命周期函数

TIP

书写在 App({})中

名称	描述
onLaunch()	小程序初始化完成时触发，全局只触发一次
onShow()	小程序启动，或从后台进入前台显示时触发
onHide()	小程序从前台进入后台时触发
onError()	小程序发生脚本错误或 API 调用报错时触发

11、页面级的生命周期函数

TIP

书写在 Page({})中

名称	描述
onLoad()	页面加载时触发，一个页面只会调用一次
onShow()	页面显示/切入前台时触发
onHide()	页面隐藏/切入后台时触发
onReady()	页面初次渲染完成时触发。一个页面只会调用一次 onReady 函数，代表页面已经准备妥当，可以和视图层进行交互了
onPullDownRefresh()	用户下拉刷新时触发，需要设置 enablePullRefresh 属性值为 true，才会执行这个函数
onReachBottom()	页面滚动到最底部时触发
onShareAppMessage()	用户点击右上角转发时触发
onPageScroll()	用户滑动页面时触发

12、页面级的数据

TIP

书写在 Page({})中

名称	描述
data	定义页面的初始数据

13、设置数据

名称	描述
setData()	把数据从逻辑层传到渲染层，同时改变 data 下对应的属性值

14、逻辑层中常用的 API

名称	描述
wx.showToast()	显示消息提示框
wx.showModal()	显示模态对话框
wx.switchTab()	跳转到指定的 tabBar 页面
wx.request()	发起网络请求
wx.redirectTo()	关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.navigateTo()	保留当前页面，跳转到应用内的某个页面，不允许跳转到 tabbar 页面
wx.setStorage()	将数据存储在本地缓存；同名 key 值会覆盖
wx.getStorageSync()	从本地缓存中同步获取指定 key 的数据

15、WXML 中的常用语法

名称	描述
{{}}	数据绑定。使用双大括号将变量包起来，双大括号里面可以书写任意 js 表达式
wx:if	条件渲染，初始渲染条件为 false 时，不会渲染该代码块
wx:elif	条件渲染，配合 wx:if 使用，表示 else 代码块
wx:else	条件渲染，配合 wx:if 使用，表示 else 代码块
hidden	组件始终会被渲染，只是简单的控制显示与隐藏
wx:for	列表渲染 ① 默认数组的当前项的下标变量名为 index，数组当前项的变量名为 item ② wx:for 可以用在标签上 ③ 使用 wx:for-item 可以指定数组当前项的变量名 ④ 使用 wx:for-index 可以指定数组当前下标的变量名 示例如下：
wx:key	指定列表中项目的唯一的标识符，一般使用 wx:for 循环渲染列表时，给每一项添加 wx:key 设置唯一的标识符
include	引入目标文件的代码，相当于将代码拷贝到 include 位置
import	导入 template 模板
template	应用示例如下

wx:for 列表渲染示例

<block wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  <view> {{ idx }}: </view>
  <view> {{ itemName: message }} </view>
</block>

template 模板使用示例

<!-- ① 在 item.wxml 中定义了一个叫 item 的 template -->
<template name="item"><text>{{text}}</text></template>

<!-- ② 在 item.wxml 当前页面中名为 item 的模板，不需要引入，直接使用 is 属性声明需要使用的模板即可。另外，可以使用 data 属性给模板传递数据 -->
<template is="item" data="{{text: 'forbar'}}" />

<!-- ③ 在其他页面中使用 item.wxml 中定义名为 item 的模板，需要使用 import 先导入，然后才能使用 is 属性声明需要使用的模板 -->
<import src="item.wxml" /> // 先引入
<template is="item" data="{{text: 'forbar'}}" /> // 再使用

16、扩展知识

名称	描述
<block></block>	一个包装元素，不会在页面中做任何渲染，注意项： ① 一般与控制属性 wx:if 和 wx:for 一起使用 ② 因为 block 元素并不会渲染到页面中，所以在 block 上添加的 css 属性（如：class 等属性）无效

17、常用的组件

名称	描述
<view></view>	视图容器组件，类似于 html 中的 div 标签
<text></text>	文本组件， 类似于 html 中的 span 标签
<image></image>	图片组件，类似于 html 的 img 标签
<checkbox></checkbox>	多选组件，可以设置 checked 属性值，表示是否选中
<swiper></swiper>	滑块视图容器。其中只可放置 swiper-item 组件
<swiper-item></swiper-item>	仅可放置在 swiper 组件中，宽高自动设置为 100%
<icon />	图标组件
<button></button>	按钮组件
<picker><picker>	滚动选择器组件
<input />	输入框组件
<navigator></navigator>	导航组件，跳转到指定的页面，类似于 html 中的 a 标签

18、input 组件的属性

名称	描述
placeholder-class	指定 placeholder 的样式类

19、swiper 组件的属性

名称	描述
previous-margin	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
next-margin	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
circular	是否设置无缝滑动
autoplay	是否自动切换

20、常用事件

名称	描述
bindinput	用户输入内容时触发
bindtap	用户点击组件时触发