uniapp和taro学习知识点记录

发表于 更新于 分类于 ， 阅读次数： 本文字数： 1.2k 阅读时长 ≈ 4 分钟
uniapp和taro学习知识点记录。

uniapp

  1. 代码编写规范

  2. App.vue文件定义全局数据和公共样式

  3. uni.scss文件定义全局变量

    • 自定义全局变量
    • 覆盖 uni-app 内置全局变量
    • 覆盖 uni-ui 样式

  4. onLoad(){} 为页面的生命周期函数

  5. 获取全局数据

    1
    2
    const app = getApp()
    console.log(app.globalData)

  6. 获取当前路由

    1
    2
    const pages = getCurrentPages()
    console.log(pages)

  7. 常用内置组件

    • view: 视图容器,类似于传统 html 中的 div (uniapp 可以使用 div,但 div 不跨平台,需要经过转译)
    • text: 文本组件,用于包裹文本内容
    • button: 按钮组件,但在小程序端的主题和其他端的主题不一样(可以通过条件编译来统一风格)
    • image: 图片组件,默认宽度 320px,高度 240px,支持:
      • 相对路径
      • 绝对路径
      • 导入
      • base64码
    • scroll-view: 滚动容器,可设置横向或纵向滚动(scroll-y/x 必须存在,且容器要有高度/宽度)
    • swiper: 轮播图组件

  8. 路由跳转

    • navigate
      • 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
      • url: 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数
    • redirect
      • 关闭当前页面，跳转到应用内的某个页面。
      • url: 需要跳转的应用内非 tabBar 的页面的路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’
    • switchTab
      • 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
      • url: 需要跳转的 tabBar 页面的路径（需在 pages.json 的 tabBar 字段定义的页面），路径后不能带参数

  9. 常见通信方式

  • url查询字符串和EventChannel

    • 通过查询字符串方式传递的参数获取方式,如: /pages/index/index?id=1&name=2

      • 在onLoad页面生命周期中获取
      1
      2
      3
      4
      onLoad((options) => {
        console.log(options) // {id: '1', name: '2'}
      })

      • 通过props获取

      1
      2
      3
      4
      5
      const props = defineProps({
        name: String,
        id: String
      })
      console.log(props); // {id: '1', name: '2'}

    • EventChannel

      • Options 语法: this.getOpenerEventChannel()
      • Composition 语法: getCurrentInstance().proxy.getOpenerEventChannel()

  • 使用事件总线

    • uni.$emit(eventName,object): 触发全局的自定义事件
    • uni.$on(eventName,callback): 监听全局的自定义事件,由 uni.$emit 触发
    • uni.$off(eventName,callback): 移除全局的自定义事件监听器
    • uni.$once(eventName,callback): 监听一个自定义事件，只能触发一次

  • 全局数据 globalData

    • 在App.vue中定义全局数据
    1
    2
    3
    4
    5
    6
    7
    8
    <script>
      export default {
        globalData: {
          name: 'big-dreamer',
          age: 18
        }
      }
    </script>

    • 在其他页面中获取全局数据

    1
    2
    3
    4
    onLoad() {
      const app = getApp()
      console.log(app.globalData); // {name: 'big-dreamer', age: 18}
    }

  • 本地数据存储

    • uni.setStorage(OBJECT): 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
    • uni.setStorageSync(KEY, DATA): 将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
    • uni.getStorage(OBJECT): 从本地缓存中异步获取指定 key 对应的内容。
    • uni.getStorageSync(KEY): 从本地缓存中同步获取指定 key 对应的内容。
    • uni.removeStorage(OBJECT): 从本地缓存中异步移除指定 key。
    • uni.removeStorageSync(KEY): 从本地缓存中同步移除指定 key。

  • Vuex 和 Pinia,状态管理库

    • Pinia 在main.js中注册
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    import App from './App'
    import * as Pinia from 'pinia'

    import {
    createSSRApp
    } from 'vue'
    export function createApp() {
      const app = createSSRApp(App)
      app.use(Pinia.createPinia())
      return {
        app,
        Pinia
      }
    }

    • 创建store

    • 使用

taro

建议使用 taro 开发小程序,其对于 h5 和 APP 的多端兼容不太好

开始使用 taro

  1. 安装 CLI

    1
    2
    3
    4
    npm install -g @tarojs/cli
    或
    yarn global add @tarojs/cli
    ...

  2. 创建项目

    1
    2
    3
    taro init myApp
    或
    npx @tarojs/cli init myApp

  3. 启动项目

  • 启动小程序 npm run dev:weapp

  • 启动 H5 端 npm run dev:h5

知识点记录

  1. Taro + React 开发规范

  2. 新建页面 Taro create --name [页面名称]

  3. 通信方式

    • url查询字符串和只支持小程序端的 EventChannel

      • 通过查询字符串方式传递的参数获取方式,如: /pages/index/index?id=1&name=2
      • 通过 onLoad,useLoad 生命周期获取路由参数
      • 通过 Taro.getCurrentInstance().router.params 获取
      • EventChannel 和 uniapp 语法相似,把 uniapp 换为 Taro

    • 使用全局事件总线 Taro.eventCenter

      • Taro.eventCenter.on(eventName,function): 监听事件
      • Taro.eventCenter.trigger(eventName,object): 触发全局的自定义事件
      • Taro.eventCenter.trigger(eventName,object): 取消监听事件

  4. 跨端兼容方案

    • 内置环境变量 process.env.TARO_ENV,通过 if 对其值进行判断
    • 统一接口的多端文件