uniapp开发（由浅到深）

news2025/1/15 6:20:47

文章目录

    • 1. 项目构建
      • 1.1 脚手架构建
      • 1.2 HBuilderX创建 uni-app项目步骤：
    • 2 . 包依赖
      • 2.1 uView
      • 2.2 使用uni原生ui插件
      • 2.3 uni-modules
      • 2.4 vuex使用
    • 3.跨平台兼容
      • 3.1 条件编译
    • 4.API 使用
      • 4.1 正逆参数传递
    • 5. 接口封装
    • 6. 多端打包
      • 3.1 微信小程序
      • 3.2 打包App
        • 3.2.1 自有证书-申请
        • 3.2.3 离线打包配置

在这里插入图片描述

1. 项目构建

1.1 脚手架构建

  • 全局安装脚手架
  • npm install -g @vue/cli@4 （切记安装4.x.x的版本）
  • 创建项目

vue create -p dcloudio/uni-preset-vue my-project

  • 默认模板在这里插入图片描述
  • 执行命令参考 package.json

1.2 HBuilderX创建 uni-app项目步骤：

  • 点工具栏里的文件 -> 新建 -> 项目
    在这里插入图片描述

2 . 包依赖

2.1 uView

  1. 安装依赖 (注意：项目名称不能有中文字符)
   // 安装sass
   npm i sass -D
   
   // 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
   npm i sass-loader@10 -D
   
   // 安装uview-ui
   npm install uview-ui@2.0.31
  1. 全局引入uview js库main.js
   import uView from "uview-ui";
   Vue.use(uView);
  1. 全局引入uView的全局SCSS主题文件
   /* uni.scss */
   @import 'uview-ui/theme.scss';
  1. 全局引入uview 基础样式
   // 在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
   <style lang="scss">
   	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
   	@import "uview-ui/index.scss";
   </style>
  1. 配置easycom模式引入uview组件
   // pages.json
   {
   	"easycom": {
   		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
   	},
   	// 此为本身已有的内容
   	"pages": [
   		// ......
   	]
   }
  1. 配置vue.config.js文件
   // vue.config.js，如没有此文件则手动创建 放入项目根目录下
   module.exports = {
       transpileDependencies: ['uview-ui']
   }
  1. 使用uview组件
   <u-button type="primary" :disabled="disabled" text="禁用"></u-button>
   <u-button type="primary" loading loadingText="加载中"></u-button>
   <u-button type="primary" icon="map" text="图标按钮"></u-button>
   <u-button type="primary" shape="circle" text="按钮形状"></u-button>
   <u-button type="primary" size="small" text="大小尺寸"></u-button>

  1. 文档参考与bug处理

    官方文档配置参考
    实例项目参考
    注意点 ：cnpm 安装会出现包配置错误

2.2 使用uni原生ui插件

  • 安装sass 及 sass-loader
npm i sass -D
npm i sass-loader@10.1.1 -D
  • 安装uni-ui
npm install @dcloudio/uni-ui
  • 使用
<script>
   import  {uniBadge}  from  '@dcloudio/uni-ui'
   export default  {
				components:   {uniBadge}
   }
</script>

2.3 uni-modules

  • 通过 uni_modules（插件模块化规范）单独安装组件，或通过 uni_modules 按需安装某个组件

在这里插入图片描述

  • node_modules与uni_modules区别
    *
  • 具体引入参考

2.4 vuex使用

  • vuex是基于vue框架的一个状态管理库。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。核心概念 State、Getter、Mutation、Action、Module。
    在这里插入图片描述
  • 安装
npm install vuex --save 先安装依赖
  • 新建 store/index.js
// 导入 vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 以插件形式使用 vuex
Vue.use(Vuex)

// Vuex.Store 构造器选项
const store = new Vuex.Store({
  state: {
    username: 'foo',
    age: 18,
  },
})

export default store
  • main.js 引入
import store from './store';
Vue.config.productionTip = false
Vue.use(uView);
App.mpType = 'app'

const app = new Vue({
  // 把 store 的实例注入所有的子组件
  store,
  ...App
})
app.$mount()
  • 具体使用说明参考 vuex

3.跨平台兼容

3.1 条件编译

  • 不同的平台展示不同特性与功能
  • 条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
  • 官网配置参考

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称
在这里插入图片描述

  • uni.getSystemInfo 区分Android 和iOS
<template>
	<!-- 条件编译支持样式，支持js与Ui -->
	<view class="content">
		<!-- #ifdef H5 -->
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<!-- 条件编译 -->
		<!-- #endif -->
		<!-- APP-PLUS有 多端用或|| -->
		<!-- #ifndef APP-PLUS || H5 -->
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			// 方法里面也一样使用
			// #ifdef APP-PLUS 
			// #endif
		switch(uni.getSystemInfoSync().platform){
   case 'android' :
  		console.log('运行在Android上')
  		break;
  case 'ios' :
  		console.log('运行在IOS上')
  		break;
  default :
  		console.log('运行在开发者工具上')
  		break;
  		}	  		

		},
	}
</script>

4.API 使用

4.1 正逆参数传递

  • index.vue
<template>
	<view class="content">
		<navigator url="/pages/home/home?name=admin">跳转</navigator>
		<button @click="hyChange()">事件跳转</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		methods: {
			hyChange() {
				uni.navigateTo({
					url: '/pages/home/home?name=admin&psd=12346678',
					// 触发这个事件成功时的传递参数
					success(res) {
						res.eventChannel.emit('hyPageHome', {
							data: '触发成功跳转传递的事件'
						})
					},
					events: {
						backEvent(data) {
							console.log('逆序参数', data);
						}
					}
				})
			}
		}
	}
</script>

<style>
</style>
  • home.vue
<template>
	<view>
		<button type="default">home</button>
		<button type="warn" size="mini" @click="hyIndex">逆向传递</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		// 正向传参
		onLoad(options) {
			console.log('@参数', options);
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('hyPageHome', res => {
				console.log(res);
			})
		},

		methods: {
			// 逆向传参
			hyIndex() {
				uni.navigateBack()
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('backEvent', {
					name: 'admin',
					pad: 'password'
				})
			}
		}
	}
</script>

<style>

</style>

5. 接口封装

  • 参考

6. 多端打包

3.1 微信小程序

3.2 打包App

3.2.1 自有证书-申请

  1. 下载安装jre并配置环境变量 （这里不做配置）
bin\jlink.exe --module-path jmods --add-modules java.desktop --output jre
  1. 使用keytool -genkey命令生成证书

estalias 是后面在hbuilder上要填的 证书别名
test.keystore 是后面在hbuilder上要填的 证书文件
自己输入的密钥库口令 是后面在hbuilder上要填的 证书私钥密码 (比如123456)

在这里插入图片描述
3. 查看证书

keytool -list -v -keystore test.keystore
  1. 配置 注意导入的证书文件是test.keystore

3.2.3 离线打包配置

参考官网离线打包配置

参考文章
christian-dong作者写的uniapp 项目实践
Zhou_慧写的接口封装

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/869616.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

IO密集型服务提升性能的三种方法

IO密集型服务提升性能的三种方法

文章目录 批处理缓存多线程总结 大部分的业务系统其实都是IO密集型的系统&#xff0c;比如像我们面向B端提供摄像头服务&#xff0c;很多的接口其实就是将各种各样的数据汇总起来&#xff0c;展示给用户&#xff0c;我们的数据来源包括Redis、Mysql、Hbase、以及依赖的一些服务…
阅读更多...
Linux查看GPU显卡/CPU内存/硬盘信息

Linux查看GPU显卡/CPU内存/硬盘信息

显卡信息命令/CPU内存/硬盘 1.显卡2、CPU内存3、硬盘 1.显卡 nvidia-smi nvidia-smi&#xff08;显示一次当前GPU占用情况&#xff09; nvidia-smi -l&#xff08;每秒刷新一次并显示&#xff09; watch -n 5 nvidia-smi &#xff08;其中&#xff0c;5表示每隔6秒刷新一次终端…
阅读更多...
java下载JDK

java下载JDK

1.去官网下载 https://www.oracle.com/java/technologies/javase-downloads.html 2.点击 傻瓜式安装 注意选择版本跟电脑系统就行 下载后文件的作用
阅读更多...
7.8 SpringBoot事务@Transactional实战 管理员借阅审核

7.8 SpringBoot事务@Transactional实战 管理员借阅审核

文章目录 前言一、事务是用来干什么的&#xff1f;事务是用来解决什么问题的?二、事务执行的流程三、事务的ACID四大特性四、事务的四种隔离级别五、声明式事务Transactional六、web层实战七、service层实战7.1 BookBorrowService7.2 细数BookBorrowServiceImpl实战细节7.2.1 …
阅读更多...
【Linux命令详解 | chmod命令】 chmod命令用于修改文件或目录的权限，保护文件安全性。

【Linux命令详解 | chmod命令】 chmod命令用于修改文件或目录的权限，保护文件安全性。

文章目录 简介一&#xff0c;参数列表二&#xff0c;使用介绍1. 修改用户权限2. 修改用户组权限3. 修改其他用户权限4. 同时修改多个权限5. 使用数字模式设置权限6. 递归修改目录权限 总结 简介 在Ubuntu系统中&#xff0c;chmod命令是一个强大的工具&#xff0c;用于修改文件…
阅读更多...
数据库技术--数据库引擎，数据访问接口及其关系详解（附加形象的比喻）

数据库技术--数据库引擎，数据访问接口及其关系详解（附加形象的比喻）

目录 背景数据库引擎Jet数据库&#xff1a;ISAM&#xff1a;ODBC&#xff08;Open Database Connectivity&#xff09;&#xff1a; 数据访问接口ADO&#xff08;ActiveX Data Objects&#xff09;DAO&#xff08;Data Access Objects&#xff09;RDO&#xff08;Remote Data O…
阅读更多...
美团视觉GPU推理服务部署架构优化实战

美团视觉GPU推理服务部署架构优化实战

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
由于找不到vcruntime140.dll,无法继续执行代码，有什么修复方法比较推荐

由于找不到vcruntime140.dll,无法继续执行代码，有什么修复方法比较推荐

首先我们在解决vcruntime140.dll问题前&#xff0c;先了解一下vcruntime140.dll是什么&#xff0c;它有什么用途跟作用。 vcruntime140.dll是Microsoft 安装程序的一部分&#xff0c;它是Windows操作系统中的一个动态链接库文件。该文件包含了一些常用的运行时函数和变量&…
阅读更多...
Leetcode-每日一题【剑指 Offer 24. 反转链表】

Leetcode-每日一题【剑指 Offer 24. 反转链表】

题目 定义一个函数&#xff0c;输入一个链表的头节点&#xff0c;反转该链表并输出反转后链表的头节点。 示例: 输入: 1->2->3->4->5->NULL输出: 5->4->3->2->1->NULL 限制&#xff1a; 0 < 节点个数 < 5000 解题思路 1.题目要求我们反转…
阅读更多...
[NOIP2003 普及组] 栈

[NOIP2003 普及组] 栈

题目背景 栈是计算机中经典的数据结构&#xff0c;简单的说&#xff0c;栈就是限制在一端进行插入删除操作的线性表。 栈有两种最重要的操作&#xff0c;即 pop&#xff08;从栈顶弹出一个元素&#xff09;和 push&#xff08;将一个元素进栈&#xff09;。 栈的重要性不言自…
阅读更多...
【佳佳怪文献分享】MVFusion： 利用语义对齐的多视角 3D 物体检测雷达和相机融合

【佳佳怪文献分享】MVFusion： 利用语义对齐的多视角 3D 物体检测雷达和相机融合

标题&#xff1a;MVFusion: Multi-View 3D Object Detection with Semantic-aligned Radar and Camera Fusion 作者&#xff1a;Zizhang Wu , Guilian Chen , Yuanzhu Gan , Lei Wang , Jian Pu 来源&#xff1a;2023 IEEE International Conference on Robotics and Automat…
阅读更多...
c语言——斐波那契数列应用

c语言——斐波那契数列应用

//斐波那契数列应用 #include<stdio.h> int main() {int i,n,t10,t21,nextTerm;printf("输出项目数&#xff1a;");scanf("%d",&n);printf("斐波那契数列应用&#xff1a;");for(i1;i<n;i){printf("%d、",t1);nextTermt1…
阅读更多...
「C/C++」C/C++搭建程序框架

「C/C++」C/C++搭建程序框架

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「UG/NX」NX二次开发「UG/NX」BlockUI集合「VS」Visual Studio「QT」QT5程序设计「C/C」C/C程序设计「Win」Windows程序设计「DSA」数据结构与算法「File」数据文件格式 目录 术语介绍…
阅读更多...
【javaweb】学习日记Day1 - HTML CSS入门

【javaweb】学习日记Day1 - HTML CSS入门

目录 一、图片标签 ① 绝对路径 1.绝对磁盘路径 2.绝对网络路径 ② 相对路径 &#xff08;推荐&#xff09; 二、标题标签 三、水平线标签 四、标题样式 1、CSS引入样式 ① 行内样式 ② 内嵌样式 ③ 外嵌样式 2、CSS选择器 ① 元素选择器 ② id选择器 ③…
阅读更多...
74HC595驱动7x11点阵屏（LED-7X11-JHM）DEMO

74HC595驱动7x11点阵屏（LED-7X11-JHM）DEMO

起因 由于我之前做了一个点阵时钟 &#xff0c;但是无奈LED点阵屏价格比较贵&#xff0c;所以想找一个价格较为便宜的点阵来做便宜一点的点阵方案&#xff0c;再淘宝上看到有那种五毛钱一个的7x11的LED点阵&#xff0c;所以就想着试试搞一下这种点阵屏&#xff0c;这个由于是7…
阅读更多...
Ajax 笔记（一）—— Ajax 入门

Ajax 笔记（一）—— Ajax 入门

笔记目录 1. Ajax 入门1.1 Ajax 概念1.2 axios 使用1.2.1 URL1.2.2 URL 查询参数1.2.3 小案例-查询地区列表1.2.4 常用请求方法和数据提交1.2.5 错误处理 1.3 HTTP 协议1.3.1 请求报文1.3.2 响应报文 1.4 接口文档1.5 案例1.5.1 用户登录&#xff08;主要业务&#xff09;1.5.2…
阅读更多...
SpringBoot案例-部门管理-根据id查询

SpringBoot案例-部门管理-根据id查询

目录 根据页面原型&#xff0c;明确需求 查看接口文档 思路分析 接口功能实现 控制层&#xff08;Controller类&#xff09; 业务层&#xff08;Service类&#xff09; 业务类 业务实现类 持久层&#xff08;Mapper类&#xff09; 接口测试 前后端联调 根据页面原型&…
阅读更多...
JlinkV8 - 8步修复Jlink固件

JlinkV8 - 8步修复Jlink固件

现象 用着用着Jlink设备可以检测到&#xff0c;但是MDK检测不到设备序列号&#xff0c;换一个Jlink即可正常识别与烧录&#xff0c;很大概率是Jlink固件丢了&#xff0c;我用的山寨版本&#xff0c;市面基本是山寨版本 解决办法 1、查看Jlink的芯片型号&#xff0c;比如我打开…
阅读更多...
练习第30天

练习第30天

选择 多线程可以提高CPU利用率 不能提高内存的利用率 A B A C A B A B C 编程 最难的问题最难的问题__牛客网 #include <iostream> #include <string> #include <unordered_map> using namespace std;//给个字符串翻译出来 // int main() {unordered_…
阅读更多...
怎么开通Tik Tok海外娱乐公会呢？

怎么开通Tik Tok海外娱乐公会呢？

TikTok作为全球知名的社交媒体平台&#xff0c;吸引了数亿用户的关注和参与。许多公司和个人渴望通过开通TikTok直播公会进入这一领域&#xff0c;以展示自己的创造力和吸引更多粉丝。然而&#xff0c;成为TikTok直播公会并非易事&#xff0c;需要满足一定的门槛和申请找cmxyci…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023