当前位置：网站首页>uni-app 从零开始-基础模版（一）

uni-app 从零开始-基础模版（一）

2022-08-04 02:31:00 【吟秋知忆】

背景

由于公司需要开发多端小程序，使用原生开发，不仅增加了大量工作，还要维护多套代码（相同逻辑，重复开发），本着减少前期开发，降低后期优化迭代成本，通过市场调查对比后，最终打算在uniapp与taro中选择一种技术开发小程序。

技术对比

框架	技术栈	小程序	H5	App	支持平台	Star
uni-app	React/Vue	微信/支付宝...	支持	Android/IOS	14	36.9k+
taro	Vue	微信/支付宝...	支持	ReactNative	12+	31.4k+

「总结：」 uni-app 开发简单，小项目效率高，入门容易。 Taro3上手难度相对较高，需要拥有良好的编程基础，支付宝小程序有些东西需要自己兼容适配（其它端没用过）。

开发效率uni-app高，有自家的IDE（HBuilderX），编译调试打包一体化，对原生App开发体验友好；
技术栈方面Taro支持React/Vue，uni-app只支持Vue，从公司项目角度uni-app/Vue比较短平快，社区活跃度也比较高，更容易上手使用。

开始

使用Vue3/Vite创建项目基础模版，命令如下：

npx degit dcloudio/uni-preset-vue#vite-ts uniapp-applet

uni-ui

使用官方ui组件库，由官方同步维护，减少自己填坑

优点：高性能、全端、风格扩展、与uniCloud协作、与uni统计自动集成实现免打点、uni-ui符合全套DCloud组件规范

安装uni-ui

pnpm add @dcloudio/uni-ui

配置组件自动引入

在pages.json文件中配置easycom组件自动引入规则

{
    "easycom": {
        "autoscan": true,
        "custom": {
          "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
  }
}

不需要导入直接使用

<tempate>
    <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
</template>

pinia

Vue 的状态存储库，它允许您跨组件、页面共享状态。了解更多查看pinia官方文档。

在stores/index.ts中：

import { createPinia } from 'pinia';

const store = createPinia();

export default store;

在stores/counter.ts中：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 };
  },

  actions: {
    increment() {
      this.count++;
    },
  },
});

在main.ts注册store：

import { createSSRApp } from "vue";
import store from '@/stores';

import App from "./App.vue";

export function createApp() {
  const app = createSSRApp(App);
   
  // 注册store
  app.use(store);

  return {
    app,
  };
}

在页面中使用：

<template>
  <view class="content">
    <view>counter:{{ counter.count }}</view>
    <button @click="counter.increment">add</button>
  </view>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/modules/counter';
const counter = useCounterStore();
</script>

图标库

阿里图标库：搭建自己的图标库，小程序使用base64转换后的图标格式。

选择自己的图标，下载后复制iconfont.css的内容到自己的图标icon.scss样式文件；
删除引入本地的地址，只留base64转换后的地址；
在全局中App.vue或main.ts文件中引入图标样式。

<style lang="scss">
@import './styles/icon';
</style>

使用

<text class="iconfont icon-music"></text>

动画

animate css动画库

小技巧

背景图

本地背景图片推荐以～@开头的绝对路径，背景图片建议小于40k,小于40k不支持本地背景平台编译自动转化为base64格式。

.test2 {
    background-image: url('[email protected]/static/logo.png');
}

easycom

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

vite

优秀的vite插件推荐：

unocss原子化css
vite-tsconfig-paths 配置别名映射
pinia-auto-refs 自动化storeToRefs（使用vuex可以忽略）
unplugin-auto-import 自动导入 Vite、Webpack、Rollup 和 esbuild 的 API

更多配置查看vite官方文档

注意事项

vue3 响应式基于 Proxy 实现，不支持 iOS9和 ie11，查看iOS and iPadOS usage。
暂不支持新增的 Teleport, Suspense 组件

推荐阅读

<script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时则推荐该语法。相比于普通的 <script> 语法，它具有更多优势：

更少的样板内容，更简洁的代码。
能够使用纯 Typescript 声明 prop 和抛出事件。
更好的运行时性能 (其模板会被编译成同一作用域的渲染函数，没有任何的中间代理)。
更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类型的工作)。

defineProps

为了在声明 props 选项时获得完整的类型推断支持

<template>
  <h1>{{ msg }}</h1>
</template>

<script setup lang="ts">
defineProps({
  msg: String
})
</script>

defineEmits

为了在声明 emits 选项时获得完整的类型推断支持

<template>
  <div @click="onClick">点我</div>
</template>

<script setup lang="ts">  
  const emit = defineEmits(['click', 'change', 'delete'])

  const onClick = () => {
    emit('click', 2)
  }
</script>

defineExpose

使用 <script setup> 的组件是「默认关闭」的——即通过模板 ref 或者 $parent 链获取到的组件的公开实例，「不会」暴露任何在 <script setup> 中声明的绑定。

子组件child.vue暴露自己的属性

<template>
  <div>子组件child.vue</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const count = ref(123456)
defineExpose({
  count
})
</script>

父组件获取子组件属性

<template>
  <button @click="onClick">父组件</button>
  <child ref="childRef"></child>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import child from './components/child.vue'

const childRef = ref(null)

const onClick = () => {
  console.log(childRef.value.count) // 123456
}
</script>