uni-app 从零开始（一）(组件自己的支持开发引入)

技术栈

小程序

H5

App

支持平台

Star

uni-app

React/Vue

微信/支付宝...

支持

Android/IOS

14

36.9k+

taro

Vue

微信/支付宝...

支持

ReactNative

12+

31.4k+

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

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

npxdegitdcloudio/uni-preset-vue#vite-tsuniapp-appletuni-ui

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

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

pnpmadd@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官方文档。

import{createPinia}from'pinia';conststore=createPinia();exportdefaultstore;在stores/counter.ts中：

import{defineStore}from'pinia';exportconstuseCounterStore=defineStore('counter',{state:()=>{return{count:0};},actions:{increment(){this.count++;},},});在main.ts注册store：

import{createSSRApp}from"vue";importstorefrom'@/stores';importAppfrom"./App.vue";exportfunctioncreateApp(){constapp=createSSRApp(App);//注册storeapp.use(store);return{app,};}在页面中使用：

<template><viewclass="content"><view>counter:{{counter.count}}</view><button@click="counter.increment">add</button></view></template><scriptsetuplang="ts">import{useCounterStore}from'@/stores/modules/counter';constcounter=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('~@/static/logo.png');}easycom

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

优秀的vite插件推荐：

更多配置查看vite官方文档

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

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

<template><h1>{{msg}}</h1></template><scriptsetuplang="ts">defineProps({msg:String})</script>defineEmits

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

<template><div@click="onClick">点我</div></template><scriptsetuplang="ts">constemit=defineEmits(['click','change','delete'])constonClick=()=>{emit('click',2)}</script>defineExpose

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

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

<template><div>子组件child.vue</div></template><scriptsetuplang="ts">import{ref}from'vue'constcount=ref(123456)defineExpose({count})</script>

父组件获取子组件属性

<template><button@click="onClick">父组件</button><childref="childRef"></child></template><scriptsetuplang="ts">import{ref}from'vue'importchildfrom'./components/child.vue'constchildRef=ref(null)constonClick=()=>{console.log(childRef.value.count)//123456}</script>总结

本次基础模版分别引入：

需要免费兼职，每天五分钟，实现最美现金流；有感兴趣的，请联系我～