微信小程序

差点兔了
364 阅读7分钟

一、什么是小程序

微信小程序（简称小程序，英文名 Mini Program）：

是一种不需要下载安装即可使用的应用。（实际是需要安装的，只不过体积很小，下载速度快，用户感觉不到下载过程）

二、小程序可以干什么

  • 同App进行互补，提供同app类型的功能，比app使用方便简介
  • 通过扫一扫或者在微信搜索即可下载
  • 用户使用率不高，但又不得不用的功能软件，小程序是首选
  • 连接线上线下
  • 开发门槛低，成本低

三、小程序开发资料

  1. 官网：微信公众平台 (qq.com)
  2. 微信开发者工具稳定版 Stable Build | 微信开放文档 (qq.com)

四、开发小程序储备知识

  1. flex布局
  2. 移动端相关知识
  3. 移动端适配方案
    • viewport适配
    • rem适配

五、小程序特点

  1. 没有DOM

  2. 组件化开发

  3. 体积小，单个压缩包体积不能大于2M，否则无法上线

  4. 小程序的四个重要文件

    • .js
    • .wxml --> view结构 --> html
    • .wxss --> view样式 --> css
    • .json --> view数据 --> json文件

  5. 小程序适配方案：rpx

image.png

image.png

1.小程序启动过程

image.png

2.页面的渲染过程

image.png

六、全局配置文件说明

image.png

  • 默认pages配置的第一个路径是首先打开的页面

  • "navigationBarBackgroundColor": "#fff",只支持16进制表达的颜色

  • "navigationBarTextStyle":"black"只支持黑白两种颜色

1. sitemap.json

image.png

2. app.json

image.png

window节点常用配置项：

image.png

（1）window 导航栏

image.png

（2）window 下拉刷新
  1. 全局开启下拉刷新功能（一般不建议全局设置下拉刷新）

image.png

image.png

  1. 下拉刷新的事件处理函数

image.png

image.png

  1. 关闭下拉刷新

image.png

（3）window 设置上拉触底的距离

image.png

  1. 全局开启上拉触底功能（一般不建议全局设置上拉触底）

image.png

2.上拉触底的事件处理函数

image.png

image.png

  1. 添加loading效果

image.png

image.png

image.png

  1. 上拉触底节流处理

image.png

image.png

  1. 判断数据是否加载完毕

image.png

image.png

tabBar

image.png

image.png

tarBar节点的配置项

image.png

每个tab页签的配置项

image.png

image.png

六、wxml语法

  • xwml和html的区别

image.png

  • wcss和css的区别

image.png

1.数据绑定

image.png

  • 也就是{{ }}语法

image.png

（1）初始化数据

在data中初始化数据

image.png

（2）使用数据

因为小程序没有在底层进行数据代理

所以获取数据不能直接this.

image.png

（3）修改数据

通过this.setData({}) 进行数据修改

image.png

修改数据的行为始终是同步的

2.事件绑定

事件流的三个阶段

  1. 捕获：从外向内
  2. 执行目标阶段
  3. 冒泡：从内向外

（1）小程序中常用事件

image.png

（2）事件对象属性列表

image.png

  • 传的参数都在target的dataset中
  • 文本框输入的参数获取是通过detail里面的value

image.png

（3）事件分类

  • 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
  • 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递

（4）绑定事件

  • bind绑定：事件绑定不会阻止冒泡事件向上冒泡

image.png

  • catch绑定：事件绑定可以阻止事件向上冒泡

image.png

位置

image.png

（5）事件传参

  1. vue中传参方式：

image.png

  1. 小程序中传参方式：

image.png

id, dataset, touches

image.png

  • id：适用于只传一个参数的时候
  • data-xxx：适用于传多个参数

3.列表渲染

（1）wx:for

image.png

image.png

（2）wx:key

image.png

image.png

  • 不需要{{ }}
  • 不需要用item.来获取

（3）另起名字

适用与多层嵌套：因为默认数组元素为item，所以需要另起名字

image.png

4.条件渲染

（1）语法

image.png

（2）block标签

image.png

（3）hidden

image.png

（4）hidden和wx:if对比

image.png

5.模板使用

6.生命周期

image.png

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

1.应用的生命周期函数

image.png

image.png

2.页面的生命周期函数

image.png

（1）onLoad 监听页面加载

image.png

（2）onShow 监听页面显示

onShow会执行多次，onLoad和onReady只执行一次

（3）onReady 监听页面初次渲染完成

（4）onHide 监听页面隐藏

（5）onUnload 监听页面卸载

七、小程序常用组件

1.视图容器类

image.png

2.基础内容

  1. text

文本长按选中

image.png

  1. rich-text

image.png

image.png

  • 可以将html的字符串渲染到页面上
  • 适用于：服务器返回的是一串html的标签，而我们需要渲染到页面上时
  1. button

image.png

image.png

  1. image

image.png

3.自定义组件

（1）创建自定义组件并使用

  1. 创建组件

image.png

image.png

因为创建的是组件，所以app.json中没有配置页面

image.png

  1. 写结构和样式

image.png

image.png

  1. 初始化组件

image.png

  1. 注册组件并引用

image.png

  • 局部引用

image.png

image.png

  • 全局引用

image.png

（2）自定义组件样式隔离

image.png

image.png

（3）自定义组件的data和methods

image.png

image.png

页面中的方法不需要放在methods中，而是和生命周期函数同级

（4）自定义组件的properties

image.png

  • 注意：在小程序组件中，properties属性和data数据的用法相同，都是可读可写

（5）自定义组件的数据监听

image.png

image.png

（6）自定义组件的纯数据字段

image.png

image.png

（7）自定义组件的插槽

image.png

image.png

image.png

image.png

image.png

（8）自定义组件之父子组件之间的通信

image.png

image.png

和vue的父子组件传值差不多，具体请查阅文档

（9）自定义组件之behaviors

image.png

image.png

image.png

image.png

八、小程序API

1.三大分类

image.png

2.常用API

1.路由跳转

浏览器中实现页面导航

image.png

小程序中实现页面导航

image.png

（1）声明式导航
  1. 导航到tabBar页面

image.png

  1. 导航到非tabBar页面

image.png

  1. 后退导航

image.png

（2）编程式导航
  1. 导航到tabBar页面

image.png

  1. 导航到非tabBar页面

image.png

image.png

  1. 后退导航

image.png

（3）路由传参
  1. 声明式导航传参

image.png

  1. 编程式导航传参

image.png

  1. 参数获取

image.png

  1. wx.navigateTo

image.png

  • 支持回退按钮
  • 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
  • 跳转页面时执行onHide生命周期钩子函数，回退时执行onShow生命周期
  1. wx.redirectTo

image.png

  • 不支持回退按钮，支持直接返回主页

  • 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

  1. wx.reLaunch

image.png

  • 支持回到主页面
  • 关闭所有页面，打开到应用内的某个页面
  • 跳转页面时执行onUnload生命周期钩子函数，回到主页时onLoad、onShow、onReady生命周期全部触发

局部配置页面标题：

image.png

2.获取用户基本信息

  1. 用户未授权，首次登录
  2. 用户已经授权

image.png

3.前后端交互

语法：wx.request()

  1. 写完整url
  2. 配置合法域名

image.png

  1. 协议必须是https协议
  2. 一个接口最多配置20个域名
  3. 并发限制上限是10个

注意：

  • 如果不想配置域名，则

image.png

（仅在开发时勾选，上线时必须进行校验！）

  • 关于跨域和ajax说明：

image.png

九、小程序重点知识汇总

1.封装请求功能函数

image.png

  • config.js 配置服务器相关信息

image.png

  • request.js 对网络请求的封装

image.png

  • index.js 调用封装好的方法

image.png

2.自定义组件

组件和页面的区别

image.png

  1. 创建组件

image.png

image.png

因为创建的是组件，所以app.json中没有配置页面

image.png

  1. 写结构和样式

image.png

image.png

  1. 初始化组件

image.png

  1. 注册组件并引用

image.png

  • 局部引用

image.png

image.png

  • 全局引用

image.png

3.对象中操作属性且属性为变量

wxml：

image.png

js：

image.png

4.手机号密码登录流程

image.png

  1. 收集表单数据

image.png

image.png

  1. 前端验证

image.png

  1. 请求后端接口

5.分包

（1）分包基础概念

  • 分包前

image.png

  • 分包后

image.png

  • 分包的加载规则

image.png

（2）分包基本用法

  1. 配置方法

image.png

  1. 打包原则

image.png

（3）独立分包

独立分包和普通分包的区别：

image.png

image.png

（4）分包预下载

  1. 概念

分包预下载：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度

  1. 配置分包的预下载

image.png

image.png

avatar
文章
阅读
粉丝