前端技术知识

Appearance

数据绑定 ​

  1. C(创建数据)

    1. Vue
      1. 在组件配置对象中,具有data工厂函数,可以返回出data对象
      2. 面试题:为什么data必须是一个函数
        1. 如果data是一个对象,那么通过当前组件构造函数创建的多个组件实例,会共享这一个data对象,导致多组件没有各自的独立状态
    2. React
      1. 在class组件中,class结构中具有state属性,属性值为一个对象
    3. 小程序
      1. 在组件配置对象中,具有data对象
      2. 注意:小程序会将data对象进行JSON化,实现对象深克隆,所以不需要像Vue一样
      3. 小程序的data属性可以后续直接通过setData新增,没有任何区别

  2. R(读取数据)

    1. 在模版中渲染
      1. Vue
        1. 在template中使用插值语法,将data中的属性名写入内部即可使用
        2. 注意:在template中,想要把data中的数据作为文本内容显示出来,才需要使用插值语法
      2. React
        1. 在render函数的return中.使用{},大括号中书写this.state.msg即可
      3. 小程序
        1. 与Vue相同
        2. 注意:只要想在wxml中使用data中的数据,一定要加插值语法
    2. 在js代码中读取数据
      1. Vue
        1. 通过this.msg可以读取到数值
        2. 流程:this.msg->数据代理get->this.$data.msg->数据劫持get->返回通过闭包保存的msg数据
      2. React
        1. 通过this.state.msg可以读取到数值
      3. 小程序
        1. 通过this.data.msg可以读取到数值
        2. 说明:小程序没有数据代理和数据劫持

  3. U(修改数据)

    1. Vue
      1. 通过this.msg="我是修改之后的数据"
      2. 流程:this.msg="我是修改之后的数据" => 数据代理set => this.$data.msg="我是修改之后的数据" => 数据劫持set => 通过dep调用notify方法,通知所有的watcher实例进行视图更新
      3. 面试题1:Vue更新data数据是同步还是异步?
        1. 同步修改data中的数据
      4. 面试题2:Vue更新data数据,重新渲染视图是同步还是异步?
        1. Vue更新视图永远是异步更新
    2. React(持久化状态框架)
      1. 通过this.setState({msg:"我是修改之后的数据"})
      2. 面试题一:setState的执行是同步执行还是异步执行?
        1. 同步执行
      3. 面试题二:setState更新数据的效果是同步的还是异步的?
        1. 即使同步又是异步
        2. React更新机制较为特殊:
          1. 同步
            1. 原生事件
            2. 定时器
          2. 异步
            1. 合成事件(如果事件名称是驼峰命名法,那就是合成事件)
              1. 注意:合成事件使用到了事件委托,它将事件绑定在#root元素身上
            2. 生命周期
    3. 小程序
      1. 通过this.setData({msg:"我是修改之后的数据"})
      2. 注意:
        1. 小程序中,setData会同步修改data数据,但是会异步更新视图
        2. 说明**:setData执行结束,得到的数据一定是最新的**

  4. 总结:无论是Vue,React,小程序,都有一个共同特点,就是会将更新视图操作进行类似防抖效果

  5. 数据流向

    1. Vue

      1. 单向(或者可以成为伪双向,上课提到的双向,是指双向数据绑定,不是双向数据流)

      2. 主要:双向数据绑定特指v-model指令,看起来似乎是input内容发生变化,data中的数据立马发生变化,但是及原理还是经过了事件监听

      3. v-model原理:

        1. 将data中的数据作为input框的默认值显示

          1. vue
            <input type="text" :value="msg"/>

        2. 当input内容发生变化的时候,要将data中的对应属性值进行修改

          1. vue
            <input type="text" @input="(event)=>{this.msg=event.target.value}"/>

    2. React

      1. 单向

    3. 小程序

      1. 单向

事件绑定 ​

  1. 事件类型分类:
    1. 冒泡事件和非冒泡事件
      1. 冒泡事件
        1. 当一个组件上的事件被触发后，该事件会向父节点传递(相当于原生事件机制中的冒泡阶段事件回调)
        2. 语法:bind+事件名="事件回调函数名称"
        3. 注意:事件回调函数声明位置,与生命周期同级
      2. 非冒泡事件
        1. 当一个组件上的事件被触发后，该事件不会向父节点传递。(相当于是原生事件机制中的阻止冒泡的事件回调)
        2. 语法:catch+事件名="事件回调函数名称"
        3. 注意:阻止冒泡只是说明当前事件不会通知父节点,但是自身的回调函数还是会触发的
    2. 捕获事件和非捕获事件
      1. 捕获事件
        1. 语法:capture-bind+":"+事件名="事件回调函数名称"
        2. 注意:捕获事件绑定,必须加上冒号,不能省略
      2. 非捕获事件
        1. 语法:capture-catch+":"+事件名="事件回调函数名称"

路由跳转 ​

  1. 单页面应用
    1. 实际上就是说只请求回来一个html文件,后续页面的变化,都是通过dom的CRUD操作,对页面进行展示效果变化
  2. 小程序其实是一个多页面应用
  3. VueRouter路由跳转的方法
    1. 声明式导航
      1. 以标签形式引导用户进行跳转的方式(router-link)
    2. 编程式导航
      1. 通过js中的某些API控制路由跳转的方式(push,replace,go,back)
    3. 总结:在原生html和js中,也可以通过a标签和location对象的属性控制页面跳转,但是VueRouter的跳转不会刷新或者请求页面
  4. 小程序路由跳转
    1. 声明式导航
      1. navigator组件
    2. 编程式导航
      1. wx.navigateTo(Object object)
        1. 当前API跳转页面,会保留当前页面(保留页面实例对象,后续回到当前页面不会重新挂载)
        2. 注意:
          1. url必传
          2. url可以写相对路径,路径会参考当前所在文件夹
          3. url可以写绝对路径,路径会参考当前项目根路径(app.json文件所在位置)
          4. 小程序中页面栈最多十层,小程序早期页面栈最多五层
          5. 页面栈上限规则:如果页面栈已经达到上限,那么将无法跳转新的页面
      2. wx.redirectTo(Object object)
        1. 当前API跳转页面,会关闭当前页面(销毁页面实例对象,后续回到当前页面会重新挂载)
        2. 当前API不需要考虑页面栈层数问题,因为他始终会先销毁当前页面,在开启新页面
  5. keep-alive组件
    1. keep-alive能够缓存内部组件的状态,实际上是将整个组件实例对象都缓存下来了
    2. include属性可以控制只缓存对应名字的几个组件
    3. exclude属性可以控制不缓存对应名字的几个组件
    4. max属性可以控制总共缓存多少个组件实例(默认值没有)
      1. 注意:在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉

生命周期 ​

  1. 小程序一共有5个生命周期
    1. 初始化阶段
      1. onLoad->页面开始加载(类似于created)
      2. onShow->页面开始显示(类似activated)
      3. onReady->页面首次渲染完成(类似于Vue的mounted)
        1. onReady相当于Vue的mounted中使用$nextTick
        2. 挂载不等于渲染,挂载是将内存中的节点插入到页面的html结构中,但是浏览器什么时候绘制该节点由浏览器决定
    2. 离开阶段
      1. onHide->页面隐藏(类似deactivated)
        1. 该生命周期和wx.navigateTo挂钩
      2. onUnload->页面卸载(类似于beforeDestroy)
        1. 该生命周期和wx.redirectTo挂钩
        2. 回退按钮也会触发该生命周期
  2. 注意:
    1. 生命周期和实际效果唯一不相符的地方,在onLoad中打断点,按照生命周期图所示,此处模拟器应该看不到数据,但是实际效果可以看到
    2. 个人认为,应该是debugger拦截时间晚了

数据请求 ​

  1. 发送请求
    1. API:wx.request()
    2. 注意点:
      1. 配置相关
        1. 上线时
          1. 小程序要求开发者必须要提前配置好未来会请求的服务器域名,如果不提前配置,将请求失败
          2. 配置流程:开发者中心->开发管理->开发设置->往下滑找到配置服务器域名
        2. 开发中
          1. 小程序允许开发者在开发过程中,暂时不校验合法域名
          2. 配置流程:开发者工具->详情->本地设置->勾选"不校验合法域名"
      2. 基础知识
        1. 默认超时时间和最大超时时间都是60s
        2. 小程序发送请求最大并发限制10个,Chorme和FireFox最大并发数是6个
        3. 服务器返回值使用 UTF-8 编码
        4. 小程序只能发送HTTPS请求

列表渲染 ​

  1. 语法

    1. 可以通过wx:for指令,遍历对应的data数据,从而产生多个节点

      1. js
        <swiper-item wx:for="{{banners}}" class="bannerItem">

    2. 小程序会将遍历出来的内容默认存放在item变量上

    3. 小程序会将遍历出来的下标默认存放在index变量上

    4. 小程序可以通过wx:for-item可以自定义遍历数据存放变量的名称

    5. 小程序可以通过wx:for-index可以自定义遍历下标存放变量的名称

    6. 小程序需要给每个遍历生成的节点添加唯一标识wx:key

      1. 注意:此处写法与Vue有所不同,我们给wx:key提供一个字符串,小程序会将该字符串作为属性名,自动从item身上查找该属性
      2. :key="item.id" => wx:key="id"
      3. 假如当前有一个数组,数组内部的数据是图片的字符串地址,那么可以使用item作为唯一标识,但是由于小程序的wx:key的写法很特殊,所以此处可以使用关键字*this

本地存储 ​

  1. 增加/修改

    1. API:
      1. wx.setStorage
        1. 接收参数一个,配置对象
          1. 必传属性:key,data,success(成功回调选传)
        2. 异步设置Storage(下一行代码立马读取Storage不会得到最新数据)
      2. wx.setStorageSync
        1. 接收参数两个
          1. key值
          2. value值
        2. 同步设置Storage(下一行代码立马读取Storage,一定能得到最新的)

  2. 读取

    1. API:

      1. wx.getStorage

        1. 接收参数一个,配置对象
          1. 必传属性:key,success(成功回调选传)
        2. 异步读取Storage(该函数需要传入回调函数,等读取成功之后,会执行回调函数)

      2. wx.getStorageSync

        1. 接收参数一个
          1. key值

  3. 同步读取Storage

  4. 删除

    1. API:

      1. wx.removeStorage

        1. 异步删除某个key值的Storage

      2. wx.removeStorageSync

        1. 同步删除某个key值的Storage

  5. 清空

    1. API:

      1. wx.clearStorage

        1. 异步清空所有key值的Storage

      2. wx.clearStorageSync

        1. 同步清空所有key值的Storage

用户授权 ​

  1. 到2021/8/14为止,一共出现了三种获取用户授权方法,目前可用一种
  2. 用户首次登陆授权:
    1. 早期
      1. 直接调用wx.getUserInfo({}),可以弹出授权窗口,实现用户授权(目前已经废弃,因为非常影响用户体验,所以才换成中期版本)
    2. 中期(21/4月,该方法废弃,正式出现第三种)
      1. 通过button组件获取用户个人信息,需要配置标签属性open-type="getUserInfo"
      2. 用户选择之后(无论用户选择取消还是确定,都会执行success回调),获取到用户的个人信息,需要绑定事件,事件名getuserinfo
      3. 在事件回调函数中,通过形参res.detail可以获取到用户个人信息
      4. 将获取到的个人信息更新到data中,在wxml中展示即可
      5. 注意:data的属性可以不需要提前声明,可以后续通过setData新增
    3. 最新
      1. API:wx.getUserProfile()
      2. 注意:
        1. 问题一: 报错信息"wx.getUserProfile is not a function"
          1. 说明:当前版本库不支持该API,需要调整版本库(版本必须是2.15.0以上)
        2. 可以通过wx.canIUse检查当前API是否适用
        3. 每次调用该API都会弹出授权窗口
        4. 该API必须在点击事件的回调函数中执行才有用,否则无效(例如onLoad)
        5. 如果还想实现二次登录免授权功能,可以在首次获取到信息之后,将信息缓存到本地存储中(Storage)中
  3. 用户二次登录免授权(静默登录):
    1. API:wx.getUserInfo({})
    2. 通过该API可以获取到用户的个人信息
    3. 注意点:该API只能在用户经过了首次登录授权流程之后,才能够直接获取到用户个人信息
  4. 奇特的组件
    1. 组件名:open-data
    2. 该组件很鸡肋,仅用于给用户观看,开发者想要获取到内部数据,无法获取

其他重要功能 ​

  1. 从当前小程序跳转到另外一个小程序

    1. API:wx.navigateToMiniProgram
    2. 文档位置:API->开放接口->小程序跳转
    3. 该API需要传递另外一个小程序的appid,才可以实现跳转

  2. 小程序插件使用

    1. 前往fuwu.weixin.qq.com寻找自己想要的插件

    2. 进入插件详情页面,点击添加插件

    3. 进入微信公众平台后台,可以在设置->第三方设置

    4. 由于当前学习的插件是定位以及城市选择器,所以需要使用到定位功能

      1. 需要申请开启定位功能
        1. 微信公众平台后台->开发->开发工具,点击腾讯位置服务
        2. 扫码授权之后,会自动跳转到腾讯位置服务官网,点击进入控制台(第一次需要注册账号)
        3. 控制台->左侧导航->应用管理->我的应用中,添加新的key值

    5. 在小程序中引入插件

      1. 在app.json中添加一个plugins配置项,用于声明当前项目使用到的插件

        1. json
          {
  "plugins": {
   "citySelector": {
     "version": "1.0.0",
     "provider": "wx63ffb7b7894e99ae"
   }
 }
}

      2. 在app.json中添加一个permission配置项,用于申请获取用户定位信息

        1. json
          {
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序定位"
    }
  }
}

    6. 使用插件

      1. 通过某个按钮的点击事件,用于跳转到对应的插件页面

        1. javascript
              const key = 'BZ7BZ-QQWCU-DHWV2-BFJJG-B2JZF-KSBT3'; // 使用在腾讯位置服务申请的key
    const referer = '七月入栈'; // 调用插件的app的名称
    const hotCitys = '上海,北京,深圳,泉州'; // 用户自定义的的热门城市

    wx.navigateTo({
      url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
    })

      7.获取当前用户选择的城市信息

      ​ 1.引入组件

      javascript
      const citySelector = requirePlugin('citySelector');

      ​ 1.在当前页面的onShow中,调用该组件的getCity方法获取到用户的选择结果

      javascript
      const selectedCity = citySelector.getCity();

3.强制更新

​ 前言:小程序的启动一共分两种,分别是热启动和冷启动

​ 冷启动:根据小程序机制,首次开启的时候,小程序需要初始化渲染

​ 热启动:根据小程序机制,如果用户离开当前小程序不超过5分钟(期间用户的内存足够),再次进入小程序,小程序会保持离开之前的状态,不会关闭

​ 1.获取全局唯一的更新管理器实例

javascript
let updateManager = wx.getUpdateManager();

​ 2.绑定checkforupdate事件监听

​ 1.他会不断向微信官方服务器发送请求,检测当前小程序版本是否为最新版本

​ 2.如果出现比本地更新的版本,会自动下载

javascript
updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
    //res中的hasUpdate可以知道是否需要更新
      if (res.hasUpdate) {
          //弹窗提示用户
      }
    })

​ 3.绑定updateReady事件,监听小程序更新是否下载完成

javascript
 updateManager.onUpdateReady(function () {
     //调用该API实现更新包安装,强制更新
     updateManager.applyUpdate()
    })

​ 注意:一般来说不会直接调用updateManager.applyUpdate(),因为这个代码会直接关闭小程序,并开始更新的安装操作,为了防止用户正在做某些大事,我们一般会友好的弹出窗口提示用户有最新版本,咨询是否更新

开发注意事项 ​

  1. swiper组件
    1. swiper组件内部只能使用swiper-item组件
    2. swiper-item组件也只能在swiper中使用
    3. swiper-item组件代表着轮播图中的一页的内容
    4. 注意:swiper组件自带overflow:hidden效果
  2. scroll-view组件
    1. scroll-view组件的功能是实现局部区域滑动效果
    2. scroll-view组件内部可以书写任意内容
    3. 标签属性:
      1. enable-flex属性,该属性可以使当前节点中display:flex样式生效
      2. scroll-x属性,该属性用于开启scroll-view组件X轴滑动效果
    4. 该组件的BUG:
      1. 虽然开启enable-flex属性,可以让内部子元素横向排列,但是在页面布局计算时,他依旧会按照开启之前的高度进行计算
      2. 解决方案:
  3. 多行文本溢出隐藏,显示省略号效果
    1. 开启webkit内核的盒模型
      1. display:-webkit-box
    2. 设置几行之后出现省略号
      1. -webkit-line-clamp:2
    3. 设置当前元素内部文本排列方向
      1. -webkit-box-orient:vertical
    4. 溢出隐藏
      1. overflow:hidden
  4. 小程序数据请求
    1. API:wx.request({})
    2. 注意点:
      1. 小程序中没有window,全局对象是wx(所以无法使用axios)
      2. 只能发送HTTPS请求(也就是说,公司必须有CA证书)
      3. 超时时间:默认超时时间和最大超时时间都是60s
      4. 小程序请求最大并发数10个,chrome和firefox最大为6个
      5. 服务器返回值使用 UTF-8 编码
      6. 小程序只可以跟指定的域名进行网络通信
        1. 上线时
          1. 小程序需要提前配置好即将请求的域名
          2. 配置流程:开发者中心->开发管理->开发设置->配置服务器域名
        2. 开发中
          1. 小程序允许在开发过程中,暂时忽略该方面的检测
          2. 配置流程:开发工具->详情->本地设置->勾选"不校验合法域名"