uniapp开发（由浅到深）

文章目录

    • 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_慧写的接口封装

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

element-ui表格数据为空，图片占位提示

element-ui表格数据为空，图片占位提示

当表格的绑定数据为空时常需要显示暂无数据等字样&#xff0c;这时候就用到了empty-text <el-table:data"tableData"stripeborderempty-text"暂无数据"> 但&#xff0c;当数据为空&#xff0c;想用图片展示呢&#xff0c;如下图 方法一&#xff1a…
阅读更多...
前端学习---vue2--选项/数据--data-computed-watch-methods-props

前端学习---vue2--选项/数据--data-computed-watch-methods-props

写在前面&#xff1a; vue提供了很多数据相关的。 文章目录 data 动态绑定介绍使用使用数据 computed 计算属性介绍基础使用计算属性缓存 vs 方法完整使用 watch 监听属性介绍使用 methodspropspropsData data 动态绑定 介绍 简单的说就是进行双向绑定的区域。 vue实例的数…
阅读更多...
QT信号与槽的理解

QT信号与槽的理解

文章目录 信号与槽的理解 信号与槽的理解 信号就是事件&#xff0c;比如button被点击的事件&#xff0c;ComboBox选项改变的事件&#xff0c;都是信号槽就是对信号进行响应的函数&#xff0c;可以是任意自定义函数一个信号可以对应多个槽多个信号可以对应一个槽信号的参数不能…
阅读更多...
以mod_jk方式整合apache与tomcat（动静分离）

以mod_jk方式整合apache与tomcat（动静分离）

前言&#xff1a; 为什么要整合apache和tomcat apache对静态页面的处理能力强&#xff0c;而tomcat对静态页面的处理不如apache&#xff0c;整合后有以下好处 提升对静态文件的处理性能 利用 Web 服务器来做负载均衡以及容错 更完善地去升级应用程序 jk整合方式介绍&#…
阅读更多...
栈和队列详解(1)

栈和队列详解(1)

目录 一、什么是栈&#xff1f; 二、创建一个我们自己的栈 1.前置准备 1.1需要的三个文件 1.2结构体的创建和头文件的引用 2.接口的实现 2.1初始化栈结构体 2.2尾插(压栈) 2.3栈存放的元素个数和判断栈是否为空 2.4获取栈顶元素 2.5出栈 2.6摧毁栈 2.7测试接口 三、…
阅读更多...
Qt扫盲-QWidget理论使用总结

Qt扫盲-QWidget理论使用总结

QWidget理论使用总结 一、概述二、顶层 控件 和子 控件三、复合控件四、自定义控件和绘制五、大小提示和大小策略六、事件七、一组函数和属性八、QWidget样式表九、透明度和双缓冲十、创建半透明窗口 一、概述 widget 是用户界面的最小单位&#xff1a;它从window系统接收鼠标…
阅读更多...
scope,deep穿透的实际应用

scope,deep穿透的实际应用

一.父组件代码 <template><div id"app"><h1 class"box"><pageName> </pageName></h1></div> </template><script> import pageName from "../src/components/pageName.vue"; export de…
阅读更多...
threejs点击模型实现模型边缘高亮的选中效果--更改后提高帧率

threejs点击模型实现模型边缘高亮的选中效果--更改后提高帧率

先来个效果图 之前写的那个稍微有点问题&#xff0c;帧率只有30&#xff0c;参照官方代码修改后&#xff0c;帧率可以达到50了&#xff0c;在不全屏的状态下&#xff0c;帧率60 1.首先需要导入库 // 用于模型边缘高亮 import { EffectComposer } from "three/examples/js…
阅读更多...
基于 eclipse-temurin 镜像部署spring boot 应用

基于 eclipse-temurin 镜像部署spring boot 应用

基于 eclipse-temurin 镜像部署spring boot 应用 使用场景示例项目 使用场景 在CI流程中&#xff0c;一般都会集成 打包&#xff0c;构建镜像&#xff0c;分发&#xff0c;启动容器之类的流程&#xff1b; 这里提供一个示例&#xff0c;进攻参考 示例项目 项目结构如下 run…
阅读更多...
佛祖保佑，永不宕机，永无bug

佛祖保佑，永不宕机，永无bug

当我们的程序编译通过&#xff0c;能预防的bug也都预防了&#xff0c;其它的就只能交给天意了。当然请求佛祖的保佑也是必不可少的。 下面是一些常用的保佑图&#xff1a; 佛祖保佑图 ——————————————————————————————————————————…
阅读更多...
架构实践方法

架构实践方法

一、识别复杂度 将主要的复杂度问题列出来&#xff0c;然后根据业务、技术、团队等综合情况进行排序&#xff0c;优先解决当前面临的最主要的复杂度问题。对于按照复杂度优先级解决的方式&#xff0c;存在一个普遍的担忧&#xff1a;如果按照优先级来解决复杂度&#xff0c;可…
阅读更多...
基于人工智能的中医图像分类系统设计与实现

基于人工智能的中医图像分类系统设计与实现

华佗AI 《支持中医，永远传承古老文化》 本存储库包含一个针对中药的人工智能图像分类系统。该项目的目标是通过输入图像准确识别和分类各种中草药和成分。 个人授权许可证 版权所有 2023至2050特此授予任何获得华佗AI应用程序（以下简称“软件”）副本的人免费许可，可根据以…
阅读更多...
Java并发编程（四）线程同步 中 [AQS/Lock]

Java并发编程（四）线程同步 中 [AQS/Lock]

概述 Java中可以通过加锁&#xff0c;来保证多个线程访问某一个公共资源时&#xff0c;资源的访问安全性。Java提出了两种方式来加锁 第一种是我们上文提到的通过关键字synchronized加锁&#xff0c;synchronized底层托管给JVM执行的&#xff0c;并且在java 1.6 以后做了很多…
阅读更多...
第三章 图论 No.10无向图的双连通分量

第三章 图论 No.10无向图的双连通分量

文章目录 定义Tarjan求e-DCCTarjan求v-DCC395. 冗余路径1183. 电力396. 矿场搭建 定义 无向图有两种双连通分量 边双连通分量&#xff0c;e-DCC点双连通分量&#xff0c;v-DCC 桥&#xff1a;删除这条无向边后&#xff0c;图变得不连通&#xff0c;这条边被称为桥 边双连通分…
阅读更多...
Jenkins 修改默认管理员帐号

Jenkins 修改默认管理员帐号

1、新增一个新的超级管理员用户&#xff0c;并验证能正常登录 2、进入 Jenkins 用户管理目录&#xff1a; /data/software/jenkins/users 3、修改超级管理文件夹的名称为其他名称&#xff0c;如&#xff1a;mv admin_*** ifadm_*** 4、重启Jenkins容器
阅读更多...
「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」数据文件格式 目录 术语介绍…
阅读更多...
记录一下Java实体转json字段顺序问题

记录一下Java实体转json字段顺序问题

特殊需求&#xff0c;和C交互他们那边要求字段顺序要和他们定义的一致(批框架) 如下&#xff1a; Data public class UserDto {private String name;private Integer age;private String addr; }未转换前打印&#xff1a; 转换后打印&#xff1a; 可以看到转换为json顺序打印…
阅读更多...
029 - integer types 整数类型

029 - integer types 整数类型

MySQL支持SQL标准整数类型 INTEGER&#xff08;或INT&#xff09;和 SMALLINT。作为一个可扩展标准&#xff0c;MySQL也支持整数类型 TINYINT&#xff0c;MEDIUMINT和 BIGINT。下表显示了每种整数类型所需的存储空间和范围。 表11.1 MySQL支持的整数类型的必需存储和范围 类型…
阅读更多...
PLY模型格式详解【3D】

PLY模型格式详解【3D】

本文介绍PLY 多边形文件格式&#xff0c;这是一种用于存储被描述为多边形集合的图形对象。 PLY文件格式的目标是提供一种简单且易于实现但通用的格式足以适用于各种模型。 PLY有两种子格式&#xff1a;易于入门的 ASCII 表示形式和用于紧凑存储和快速保存和加载的二进制格式。 …
阅读更多...
案例14 Spring MVC文件上传案例

案例14 Spring MVC文件上传案例

基于Spring MVC实现文件上传&#xff1a; 使用commons-fileupload实现上传文件到本地目录。 实现上传文件到阿里云OSS和从阿里云OSS下载文件到本地。 1. 创建项目 选择Maven快速构建web项目&#xff0c;项目名称为case14-springmvc03。 ​ 2. 配置Maven依赖 <?xml ver…
阅读更多...
最新文章

Copyright @ 2022~2023