当前位置: 首页 > news >正文

使用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.tsuser.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代码检查工具

包名作用
stylelintCSS代码检查工具
stylelint-config-htmlhtml文件-样式代码检查
stylelint-config-recommended样式代码检查配置插件(比stylelint-config-standard更加宽松)
stylelint-config-recommended-scssSCSS语法检查
stylelint-config-recommended-vuevue文件-样式代码检查
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-typesuniapp中的类型定义
@uni-helper/vite-plugin-uni-manifest使用 TypeScript 编写 uni-appmanifest.json
@uni-helper/vite-plugin-uni-pages使用 TypeScript 编写 uni-apppages.json
npm install @uni-helper/uni-types @uni-helper/vite-plugin-uni-manifest @uni-helper/vite-plugin-uni-pages --save-d

按装以后,在项目根目录下新建manifest.config.tspages.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中配置:

在这里插入图片描述

好啦,这样基础框架就搭建好了,总体来说分为三步:

  1. 从官网安装基础模版
  2. 将package.json中不需要的依赖删除
  3. 安装其他依赖,例如pinia、sass、unocss以及开发规范和格式化等插件,然后根据不同的插件进行配置。

相关文章:

使用uniapp开发微信小程序-框架搭建

最近要开发一个小程序&#xff0c;为了降低学习成本&#xff0c;最后还是选择使用uniapp来开发&#xff0c;但是由于电脑性能不行&#xff0c;实在不想多跑一个应用程序&#xff0c;就简单搭建了一个可以用vscode跑的uniapp项目。 项目整体技术栈&#xff1a;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、背景 在系统性能测试和压力测试中&#xff0c;stress-ng 是一个非常强大的工具&#xff0c;广泛应用于对 Linux 系统进行各种硬件和软件方面的负载测试。它能够模拟多种极端负载情况&#xff0c;帮助开发人员和运维人员检查系统在高负载下的表现&#xff0c;以便发现潜在的…...

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模板 释义&#xf…...

UE5 UHT GENERATED_BODY() GENERATED_USTRUCT_BODY()

你在 .h 文件中写的 GENERATED_BODY() 宏本身并不是 GetPrivateStaticClass() 函数的声明。 实际上&#xff0c;GENERATED_BODY() 是一个预处理器宏&#xff0c;它会被 Unreal Header Tool (UHT) 处理。 UHT 会读取你的 .h 文件&#xff0c;识别 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 命令&#xff0c;用于从标准输入构建和执行命令。它接受一个命令的输出&#xff0c;并将其作为参数提供给另一个命令。它在处理大量输入时特别有用&#xff0c;其含义可以解释为&#xff1a;extended arguments&#xff0c;使用 xargs 允许…...

什么是异步处理

什么是异步处理 if ( conditionA && conditionB &#xff09;mqSendService.sendMessageAsync(MqTopicConstant.YOUR_TOPIC, ID,JSONObject.toJSONString(CommonMsg.builder().data(ID).msgType(TypeCode).build()));}sendMessageAsync 发送消息的过程不会阻塞当前的执…...

【解决问题】Java2DRenderer生成图片时中文乱码 Linux安装字体

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

WPF 依赖属性和附加属性

除了普通的 CLR 属性&#xff0c; WPF 还有一套自己的属性系统。这个系统中的属性称为依赖属性。 1. 依赖属性 为啥叫依赖属性&#xff1f;不叫阿猫阿狗属性&#xff1f; 通常我们定义一个普通 CLR 属性&#xff0c;其实就是获取和设置一个私有字段的值。假设声明了 100 个 …...

leetcode hot100 删除链表的第n个节点

19. 删除链表的倒数第 N 个结点 已解答 中等 相关标签 相关企业 提示 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点 # Definition for singly-linked list. # class ListNode(object): # def __init__(self, val0, nextNon…...

MyBatis-Plus分页拦截器,源码的重构(重构total总数的计算逻辑)

1.1创建ThreadLocal工具类&#xff08;作为业务逻辑结果存放类&#xff09; package org.springblade.sample.utils;public class QueryContext {private static final ThreadLocal<Long> totalInThreadLocal new ThreadLocal<>();public static void setTotalIn…...

记一MySQL连接速度慢的问题

某一个程序启动速度超级慢&#xff0c;查看日志得知是是在Init DruidDataSource ~ {dataSource-1} inited 这一段耗时最长&#xff0c;这一段是Druid 数据源初始化&#xff0c;进行连接的创建等&#xff0c;使用mysql命令行连接发现连接超级慢&#xff0c;可见是在创建连接的时…...

asp.net core webapi项目中 在生产环境中 进不去swagger

builder.WebHost.UseUrls 是 ASP.NET Core 中配置应用程序监听 URL 或端口的方法。通过使用这个方法&#xff0c;你可以指定应用程序应该在哪些 URL 上运行&#xff0c;以便接收 HTTP 请求。 1.在appsetting.json中 添加 "LaunchUrl": "http://*:327"2.在…...

逆向攻防世界CTF系列63-secret-string-400

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

Datawhale AI 冬令营学习笔记-零编程基础制作井字棋小游戏

井字棋小游戏是通过豆包MarsCode实现的&#xff0c;没有改动任何的代码&#xff0c;全部是通过对话让AI进行优化和改进。 开始进入正题&#xff1a;进入豆包MarsCode在线IDE&#xff0c;直接点击上方蓝字&#xff0c;或复制链接打开: 豆包 MarsCode - 编程助手。 IDE界面&…...

分布式专题(10)之ShardingSphere分库分表实战指南

一、ShardingSphere产品介绍 Apache ShardingSphere 是一款分布式的数据库生态系统&#xff0c; 可以将任意数据库转换为分布式数据库&#xff0c;并通过数据分片、弹性伸缩、加密等能力对原有数据库进行增强。Apache ShardingSphere 设计哲学为 Database Plus&#xff0c;旨在…...

clickhouse解决suspiciously many的异常

1. 问题背景 clickhouse安装在虚拟机上&#xff0c;持续写入日志时&#xff0c;突然关机&#xff0c;然后重启&#xff0c;会出现clickhouse可以正常启动&#xff0c;但是查询sql语句&#xff0c;提示suspiciously many异常&#xff0c;如图所示 2. 问题修复 touch /data/cl…...

计算机的错误计算(一百九十)

摘要 用两个大模型计算cot(1.234). 其中&#xff0c;1.234是以弧度为单位的角度。结果保留10位有效数字。实验表明&#xff0c;两个的计算公式虽然不同&#xff0c;但是都是正确的。然而&#xff0c;数值计算则是有问题的---包括每一个中间运算与结果。 例1. 计算cot(1.234)…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

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语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

rm视觉学习1-自瞄部分

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