uni-app跨平台开发的基本运用

xumingfeng_

已于 2024-04-17 09:42:39 修改

阅读量1.3k

点赞数 25

文章标签： uni-app

于 2024-04-17 09:26:44 首次发布

本文链接：https://blog.csdn.net/xumingfeng_/article/details/137855576

版权

Uni-app是一个基于Vue.js的跨平台应用开发框架，它可以将同一套代码编译成多个平台的应用，包括iOS、Android、H5等。以下是Uni-app跨平台开发的基本运用步骤：

安装Uni-app：首先，确保你已经安装了Node.js环境。然后使用npm或yarn安装Uni-app脚手架工具：

npm install -g @vue/cli @vue/cli-init
vue init dcloudio/uni-template-simple my-project

创建项目：使用uni-app提供的模板创建一个新项目。你可以选择Simple模板（简单模板）或HBuilderX模板。
开发应用：在创建的项目中，你可以像开发Vue.js应用一样进行开发，使用Vue.js的语法和组件。
编写页面：在/src/pages目录下编写页面组件，每个页面组件包括一个.vue文件，用来描述页面的结构、样式和行为。
编写样式：使用CSS或者SCSS编写页面的样式。
配置路由：在/src/router目录下配置应用的路由信息，指定页面组件与URL的对应关系。
编写逻辑：在需要的地方编写JavaScript逻辑，处理页面的交互和数据请求等。
调试应用：使用HBuilderX或者uni-app提供的开发工具进行应用的调试，可以在模拟器或真机上进行调试。
编译发布：当应用开发完成后，可以使用uni-app提供的命令将应用编译成多个平台的应用，然后发布到各个应用商店。
持续维护：随着应用的使用，需要不断进行维护和更新，修复bug、添加新功能等。

uni-app 是一个使用 Vue.js 开发跨平台应用的框架，可以同时生成 iOS、Android、H5 等多个平台的应用。以下是一个简单的 uni-app 的基本代码示例：

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="changeMessage">点击我改变消息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, world!';
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

这是一个简单的 uni-app 页面，包含一个文本和一个按钮。点击按钮会改变文本的内容。这段代码包含了模板、脚本和样式，是一个完整的 uni-app 页面组件。

可以使用一套代码基于 Vue.js 编写应用程序，并在多个平台上运行，包括 iOS、Android、H5 等。下面是一些在 uni-app 中进行跨平台开发时常见的代码总结：

1.组件编写：编写通用的组件，在不同平台上都能正确显示和运行。例如：

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: 'Hello, uni-app!'
    }
  }
};
</script>

2.样式适配：使用 @media 查询和 uni-app 提供的 @import 语法进行样式适配，以确保在不同平台和设备上的显示效果一致。

/* 在 style 标签中 */
@import 'uni.css';
/* 在 App.vue 中 */
<style lang="scss">
/* 全局样式 */
@import '@/common/style/variables.scss'; /* 变量 */
@import '@/common/style/mixins.scss'; /* 混合 */
</style>

3. 条件编译：使用条件编译指令 #ifdef、#ifndef 和 #endif，根据不同平台或条件编译选项编译不同的代码块。

// 仅在 H5 平台下执行
#ifdef H5
console.log('This is H5 platform');
#endif

4.路由配置：使用 uni-app 提供的路由配置方式进行页面之间的跳转和传参。

// router.js
export default [
  {
    path: '/pages/index/index',
    name: 'Index',
    component: () => import('@/pages/index/index.vue')
  },
  // more routes...
];

5.调用原生能力：通过 uni-app 提供的 API 调用原生能力，如相机、地理位置、文件系统等。

uni.getLocation({
  success: function(res) {
    console.log('location', res);
  }
});

6.生命周期钩子函数：利用生命周期钩子函数进行初始化、数据请求、事件监听等操作。

export default {
  onLoad() {
    console.log('Page loaded');
  },
  // more lifecycle hooks...
};

7.打包部署：根据不同平台选择合适的打包部署方式，并进行相应的配置。

使用git在码云上托管代码：

菜单：工具→插件安装，安装Git插件
在HBX插件市场搜索easy-git插件，跳转浏览器插件页面后下载→导入即可
在要托管的项目上右键，第一次操作需要 easy-git:初始化存储库
在接下来的对话框中设置要创建的git仓库信息

项目托管流程如下：

1. ①处选择git面板
2. 右上角②处点击图标，Commit提交
3. 右下角③处Push才能推送到gitee，提交时需在文本框填写提交信息
点击Pull可从远程仓库拉取最新代码
1. 在git面板中点击fetch，可同步远程仓库信息
2. 若有变更，则Pull处会显示变更条目数量，点击则可同步到本地
导入远程仓库已有项目流程：
1. HBX文件选择Git克隆仓库
2. 在接下来的对话框中输入远程仓库信息
3. 点击开始克隆，完成后HBX会自动加载

1. 教学及考核项目托管要求
  1. 首先访问教师发布的远程仓库地址，并fork（右上角Fork图标）
  2. 确认项目fork到自己仓库列表，然后克隆该仓库（自己的仓库，非教师发布的仓库）
  3. 在本地完成项目任务，保证编译正确，即可提交并推送到远程
  4. 在gitee项目页面上及时查看教师的批阅结果

创建和初始化项目

创建项目，项目名blogs
1. 教师发布项目至码云
2. 各自fork教师发布的项目
3. 克隆远程仓库（本人仓库sulin非教师库）到本地
4. 在克隆的仓库中逐步完成教学项目并提交
添加3个页面
- 默认创建的index，作为主页，启动显示blogs列表
- profile页，用于显示个人信息
- charts页，用于显示个人数据的统计图表
在static中添加静态资源，主要是一些icons
在pages.json中修改全局外观配置，主要是标题栏文本和颜色>>>属性列表<<<
设置tabBar，在页面底部添加3个标签 >>>属性列表<<<
- 在pages.json中添加tabBar节点
- 设置color和selectedColor属性，设置图标及文本的不同状态颜色
- 设置list属性，tab页面数组，元素包括页面路由、文本、不同状态的图标路径
在manifest.json中修改应用名称为中文名，同时配置使用Vue2

tabBar适用于应用存在多个并列功能的情况，几个页面间不存在导航关系，可并列排放。

tabBar中的页面，最少2个，最多5个。

理解tabBar的生命周期与普通页面基本一致，但需注意的是切换tabBar时，除第一次执行onLoad外，再次切换触发onShow但不触发onLoad

在 uni-app 中使用差异

uni-app 在发布到H5时支持所有vue的语法；发布到App和小程序时，由于平台限制，无法实现全部vue语法，但 uni-app 仍是对vue语法支持度最高的跨端框架。

相比Web平台， Vue.js 在 uni-app 中使用差异主要集中在两个方面：

新增：uni-app 除了支持Vue实例的生命周期，还支持应用生命周期以及页面生命周期。
受限：相比web平台，在小程序和App端部分功能受限，具体见。
uni-app 完整支持 Vue 模板语法。
App端可以使用更多的vue特性

指令

指令是带有 v- 前缀的特殊属性。

指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的作用是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。

data 属性

data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

undefined	//正确用法，使用函数返回对象
	data() {
		return {
			title: 'Hello'
		}
	}

	//错误写法，会导致再次打开页面时，显示上次数据
	data: {
		title: 'Hello'
	}

	//错误写法，同样会导致多个组件实例对象数据相互影响
	const obj = {
		title: 'Hello'
	}
	data() {
		return {
			obj
		}
	}

xumingfeng_

关注

25
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
uni-app跨平台开发的基本运用

Uni-app是一个基于Vue.js的跨平台应用开发框架，它可以将同一套代码编译成多个平台的应用，包括iOS、Android、H5等。uni-app 是一个使用 Vue.js 开发跨平台应用的框架，可以同时生成 iOS、Android、H5 等多个平台的应用。：当应用开发完成后，可以使用uni-app提供的命令将应用编译成多个平台的应用，然后发布到各个应用商店。：在创建的项目中，你可以像开发Vue.js应用一样进行开发，使用Vue.js的语法和组件。：根据不同平台选择合适的打包部署方式，并进行相应的配置。
复制链接

扫一扫