微信小程序知识点汇总---更新中

微信公众平台

是基于微信公众号，为微信用户提供服务的平台

微信公众平台开发：是基于微信内进行的公众号业务开发；

前端程序员是公众平台开发的主力军

平台登录地址：https://mp.weixin.qq.com

微信公众平台的账号分类

• 公众号
  • 订阅号
    • 偏于为用户传达资讯（类似报纸杂志）
  • 服务号
    • 偏于服务交互（类似银行、114），提供更多的服务，例如开通微信支付
  • 小程序
    • 一种新的开放能力，具有类似于手机App的使用体验
  • 企业微信（原企业号）
    • 企业的专业办公管理工具，用于企业员工内部通讯、打卡、审批等

小程序

小程序：基于微信提供的API进行开发

官网申请开发者账号的教程：
https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18101214

组件

• 组件是视图层的基本组成单元

• 组件以UI结构布局为主，一般不需要处理业务逻辑

• 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内

  • 注意：所有 组件名称 与 属性名称 都是小写

API

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数。

API 以纯业务逻辑为主，一般没有对应的UI结构

API 的三种分类：

事件监听 API

特点：这类 API 以 on 开头，用来监听某个事件是否触发

举例：wx.onNetworkStatusChange(function callback) // 当网络状态更改时触发此事件

同步 API

特点1：以 Sync 结尾的 API 都是同步 API
特点2：同步 API 的执行结果，可以通过函数返回值直接获取

举例：var batteryInfo = wx.getBatteryInfoSync() // 获取电池信息

异步 API

特点：通常需要指定回调函数接收调用的结果；小程序中，大多数 API 都是异步 API

举例：wx.request(Object object) // 发起 HTTPS 网络请求

小程序项目的结构

├── pages ······································ 【目录】存放所有的小程序页面
│ │── index ······································· 【目录】index 页面
│ │ ├── index.wxml ··························· 【文件】 index 页面的结构
│ │ ├── index.js ·································· 【文件】 index 页面的逻辑
│ │ ├── index.json ····························· 【文件】 index 页面的配置
│ │ └── index.wxss ···························· 【文件】 index 页面的样式
│ └── logs ·········································· 【目录】 logs 页面
│ ├── logs.wxml ································【文件】 logs 页面的结构
│ └── logs.js ·······································【文件】 logs 页面的逻辑
└── utils ······································· 【目录】 存放小程序中用到的工具函数
├── app.js ···································· 【文件】 小程序逻辑
├── app.json ······························· 【文件】 小程序的公共配置
├── app.wxss ······························ 【文件】小程序公共样式表
├── project.config.json ·············· 【文件】 开发工具配置文件

• 注意：
  • 对于小程序来说：app.js 和 app.json 文件是必须的
  • 对于小程序的页面来说： .js 和 .wxml 文件是必须的

小程序页面的结构

• 每个小程序的页面，是由 .wxml 结构、.js 逻辑、.json 配置、.wxss 样式表 这4个文件组成的
  • .wxml : 用来描述当前这个页面的结构，同时提供了类似于Vue中指令的语法
  • .js : 用来定义当前页面中用到的数据、交互逻辑和响应用户的操作
  • .json : 用来定义当前页面的个性化配置，例如，为每个页面单独配置顶部颜色、是否允许下拉刷新等
  • .wxss : 用来定义样式来美化当前的页面

小程序常用的UI组件

text文本

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选，除了text组件之外，其它组件都无法长按选中
space	String	false	显示连续空格，可选值：ensp、emsp、nbsp
decode	Boolean	false	是否解码，可解析   < > & '    

view视图容器

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

button按钮

属性名	类型	默认值	说明
size	String	default	按钮的大小 mini
type	String	default	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标

input输入框

属性名	类型	默认值	说明
value	String		输入框的初始内容
type	String	“text”	input 的类型
password	Boolean	false	是否是密码类型
placeholder	String		输入框为空时占位符
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大输入长度，设置为 -1 时不限制最大长度

image图片

• 常见的属性：

  • src ：支持本地和网络上的图片
  • mode ：指定图片裁剪、缩放的模式

• 注意：image组件默认宽度300px、高度225px

小程序中的样式

WXSS

• WXSS 具有 CSS 大部分特性；
• WXSS 对 CSS 进行了扩充以及修改，以适应微信小程序的开发；
• 与 CSS 相比，WXSS 扩展的特性有：
  • 尺寸单位
  • 样式导入

WXSS目前支持的选择器

• 标签选择器
• id选择器
• class选择器
• 伪类选择器:hover :active
• 伪元素::before ::after
• 自定义属性 data-*属性选择器
• :nth-of-type() 等常用的 css3 选择器

解决适配：rpx尺寸单位

• rpx（responsive pixel）: 是微信小程序独有的、解决屏幕自适应的尺寸单位
  • 可以根据屏幕宽度进行自适应。不论大小屏幕，规定屏幕宽为750rpx
  • 通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕上，可以实现自动适配

@import 样式导入

• 使用 @import 语句可以导入外联样式表；
• 语法格式为：@import “wxss样式表的相对路径”;

全局样式与局部样式

• 全局样式
  • 定义在 app.wxss 中的样式为全局样式，作用于每一个页面
• 局部样式
  • 在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器
  • 注意：当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式效果！

严格遵守json语法

• string必须使用双引号“”
• 不能加注释
• 每个行尾不能加,

全局配置文件app.json

在app.json配置文件中，最主要的配置节点是：

• pages 数组：配置小程序的页面路径
• window 对象：用于设置小程序的状态栏、导航条、标题、窗口背景色
• tabBar 对象：配置小程序的tab栏效果

window节点常用的配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px (没有特殊需求，用默认值)

tabBar - 配置Tab栏

• tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换；
• 小程序中通常将其分为底部tabBar和顶部tabBar

注意：

1. tabBar中tab 页签数量[2，5]

2. 当渲染顶部tabBar的时候，不显示icon，只显示文本

tabBar节点的配置项

属性	类型	必填	默认值	描述
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

tabBar节点中list的配置项

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

页面配置文件page.json

• 页面级别配置优先于全局配置生效
• 页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现

小程序的生命周期

• 生命周期

  • 应用生命周期：特指小程序从启动 -> 运行 -> 销毁的过程；
  • 页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程；

• 生命周期函数

  • 由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行；

    • 应用生命周期函数

      属性	类型	描述	触发时机
      onLaunch	Function	生命周期回调 - 监听小程序初始化	小程序初始化完成时（全局只触发一次）
      onShow	Function	生命周期回调 - 监听小程序显示	小程序启动，或从后台进入前台显示时
      onHide	Function	生命周期回调 - 监听小程序隐藏	小程序从前台进入后台时

    • 页面生命周期函数

      属性	类型	描述
      onLoad	Function	生命周期回调 - 监听页面加载
      onShow	Function	生命周期回调 - 监听页面显示
      onReady	Function	生命周期回调 - 监听页面初次渲染完成
      onHide	Function	生命周期回调 - 监听页面隐藏
      onUnload	Function	生命周期回调 - 监听页面卸载

• 注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

⭐面试问题

1. 小程序为什么体验好？

   1. 类似APP
   2. 轻度依赖

2. 小程序与app的区分？

   1. 运行基础不同
      1. App：基于手机操作系统提供的API进行开发；
      2. 小程序：基于微信提供的API进行开发；
   2. 开发方式和语言不同
      1.

3. 常见错误代码

   304 资源没有发生改变，继续用缓存

   301 永久性重定向

   302 暂时重定向

   303 get 请求重定向

   404 资源找不到

   401 没有权限

   402 认证没有通过

   403 没有权限访问

   405 请求方法不对

   500 服务器错误

   503 服务不可用

   504 timeout超时

   502 网关错误

4. 小程序的生命周期