Cao Note

外观

UniApp 组件与数据 ​

easycom 自动注册 ​

只要组件安装在 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构，就可以不用引用、注册，直接在页面中使用：

vue
<template>
  <view>
    <uni-badge text="1"></uni-badge>
  </view>
</template>
<script>
// 不需要 import，不需要在 components 中注册
export default { data() { return {} } }
</script>
<template>
  <view>
    <uni-badge text="1"></uni-badge>
  </view>
</template>
<script>
// 不需要 import，不需要在 components 中注册
export default { data() { return {} } }
</script>
  • easycom 是自动开启的，可在 pages.json 的 easycom 节点个性化设置
  • 打包后自动剔除未使用的组件

命名限制 ​

以下关键字不可作为组件名：canvas, cell, content, div, embed, header, image, img, input, link, list, loading, slot, span, switch, text, video, view, web 等。

Props ​

vue
<script>
export default {
  props: {
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) { return value >= 0 },
    },
  },
}
</script>
<script>
export default {
  props: {
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) { return value >= 0 },
    },
  },
}
</script>

.sync 修饰符 ​

子组件改变 prop 时同步到父组件：

vue
<!-- 父组件 -->
<syncA :title.sync="title"></syncA>

<!-- 子组件触发更新 -->
this.$emit('update:title', 'test-app')
<!-- 父组件 -->
<syncA :title.sync="title"></syncA>

<!-- 子组件触发更新 -->
this.$emit('update:title', 'test-app')

网络请求 ​

uni.request ​

js
uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function (res) { console.log(res.data) },
})
uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function (res) { console.log(res.data) },
})

封装示例 ​

js
const request = (config) => {
  const isToken = (config.headers || {}).isToken === false
  config.header = config.header || {}
  if (getToken() && !isToken) {
    config.header['Authorization'] = 'Bearer ' + getToken()
  }
  return new Promise((resolve, reject) => {
    uni.request({
      method: config.method || 'get',
      timeout: config.timeout || 10000,
      url: (config.baseUrl || baseUrl) + config.url,
      data: config.data,
      header: config.header,
      dataType: 'json',
    }).then((response) => {
      let [error, res] = response
      if (error) { reject('后端接口连接异常'); return }
      // 统一处理 code
      const code = res.data.code || 200
      if (code === 401) { /* 重新登录 */ }
      else if (code !== 200) { /* 错误提示 */ }
      resolve(res.data)
    }).catch((error) => { /* 错误处理 */ })
  })
}
const request = (config) => {
  const isToken = (config.headers || {}).isToken === false
  config.header = config.header || {}
  if (getToken() && !isToken) {
    config.header['Authorization'] = 'Bearer ' + getToken()
  }
  return new Promise((resolve, reject) => {
    uni.request({
      method: config.method || 'get',
      timeout: config.timeout || 10000,
      url: (config.baseUrl || baseUrl) + config.url,
      data: config.data,
      header: config.header,
      dataType: 'json',
    }).then((response) => {
      let [error, res] = response
      if (error) { reject('后端接口连接异常'); return }
      // 统一处理 code
      const code = res.data.code || 200
      if (code === 401) { /* 重新登录 */ }
      else if (code !== 200) { /* 错误提示 */ }
      resolve(res.data)
    }).catch((error) => { /* 错误处理 */ })
  })
}

数据缓存 ​

异步方法 ​

API说明
uni.setStorage(OBJECT)存储数据到本地缓存
uni.getStorage(OBJECT)获取指定 key 的内容
uni.getStorageInfo(OBJECT)获取 storage 相关信息
uni.removeStorage(OBJECT)移除指定 key
uni.clearStorage()清理本地数据缓存

同步方法 ​

API说明
uni.setStorageSync(KEY, DATA)同步存储
uni.getStorageSync(KEY)同步获取
uni.getStorageInfoSync()同步获取信息
uni.removeStorageSync(KEY)同步移除
uni.clearStorageSync()同步清理

存储差异 ​

平台实现限制
H5localStorage5M 限制，可能被清理
Appplus.storage无大小限制，持久化
小程序各平台自带 storage微信 1MB/key, 10MB 总上限

uni-、uni_、dcloud-、dcloud_ 为前缀的 key 为系统保留关键前缀

CSS 引用 ​

全局引用方式：

vue
<!-- App.vue 中全局引用 -->
<style lang="scss">
  @import '@/static/scss/test.css';
</style>
<!-- App.vue 中全局引用 -->
<style lang="scss">
  @import '@/static/scss/test.css';
</style>

或在 index.scss 中导入统一管理。

Copyright © 2024-present xiaocao