使用uniapp开发微信小程序-框架搭建
最近要开发一个小程序,为了降低学习成本,最后还是选择使用uniapp来开发,但是由于电脑性能不行,实在不想多跑一个应用程序,就简单搭建了一个可以用vscode跑的uniapp项目。
项目整体技术栈:vue3 + pinia + typescript + sass + unocss + vite5
基础框架
1、使用 uniapp官网中的Vue3/Vite版:
npx degit dcloudio/uni-preset-vue#vite-ts uni-preset-vue-vite-ts
如果创建失败,可以直接下载模板
基础项目下载/安装完以后,目录如下:
我们可以看一下package.json文件中,有很多默认的依赖包:
由于我们仅需要发布微信小程序端,所以将其他没用的包都删掉:
在项目根目录下安装依赖包:
npm install
2、其他依赖包安装
另外安装了其他需要的依赖包,例如pinia、sass、unocss等等。
1)pinia —— 全局状态管理
项目一些数据需要持久化,配套安装pinia-plugin-persistedstate,不需要可以不安装。
npm install pinia pinia-plugin-persistedstate
安装完以后在项目src
文件夹下新建文件夹store
,store
文件夹下新建文件index.ts
和 user.ts
:
然后按官网使用即可:
// index.ts
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate' // 数据持久化const store = createPinia()
store.use(createPersistedState({storage: {getItem: uni.getStorageSync,setItem: uni.setStorageSync,},}),
)export default store// 模块统一导出
export * from './user'
// user.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'const initState = {account: '',name: '',phone: '',token: '',
}export const useUserStore = defineStore('user',() => {// 初始化const userInfo = ref<IUserInfo>({ ...initState })// 设值const setUserInfo = (val: IAccountInfo) => {userInfo.value = val}return {userInfo,setUserInfo,}},{persist: true,},
)
2)、sass —— css预编译
npm install sass --save-d
3)、postcss —— CSS转换
配套安装postcss-html 可以将html文件中的样式块中的CSS代码提取出来进行处理,还有postcss-scss可以将sass代码转换成CSS代码
npm install postcss postcss-html postcss-scss --save-d
在manifest.json中配置:
本项目和stylelint配套食用,其他具体配置见👇
4)、stylelint —— CSS代码检查工具
包名 | 作用 |
---|---|
stylelint | CSS代码检查工具 |
stylelint-config-html | html文件-样式代码检查 |
stylelint-config-recommended | 样式代码检查配置插件(比stylelint-config-standard更加宽松) |
stylelint-config-recommended-scss | SCSS语法检查 |
stylelint-config-recommended-vue | vue文件-样式代码检查 |
stylelint-prettier | 样式代码检查和格式化工具 |
npm install stylelint stylelint-config-html stylelint-config-recommended stylelint-config-recommended-scss stylelint-config-recommended-vue stylelint-prettier --save-d
在项目根目录下新建文件.stylelintrc.cjs
module.exports = {root: true,extends: ['stylelint-config-recommended','stylelint-config-recommended-scss','stylelint-config-recommended-vue/scss','stylelint-config-html/vue','stylelint-config-recess-order',],plugins: ['stylelint-prettier'],overrides: [// 扫描 .vue/html 文件中的<style>标签内的样式{files: ['**/*.{vue,html}'],customSyntax: 'postcss-html',},{files: ['**/*.{css,scss}'],customSyntax: 'postcss-scss',},],// 自定义规则rules: {'prettier/prettier': true,// 允许 global 、export 、v-deep等伪类'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['global', 'export', 'v-deep', 'deep'],},],'unit-no-unknown': [true,{ignoreUnits: ['rpx'],},],// 小程序不能识别page标签'selector-type-no-unknown': [true,{ignoreTypes: ['page'],},],// never|always|always-multi-line|never-multi-line'comment-empty-line-before': 'never', 'custom-property-empty-line-before': 'never','no-empty-source': null,'comment-no-empty': null,'no-duplicate-selectors': null,'scss/comment-no-empty': null,'selector-class-pattern': null,'font-family-no-missing-generic-family-keyword': null,},
}
在项目根目录下新建文件.stylelintignore
,忽略一些不用检查的文件
src/uni_modules/
5)、unocss —— css原子化
配套安装unocss-applet
使用小程序预设
npm install unocss unocss-applet --save-d
在项目根目录下新建文件uno.config.ts
// uno.config.ts
import {type Preset,defineConfig,presetUno,presetAttributify,presetIcons,transformerDirectives,transformerVariantGroup,
} from 'unocss'import { presetApplet, presetRemRpx } from 'unocss-applet'const isMp = process.env?.UNI_PLATFORM?.startsWith('mp') ?? falseconst presets: Preset[] = []
if (isMp) {// 使用小程序预设presets.push(presetApplet(), presetRemRpx())
} else {presets.push(// 非小程序用官方预设presetUno(),// 支持css class属性化presetAttributify(),)
}
export default defineConfig({presets: [...presets,// 支持图标,需要搭配图标库,eg: @iconify-json/carbon, 使用 `<button class="i-carbon-sun dark:i-carbon-moon" />`presetIcons({scale: 1.2,warn: true,extraProperties: {display: 'inline-block','vertical-align': 'middle',},}),],/*** 自定义快捷语句* @see https://github.com/unocss/unocss#shortcuts*/shortcuts: [['center', 'flex justify-center items-center'],['x-between', 'flex justify-between items-center'],['b-b-s-1', 'b-b-1 b-b-solid b-b-#e5e5e5'],['column', 'flex flex-col'],['p-page', 'p-20rpx pb-40rpx'],],transformers: [// 启用 @apply 功能transformerDirectives(),// 支持变体组功能,例如<div class="hover:(bg-gray-400 font-medium)"></div>transformerVariantGroup()],rules: [['pt-safe', { 'padding-top': 'env(safe-area-inset-top)' }],['pb-safe', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],],
})
6)、unplugin-auto-import —— 自动引入
npm install unplugin-auto-import --save-d
在vite.config.ts
中配置:
import AutoImport from 'unplugin-auto-import/vite'
// 其他配置省略,在plugins中配置自动引入
defineConfig({plugins:[AutoImport({imports: ['vue', 'uni-app'],// 自动引入生成文件的位置dts: 'src/types/auto-import.d.ts',// 可以自动导入 hooks// dirs: ['src/hooks'], // 如果配置了eslintrc// eslintrc: { enabled: true },vueTemplate: true, // default false}),]
})
7)、其他
包名 | 作用 |
---|---|
@uni-helper/uni-types | uniapp中的类型定义 |
@uni-helper/vite-plugin-uni-manifest | 使用 TypeScript 编写 uni-app 的 manifest.json |
@uni-helper/vite-plugin-uni-pages | 使用 TypeScript 编写 uni-app 的 pages.json |
npm install @uni-helper/uni-types @uni-helper/vite-plugin-uni-manifest @uni-helper/vite-plugin-uni-pages --save-d
按装以后,在项目根目录下新建manifest.config.ts
和pages.config.ts
// manifest.config.ts
import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'
import path from 'node:path'
import { loadEnv } from 'vite'// 获取环境变量的范例
const env = loadEnv(process.env.NODE_ENV!, path.resolve(process.cwd(), 'env'))
const {VITE_APP_TITLE,VITE_UNI_APPID,VITE_WX_APPID,VITE_APP_PUBLIC_BASE,VITE_FALLBACK_LOCALE,
} = envexport default defineManifestConfig({name: VITE_APP_TITLE,appid: VITE_UNI_APPID,description: '',versionName: '1.0.0',versionCode: '100',transformPx: false,locale: VITE_FALLBACK_LOCALE, // 'zh-Hans'h5: {router: {base: VITE_APP_PUBLIC_BASE,},},/* 小程序特有相关 */'mp-weixin': {appid: VITE_WX_APPID,setting: {urlCheck: false,postcss: true,es6: true,minified: true,},usingComponents: true,optimization: {subPackages: true,},lazyCodeLoading: 'requiredComponents',scopedSlotsCompiler: 'augmented',},uniStatistics: {enable: false,},vueVersion: '3',
})
import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
import path from 'node:path'
import { loadEnv } from 'vite'// 获取环境变量的范例
const env = loadEnv(process.env.NODE_ENV!, path.resolve(process.cwd(), 'env'))
const { VITE_APP_TITLE } = envexport default defineUniPages({easycom: {autoscan: true,custom: {'^Cus(.*)': '@/components/Cus$1.vue','^u-(.*)': 'uview-ui/components/u-$1/u-$1.vue',},},pages: [{path: 'pages/home/Index',type: 'home',style: {navigationStyle: 'custom',enablePullDownRefresh: false, //当前页disableScroll: true,navigationBarTitleText: VITE_APP_TITLE,},},{path: 'pages/sign/Index',style: {navigationStyle: 'custom',enablePullDownRefresh: false, //当前页disableScroll: true,navigationBarTitleText: '',},},],subPackages: [{root: 'pages-sub',pages: [{path: 'order/Index',style: {navigationStyle: 'custom',enablePullDownRefresh: false, //当前页disableScroll: true,},}],},],preloadRule: {'pages/home/Index': {network: 'all',packages: ['pages-sub'],},},
})
tsconfig.json
中增加@uni-helper/uni-types
配置:
{"compilerOptions": {"composite": true,"skipLibCheck": true,"module": "ESNext","moduleResolution": "Node","resolveJsonModule": true,"noImplicitThis": true,"allowSyntheticDefaultImports": true,"allowJs": true,"sourceMap": true,"baseUrl": ".","paths": {"@/*": ["./src/*"]},"outDir": "dist","lib": ["esnext", "dom"],"types": ["@dcloudio/types","@uni-helper/uni-types",]},"vueCompilerOptions": {"target": 3,"plugins": ["@uni-helper/uni-types/volar-plugin"]},"exclude": ["node_modules"],"include": ["src/*.ts","src/**/*.ts","src/**/*.js","src/**/*.d.ts","src/**/*.tsx","src/**/*.jsx","src/**/*.vue","src/**/*.json"]
}
这里有一个常见错误,如果项目在vscode中提示类型“IntrinsicElements”上不存在属性“template”错误,那么需要将vueCompilerOptions.target设置成"auto"。
除此之外还可以安装eslint,老生常谈就不赘述了,源代码中默认安装了,不需要可以删除。
环境变量配置
在项目根目录下创建文件夹env
:
每个文件中定义各自环境变量,公共不需要区分环境的放到.env
中。
然后在vite.config.ts中配置:
好啦,这样基础框架就搭建好了,总体来说分为三步:
- 从官网安装基础模版
- 将package.json中不需要的依赖删除
- 安装其他依赖,例如pinia、sass、unocss以及开发规范和格式化等插件,然后根据不同的插件进行配置。
相关文章:

使用uniapp开发微信小程序-框架搭建
最近要开发一个小程序,为了降低学习成本,最后还是选择使用uniapp来开发,但是由于电脑性能不行,实在不想多跑一个应用程序,就简单搭建了一个可以用vscode跑的uniapp项目。 项目整体技术栈:vue3 pinia type…...
雅思真题短语(九)
真题短语收录在合辑 141华夫饼 waffles 142防腐剂 no preservatives 143精制 refined sugar 144水分充足 plenty of moisture 145五角星 five-pointed star 146树皮 tree bark 147汁液 liquid sap 148敲击 several taps 149蒸发 water evaporates 150干旱的山谷 arid valleys …...
系统压力测试助手——stress-ng
1、背景 在系统性能测试和压力测试中,stress-ng 是一个非常强大的工具,广泛应用于对 Linux 系统进行各种硬件和软件方面的负载测试。它能够模拟多种极端负载情况,帮助开发人员和运维人员检查系统在高负载下的表现,以便发现潜在的…...

java如何使用poi-tl在word模板里渲染多张图片
1、poi-tl官网地址 http://deepoove.com/poi-tl/ 2、引入poi-tl的依赖 <dependency><groupId>com.deepoove</groupId><artifactId>poi-tl</artifactId><version>1.12.1</version></dependency>3、定义word模板 释义…...
UE5 UHT GENERATED_BODY() GENERATED_USTRUCT_BODY()
你在 .h 文件中写的 GENERATED_BODY() 宏本身并不是 GetPrivateStaticClass() 函数的声明。 实际上,GENERATED_BODY() 是一个预处理器宏,它会被 Unreal Header Tool (UHT) 处理。 UHT 会读取你的 .h 文件,识别 UCLASS() 和 GENERATED_BODY(…...
内网穿透ubuntu20 docker coplar
sudo apt-get install curl curl -L https://www.cpolar.com/static/downloads/install-release-cpolar.sh | sudo bash ubuntu-base报错 /sbin/init:No such file or directory解决办法 apt install systemd 命令安装即可 cpolar version 1.3 token认证 登录cpolar官网后台…...
windows C++ TCP客户端
demo有一下功能 1、心跳包 2、断开重连 3、非阻塞 4、接受数据单独线程处理 #include <iostream> #include <winsock2.h> #include <ws2tcpip.h> #include <windows.h> #include <string> #include <process.h> // 用于Windows下的线程相…...
Linux xargs 命令使用教程
简介 xargs 是一个功能强大的 Linux 命令,用于从标准输入构建和执行命令。它接受一个命令的输出,并将其作为参数提供给另一个命令。它在处理大量输入时特别有用,其含义可以解释为:extended arguments,使用 xargs 允许…...
什么是异步处理
什么是异步处理 if ( conditionA && conditionB )mqSendService.sendMessageAsync(MqTopicConstant.YOUR_TOPIC, ID,JSONObject.toJSONString(CommonMsg.builder().data(ID).msgType(TypeCode).build()));}sendMessageAsync 发送消息的过程不会阻塞当前的执…...

【解决问题】Java2DRenderer生成图片时中文乱码 Linux安装字体
一,问题 在使用Java2DRenderer框架将html生成图片时,html中的中文文本在图片上显示框框,即出现了中文乱码。在确认使用正确的字符编码utf-8之后,并且确认了修改成unicode也同样乱码的情况下,找到了真正的原因…...

WPF 依赖属性和附加属性
除了普通的 CLR 属性, WPF 还有一套自己的属性系统。这个系统中的属性称为依赖属性。 1. 依赖属性 为啥叫依赖属性?不叫阿猫阿狗属性? 通常我们定义一个普通 CLR 属性,其实就是获取和设置一个私有字段的值。假设声明了 100 个 …...
leetcode hot100 删除链表的第n个节点
19. 删除链表的倒数第 N 个结点 已解答 中等 相关标签 相关企业 提示 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点 # Definition for singly-linked list. # class ListNode(object): # def __init__(self, val0, nextNon…...
MyBatis-Plus分页拦截器,源码的重构(重构total总数的计算逻辑)
1.1创建ThreadLocal工具类(作为业务逻辑结果存放类) package org.springblade.sample.utils;public class QueryContext {private static final ThreadLocal<Long> totalInThreadLocal new ThreadLocal<>();public static void setTotalIn…...
记一MySQL连接速度慢的问题
某一个程序启动速度超级慢,查看日志得知是是在Init DruidDataSource ~ {dataSource-1} inited 这一段耗时最长,这一段是Druid 数据源初始化,进行连接的创建等,使用mysql命令行连接发现连接超级慢,可见是在创建连接的时…...
asp.net core webapi项目中 在生产环境中 进不去swagger
builder.WebHost.UseUrls 是 ASP.NET Core 中配置应用程序监听 URL 或端口的方法。通过使用这个方法,你可以指定应用程序应该在哪些 URL 上运行,以便接收 HTTP 请求。 1.在appsetting.json中 添加 "LaunchUrl": "http://*:327"2.在…...

逆向攻防世界CTF系列63-secret-string-400
逆向攻防世界CTF系列63-secret-string-400 丢入exeinfo,查得zip,解压得四个文件 点进Task,查看源码:Test your luck! Enter valid string and you will know flag 顺理成章地看js 定位check函数 调用了machine的loadcode 跟进…...

Datawhale AI 冬令营学习笔记-零编程基础制作井字棋小游戏
井字棋小游戏是通过豆包MarsCode实现的,没有改动任何的代码,全部是通过对话让AI进行优化和改进。 开始进入正题:进入豆包MarsCode在线IDE,直接点击上方蓝字,或复制链接打开: 豆包 MarsCode - 编程助手。 IDE界面&…...

分布式专题(10)之ShardingSphere分库分表实战指南
一、ShardingSphere产品介绍 Apache ShardingSphere 是一款分布式的数据库生态系统, 可以将任意数据库转换为分布式数据库,并通过数据分片、弹性伸缩、加密等能力对原有数据库进行增强。Apache ShardingSphere 设计哲学为 Database Plus,旨在…...

clickhouse解决suspiciously many的异常
1. 问题背景 clickhouse安装在虚拟机上,持续写入日志时,突然关机,然后重启,会出现clickhouse可以正常启动,但是查询sql语句,提示suspiciously many异常,如图所示 2. 问题修复 touch /data/cl…...
计算机的错误计算(一百九十)
摘要 用两个大模型计算cot(1.234). 其中,1.234是以弧度为单位的角度。结果保留10位有效数字。实验表明,两个的计算公式虽然不同,但是都是正确的。然而,数值计算则是有问题的---包括每一个中间运算与结果。 例1. 计算cot(1.234)…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言:多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时,基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套:跨云网络构建数据…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...

使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...

如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
NPOI Excel用OLE对象的形式插入文件附件以及插入图片
static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
Python实现简单音频数据压缩与解压算法
Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中,压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言,提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

rm视觉学习1-自瞄部分
首先先感谢中南大学的开源,提供了很全面的思路,减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接:https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架: 代码框架结构:readme有…...