吟秋知忆

V1

2022/08/04阅读:54主题:凝夜紫

uni-app 从零开始-基础模版(一)

背景

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

技术对比

框架 技术栈 小程序 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组件规范

  1. 安装uni-ui
pnpm add @dcloudio/uni-ui 
  1. 配置组件自动引入

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

{
    "easycom": {
        "autoscan": true,
        "custom": {
          "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
  }
}
  1. 不需要导入直接使用
<tempate>
    <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
</
template>

pinia

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

  1. 在stores/index.ts中:
import { createPinia } from 'pinia';

const store = createPinia();

export default store;
  1. 在stores/counter.ts中:
import { defineStore } from 'pinia';

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

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

  1. 在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,
  };
}
  1. 在页面中使用:
<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转换后的图标格式。 图标库

  1. 选择自己的图标,下载后复制iconfont.css的内容到自己的图标icon.scss样式文件;
  2. 删除引入本地的地址,只留base64转换后的地址;
  3. 在全局中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('~@/static/logo.png');
}

easycom

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

mot-hello
mot-hello

vite

优秀的vite插件推荐:

更多配置查看vite官方文档

注意事项

  • vue3 响应式基于 Proxy 实现,不支持iOS9ie11查看iOS and iPadOS usage
  • 暂不支持新增的 Teleport,Suspense 组件

推荐阅读

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

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

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

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

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

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

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

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

  const onClick = () => {
    emit('click'2)
  }
</script>
  1. 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>

总结

本次基础模版分别引入:

  • uni-ui 官方ui库
  • pinia 状态管理工具
  • iconfont 图标库
  • animate css动画库
  • vite 优秀插件

关注我

利用空闲时间免费兼职,请联系我(PS:关注公众号后,点击“联系我”获取联系方式)~

吟秋知忆
吟秋知忆

分类:

前端

标签:

前端

作者介绍

吟秋知忆
V1