背景

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

技术对比

总结：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 

2. 配置组件自动引入

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

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

3. 不需要导入直接使用

pinia

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

1. 在stores/index.ts中：

import { createPinia } from 'pinia';const store = createPinia();export default store;

2. 在stores/counter.ts中：

import { defineStore } from 'pinia';export const useCounterStore = defineStore('counter', {  state: () => {    return { count: 0 };  },  actions: {    increment() {      this.count++;    },  },});

3. 在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,  };}

4. 在页面中使用：

图标库

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

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

使用

动画

animate css动画库

小技巧

背景图

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

.test2 {    background-image: url('~@/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 组件

推荐阅读

• uniapp
• vitejs
• vue3/script-setup

2. defineEmits

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

3. defineExpose

使用

父组件获取子组件属性

总结

本次基础模版分别引入：

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

关注我

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

支付宝打赏

微信打赏

uni

发表评论

留言与评论（共有 0 条评论） “”

验证码：