uniapp

什么是 uniapp

UniApp 是一种基于 Vue.js 的跨平台开发框架,可以用于同时开发 iOS、Android 和 Web 应用。它具有简单易用、高效快速开发、跨平台兼容性强等优势,适用于各种应用场景,如移动应用、小程序、H5 等。

大部分和 平时开发 vue 一样,vuex,vue-router 全家桶

安装流程

安装 node

HbuilderX 里内置了 node 会和外置的版本不一致

cd  /Applications/HBuilderX.app/Contents/HBuilderX/plugins/node
mv node node-v8
## 软连接
ln -s /opt/homebrew/bin/node /Applications/HBuilderX.app/Contents/HBuilderX/plugins/node/node

uniapp 有什么难点

  • 需要会 Vue
  • 不同平台之间仍然存在一些差异。某些高级功能可能在某些平台上不可用或表现不一致,需要开发者做适配处理。
  • 由于 UniApp 是通过编译为原生代码来实现跨平台运行的,因此性能方面可能存在一些挑战。在处理性能敏感的场景时,需要开发者进行性能优化,如合理使用异步操作、减少重绘和重排等。
  • 在调试过程中可能会遇到平台差异导致的问题。开发者需要使用不同的调试工具和技巧来解决问题。
  • UniApp 对于一些特定的第三方插件可能支持不完善或存在兼容性问题。在使用第三方插件时需要仔细测试和验证。

打包和发布

在 UniApp 中,我们可以通过以下步骤来完成打包和发布。

A. 配置打包参数
在 UniApp 中,我们可以在manifest.json文件中配置打包参数。这些参数包括应用的名称、图标、权限、启动页等。通过配置这些参数,我们可以自定义应用的外观和功能。

下面是一个示例的manifest.json文件的配置:

{
	"name": "My App",
	"appid": "com.example.myapp",
	"versionName": "1.0.0",
	"versionCode": "1",
	"icon": "/static/logo.png",
	"permission": {
		"scope.userLocation": {
			"desc": "获取用户位置信息"
		}
	},
	"splashscreen": {
		"image": "/static/splash.png",
		"backgroundColor": "#ffffff"
	}
}

B. 生成不同平台的应用包
在 UniApp 中,我们可以通过 HBuilderX 来生成不同平台的应用包。HBuilderX 是 UniApp 的集成开发环境,提供了打包和发布的功能。

首先,我们需要在 HBuilderX 中打开我们的 UniApp 项目。然后,选择对应的平台,如 iOS、Android 或 Web。根据平台的要求,进行相应的配置,如签名、应用图标等。

接下来,我们可以选择打包方式,如打包成应用安装包、打包成小程序等。根据需求选择相应的打包方式,并进行相关的配置。

最后,点击打包按钮,HBuilderX 将自动进行打包操作,并生成相应的应用包。

C. 发布应用到应用商店或 Web
当我们生成应用包后,就可以将应用发布到相应的平台。对于 iOS 和 Android 应用,我们可以将应用包提交到 App Store 和 Google Play 等应用商店。这需要进行一些额外的配置和审核过程。

对于 Web 应用,我们可以将生成的应用包部署到 Web 服务器上,通过 URL 访问应用。可以将应用部署到自己的服务器上,或者使用云服务提供商提供的服务。

uniapp 原理