Skip to main content

总结

一. 邂逅小程序开发​

1.1. 认识小程序开发​

  • 小程序的介绍
  • 各个平台小程序介绍
  • 为什么各个平台都有推出自己的小程序?

1.2. 小程序开发技术选择​

  • 小程序由谁开发:

    • 前端

  • 原生小程序开发

  • 小程序开发框架:

    • mpvue
    • wepy

  • 跨平台框架:

    • uniapp
    • taro

1.3. 小程序学习的前提​

  • WXML: HTML
  • WXSS: CSS
  • JavaScript+WXS: JavaScript

1.4. 小程序的准备工作​

  • AppID
  • 小程序开发工具

1.5. 创建项目-界面-目录结构​

1.6. VSCode开发小程序​

1.7. 小程序开发体验​

  • 数据绑定
  • 列表展示
  • 计数器案例

1.8. 小程序的MVVM架构思想​

作业​

小程序包括哪些？以及都有哪些开发模式？（面试）​

  • 小程序有哪些?

    • 微信小程序
    • 百度小程序
    • 支付宝小程序
    • 抖音小程序
    • 头条小程序
    • QQ小程序
    • 美团小程序

  • 开发模式

    • 原生小程序开发
      • 微信小程序开发：wxml、wxss、JavaScript
      • 支付宝小程序开发：axml、acss、JavaScript
    • 框架开发小程序
      • mpvue
        • mpvue是一个使用Vue开发小程序的前端框架
        • 支持微信小程序、百度智能小程序，头条小程序和支付宝小程序
        • 该框架在2018年之后就不再维护和更新了，目前已经被放弃
      • wepy
        • 由腾讯开源的一款让小程序支持组件化开发的框架
        • 通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序
        • 该框架目前维护的也较少，不推荐使用
    • uni-app
      • 由DCloud团队开发和维护
      • uni-app 是一个使用 Vue 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台
      • uni-app目前是很多公司的技术选型，特别是希望适配移动端App的公司
    • taro
      • 由京东团队开发和维护
      • taro 是一个开放式 跨端 跨框架 解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用
      • taro因为本身支持React、Vue的选择，给了我们更加灵活的选择空间
      • 特别是在Taro3.x之后，支持Vue3、React Hook写法等
      • taro ['tɑ:roʊ]，泰罗·奥特曼，宇宙警备队总教官，实力最强的奥特曼

二. 小程序的架构和配置​

2.1. 小程序的双线程模型​

  • webview
  • jscore

skyline(了解, beta)

  • coderwhy -> 邂逅flutter开发(底层渲染原理)

2.2. 常见的配置文件​

  • project.config.json

    • project.private.config.json -> .gitignore

  • sitemap

2.3. app.json配置文件​

  • 应用程序配置
    • pages
    • window
    • tabBar

2.4. page.json配置文件​

  • 覆盖全局的配置
  • 下拉刷新/上拉加载更多
    • Page({ onPullDownRefresh, onReachBottom })
  • 功能的实现

3.1. 注册App​

  • App({})

3.1.1. 判断进入场景​

  • onLaunch
  • onShow
    • options
      • scene属性

3.1.2. 全局共享数据​

  • globalData
  • 页面:
const app = getApp()
app.globalData.xxx

3.1.3. 页面启动操作​

  • 登录操作
  • 将数据保存Storage中
  • 下次重启可以从Storage读取数据
  • 保存到globalData中

4.2. 注册Page​

4.2.1. 网络请求-拿到数据​

  • 网络请求
  • 获取数据 - 保存data
  • 在wxml中使用swiper-swiper-item进行展示

4.2.2. 在data中初始化数据​

4.2.3. wxml事件绑定函数​

4.2.4. 绑定其他事件​

  • 下拉刷新
  • 达到底部
  • 页面滚动

作业​

说说你对小程序双线程模型架构的理解?(面试)​

  • 小程序的宿主环境是：微信客户端
    • 宿主环境可以执行小程序的各种文件
  • 当小程序运行在 WebView 环境下时，会有什么问题呢？
    • JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生在同一线程中
    • 在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿
  • 小程序考虑到性能与安全的问题，采用了「双线程模型」的架构
    • WXML模块和WXSS样式运行于 渲染层，渲染层使用WebView线程渲染
      • 当一个程序有多个页面时，会使用多个WebView的线程
    • JS脚本（app.js/home.js等）运行于 逻辑层，逻辑层使用 JsCore 运行 JS脚本
      • 这两个线程都会经由微信客户端（Native）进行中转并交互

注册App实例的函数，以及注册该实例时，通常可能进行哪些操作？​

  • 判断小程序的进入场景

  • 监听生命周期函数

    • 在对应的生命周期函数中执行刚开始的业务逻辑 比如登录操作或者初始化时请求全局的网络数据
    • App()实例只有一个 所以可以创建一个globalData的对象 存放全局的共享数据

注册Page实例的函数，以及注册该实例时，通常可能进行哪些操作？​

  1. 在生命周期函数中发送网络请求
  2. 初始化数据 方便页面展示
  3. 监听wxml中的事件
  4. 进行页面滚动 下拉加载 上拉刷新的事件监听

三. 小程序的内置组件​

2.1. text组件​

2.2. button组件​

2.2.1. button常见属性​

2.2.2. open-type​

  • getUserProfile

2.3. view组件​

2.4. image组件​

  • mode属性:
    • widthFix
  • wx.chooseMedia: 选择相册中图片

2.5. scroll-view​

  • 滚动的前提:
    • 固定的宽度或者高度
    • 内容需要超出宽度或者高度
    • 设置scroll-x或scroll-y
  • 滚动的监听
    • 滚动到左边
    • 滚动到右边
    • 滚动的过程

2.6. 组件共有属性​

  • id/class/style
  • hidden
  • data-*
  • bind/catch

2.7. input双向绑定​

作业​

wx:if和hidden属性有什么区别？开发中如何选择？​

wx:if和hidden属性的区别 :

  • wx:if需要根据条件判断组件是否渲染，条件为true，对应的组件才会渲染出来；条件为false时，对应组件不仅不会渲染，也不会出现在虚拟DOM中

  • hidden属性本质是通过添加hidden这个属性来控制组件的隐藏或显示，即使条件为true，对应组件也会渲染，只不过不会显示在页面中

开发中的选择 :

如果操作频繁，建议使用hidden属性

如果操作不频繁，则建议使用wx:if

四. WXSS-WXML-WXS​

WXSS​

WXSS编写方式​

  • 全局样式
  • 页内样式
  • 行内样式

rpx的单位​

WXML的语法细节​

1.1. WXML的Mustache语法​

1.2. WXML的wx:if/elif/else​

1.3. hidden属性以及区别​

1.4. wx:for列表循环​

  • 基本使用
  • block
  • item/index的名称
  • key的作用和用法:
    • 用法一: 字符串, 取item的property
    • 用法二: *this

WXS的语法​

2.1. 基本使用​

  • wxs的标签
  • wxs的独立文件, src引入

2.2. 案例练习​

  • 书籍价格加符号
  • 书籍的总价格
  • 后面项目的案例:
    • 对count格式化
    • 对time格式化

作业​

什么是rpx？rpx如何进行的屏幕适配？​

rpx: responsive pixel : 可以根据屏幕宽度进行自适应 规定屏幕宽度为750rpx

  • 建议开发中将 iPhone6 作为视觉稿的标准
    • iPhone6 屏幕宽度为375px 750物理像素 所以 750rpx = 375px = 750物理像素
    • 1rpx = 0.5px
    • 因此如果想定义一个100px宽度的view 则需要设置width为 200rpx

wx:for为什么需要绑定key？绑定key的方式有哪些？​

为什么要绑定key :

  • 当我们希望处于同一层的VNode 进行插入 删除 新增 节点时 可以更好的进行节点的复用 就需要key属性来判断

绑定key的方式有哪些 :

  • 字符串: 表示 for循环array中item的某个属性(property) 该property是列表中的唯一的字符串或数字
  • 保留关键字 *this 表示item本身 此时item本身是唯一的字符串或数字

WXS的作用是什么？如何使用？​

WXS的作用 :

实现使用函数来处理WXML中的数据(类似于Vue中的过滤器)

如何使用WXS :

方式一 :写在<wxs>标签中, <wxs> xxxx </wxs>

方式二 : 独立文件，通过src引入, <wxs src="xxx路径" />

五. 事件处理​

3.1. 基本事件相关​

3.2. Event对象细节​

  • target/currentTarget的区别
  • touches/changedTouches区别(了解)

3.3. 事件传递参数​

  • data-*传递
  • event.currentTarget.dataset.index

3.4. 捕获和冒泡过程​

3.5. catch和mark​

  • catch阻止进一步传递
  • mark也可以传递参数

事件传递参数的方法有哪些？如何传递参数？​

事件传递参数 :

小程序中常用传递参数的方式是通过 data- 属性来实现，可以在逻辑代码中通过 "el.currentTarget.dataset.属性名称" 获取

target和currentTarget的区别？​

target和currentTarget的区别 :

· target指触发事件的元素

· currentTarget指的是处理事件的元素，两者作用在同一个元素上无差别，小程序中常用currentTarget

六. 组件化开发​

4.1. 组件化开发的介绍​

4.2. 创建自定义组件​

  • 创建组件, json的component: true
  • 在页面: usingComponents注册

4.3. 组件的样式细节​

4.4. 组件的数据传递​

4.4.1. properties​

4.4.2. externalClasses​

4.4.3. 自定义事件​

4.4.4. 直接调用子组件的方法​

4.4.5. 插槽的使用​

  • 单个插槽
    • 默认值
  • 多个插槽

4.5. Behaviors混入​

4.6. 生命周期函数​

  • 组件的生命周期函数
  • 页面的生命周期函数

4.7. Component选项​

作业​

页面和组件如何进行数据传递？都包括哪些传递方式？​

页面和组件如何进行数据传递 :

· 向组件传递数据可以通过 properties 属性，支持String、Number、Boolean、Object、Array、null等类型

· 向组件传递样式可以通过定义externalClasses属性来实现

· 组件向外传递事件可以在组件内部通过this.triggerEvent将事件派发，页面可以通过bind绑定

小程序中组件的插槽如何使用？如何给插槽传递默认值？​

小程序中使用插槽 :

在组件中想要使用插槽的地方通过<slot> </slot>预留位置，在组件外部可以在预留插槽中插入文字、图片或者是进度条

给插槽传递默认值 :

小程序中不支持给插槽设置默认值，如果非要设置，可以通过兄弟选择器来实现 :

  • 给需要传递的默认值元素上添加一个类，设置 display : none，默认不显示
  • 之后在有预留插槽位置的元素设置伪类 :empty ，当里面没有内容时，再通过兄弟选择器找到默认值元素上的类，将display改为block

注册组件实例时，都有哪些选项？（自己总结）​

注册组件实例时，可以通过组件的生命周期函数触发一些特殊事件，例如 :

created #在组件实例刚刚被创建时执行

attached #在组件实例进入页面节点树时执行

ready #在组件在视图层布局完成后执行

moved #在组件实例被移动到节点树另一个位置时执行

detached #在组件实例被从页面节点树移除时执行

error # 组件方法抛出错误时执行

七. 系统API调用​

2.1. 网络请求API​

  • 基本使用
  • 域名配置
  • 工具封装:
    • 函数封装
    • 类封装

2.2. 弹窗和分享​

  • showToast
  • showModal
  • showActionSheet
  • onShareAppMessage

2.3. 设备和位置信息​

  • wx.getSystemInfo
  • wx.getLocation()
    • app.json配置

2.4. Storage的存储​

2.5. 页面跳转和数据传递​

  • navigateTo
  • navigateBack

数据传递:

  • ?queryString
  • getCurrentPages -> prePage.setData
  • events -> eventChannel

组件跳转

  • navigator组件

2.6. 登录流程​

  • 登录的身份的标题

    • openid

  • 登录流程

  • 登录代码演练

作业​

完成小程序对网络请求的封装​

封装成函数 (Fn_Request) :

// 封装网络请求函数:Fn_Request
export function Fn_Request(options) {
  // 通过promise返回数据
  return new Promise((resolve, reject) => {
    wx.request({
     ...options,
     success: (res) => {
       resolve(res.data)  //网络请求成功时回调
     },
     fail: reject  //失败时回调
    })
  })
}

封装成类(Class_Request) :

// 封装发送网络请求类方法:
class Class_Request {
  request(options) {
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,
        success: (res) => {
          resolve(res.data)  //网络请求成功时回调
        },
        fail: reject  //失败时回调
       })
    })
  }

  get(options) {  //get方法
    return this.request({...options, method: "get"})
  }
  post(options) {  //post方法
    return this.request({...options, method: "post"})
  }
}
// 导出
export const Class_ReqInstance = new Class_Request()

小程序中如何进行页面跳转？在跳转过程中如何进行数据的传递？​

小程序中实现页面跳转有两种方式 :

方式一 ：通过navigator组件(用的较少，不推荐)

方式二 : 通过wx的API进行页面跳转，常用 ：

wx.navigateTo() #保留当前页面，跳转到应用内的某个页面

wx.navigateBack() #关闭当前页面，返回上一页面或者多级页面

页面跳转数据传递 :

  • 首页传递数据至详情页 (使用URL中的query字段)：
url : "/pages/classify/index?name=wzl&age=22"
  • 详情页传递数据至首页(在详情页内部拿到首页实例，并修改数据) ：
const pages = getCurrentPages() //获取实例方法
const prevPage = pages[pages.length - 2]  //具体实例
prevPage.setData({info: "my name is wzl"})  //修改数据

总结小程序的登录流程，并且自己进行整理​

小程序登录流程 :

1.通过wx.login()获取code

2.将这个code发送给后端，后端会返回一个token，这个token将作为你身份的唯一标识

3.将token通过wx.setStorageSync()保存在本地存储

4.用户下次进入页面时，会先通过wx.getStorageSync() 方法判断token是否有值，如果有值，则可以请求其它数据，如果没有值，则进行登录操作

七. 整理小程序常见的系统API，多阅读官方文档​

小程序常见系统API ：

  • 展示弹窗API : showToast、showModal、showLoading、showActionSheet

  • 分享功能 ：通过onShareAppMessage()实现

  • 获取设备信息 : 通过wx.getSystemInfo()实现

  • 获取用户位置信息 : 通过wx.getLocation()获取

  • 本地数据存储 (常用两个)：

    • 同步存储数据 : wx.setStorageSync()
    • 同步获取数据 : wx.getStorageSync()