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

必备

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

小程序

# 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 用户点击组件时触发
上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X