Skip to main content

moregeek program

用uni-app开发移动应用_雪飘七月的博客-多极客编程

一、概述

​uni-app​ 是一个使用 ​Vue.js (opens new window)​开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。

一套代码,多个平台的特性决定了这个框架有利于提高团队开发效率,降低人工成本。

但是,这套框架也并非适合所有的应用场景,比如应用中有较多原生代码时这套框架就不是很适合。所以开发前的架构设计还是要根据实际业务需求来定。

uni-app官网​​​​

二、环境配置

uni-app的开发调试打包都离不开自有的IDE:HBuilderX。HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。官方IDE下载地址

安装好HBuilderX,我们可以文件->新建->1项目跳出以下界面。我们用HBuilder就是用来开发uni-app的,uni-app(U)中有许多示例工程,很多都是来自插件市场,插件市场中的一些是需要收费的,比如下面的电商模板:

用uni-app开发移动应用_uni-app

用uni-app开发移动应用_uni-app_02

需要付费的插件试用是免费的,同时有有效期限制。如果正式商用是需要付费购买的。

用uni-app开发移动应用_跨平台_03

HBuilder有很多功能需要登录后才能使用,介意平时就登录状态开发。

用uni-app开发移动应用_Android_04

此账号为DCloud开发者中心的账号,要先到DCloud开发者中心注册好账号。在Hbuilder中新建的应用会在这边有列表,可以管理。

用uni-app开发移动应用_移动开发_05


三、工程实践

1、工程概述

我们以新建的默认uni-app工程为例,首先这个manifest.json很重要。其中的uni-app应用标识(AppID)尤其重要,我们如果离线打包Android的时候会需要在Android工程中配置。

用uni-app开发移动应用_跨平台_06

上图中的pages.json用来配置菜单,配置后实际界面如下:

用uni-app开发移动应用_跨平台_07

uni-app主要是针对app进行开发,但是也可以部署为web服务直接在个人电脑端网页使用:

用uni-app开发移动应用_Android_08

2、工程打包
1)Android打包

这个工程就是个二级菜单的管理系统,业务不做详细介绍,下面介绍下打包成Android App和web工程的方式。

App离线SDK下载:​​最新android平台SDK下载​

SDK目录如下

|-- HBuilder-Hello                App离线打包演示应用
|-- HBuilder-Integrate-AS 集成uni-app的最简示例
|-- SDK SDK库文件目录
|-- Feature-Android.xls Android平台各扩展Feature API对应的详细配置
|-- Readme.txt 版本说明文件及注意事项
|-- UniPlugin-Hello-AS uni原生插件开发示例

创建Android 工程UniApp

将lib.5plus.base-release.aar、android-gif-drawable-release@1.2.23.aar、uniapp-v8-release.aar、oaid_sdk_1.0.25.aar和breakpad-build-release.aar拷贝到libs目录下

build.gradle中添加资源引用

implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation fileTree(include: ['*.aar'], dir: 'libs')
implementation 'androidx.appcompat:appcompat:1.0.0'
implementation 'androidx.legacy:legacy-support-v4:1.0.0'
implementation 'androidx.recyclerview:recyclerview:1.0.0'
implementation 'com.facebook.fresco:fresco:2.5.0'
implementation "com.facebook.fresco:animated-gif:2.5.0"
implementation 'com.github.bumptech.glide:glide:4.9.0'
implementation 'com.alibaba:fastjson:1.1.46.android'

uni-app配置时需要在build.gradle中添加aaptOptions配置

aaptOptions {  
additionalParameters '--auto-add-overlay'
ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"
}

打开Androidmanifest.xml配置Appkey

<application
...>
<meta-data
android:name="dcloud_appkey"
android:value="替换为自己申请的Appkey" />

回到Hbuilder打包App资源如下图:

用uni-app开发移动应用_uni-app_09

如上图操作后会生成打包文件在下图位置/unpackage/resources/_UNI_XXXX(appId)/www/*:

用uni-app开发移动应用_移动开发_10

Android Studio新建工程如下,将_UNI_XXXX(appId)/www/路径下的文件全部拷贝到assets/app目录下

用uni-app开发移动应用_Android_11

创建data文件夹并拷贝资源,将SDK->assets->data文件夹拷贝到刚刚创建的assets文件夹下,修改dcould_control.xml中的appid:

用uni-app开发移动应用_跨平台_12

到此就可以打包正常运行Android app了。

2)web工程打包

发行->网站-H5手机版,打包后生成资源文件/Uni-app/unpackage/dist/build/h5

用uni-app开发移动应用_uni-app_13

将h5目录下文件拷贝到springboot工程中的静态文件路径就能访问到了。

用uni-app开发移动应用_Android_14

四、总结

uni-app总的来说开发app很方便,提高了开发效率,降低了学习难度。很适合在需要多平台应用的情况下来使用。但是在涉及到原生接口方面还是会比较麻烦的,虽然uni-app也提供了自定义原生插件的方式。

一般来说是初创团队在早期需要在多平台上需要快速实现产品时可以使用。等到了中后期有一定时间精力资金了还是会转向原生。


©著作权归作者所有:来自51CTO博客作者雪飘七月的原创作品,请联系作者获取转载授权,否则将追究法律责任

yyeva动效播放器--动态元素完美呈现新方案_百度geek说的博客-多极客编程

作者 | 龙卷风导读:伴随着计算机视觉领域的发展,动画也变得越来越炫酷。各种动效解决方案在画质提升时,也要兼顾文件体积和性能。透明MP4方案,能让设计师制作动画所见即所得,充分发挥了设计师的想象力和创造力。百度YYEVA动效播放器是基于透明MP4的基础,自研的一套轻量级、高性能、跨平台的动效方案,支持插入动态元素,提供完善的工具链,一站式解决从设计侧的资源导出、在线预览,到客户端渲染SDK。全文3

最流行的布局方案 flex 弹性盒布局详解_qq6310682252356的博客-多极客编程

Flex布局又称弹性盒布局,是在CSS3中的一种新布局方式,可以简洁、方便、响应式地实现各种页面布局,因此自一提出受到了极大地追捧,目前也得到了各大主流浏览器的支持,因此迅速替代了之前的“display+float+position”的布局形式。弹性盒布局简介弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为fle

中心化决议管理——云端分析_字节跳动终端技术的博客-多极客编程

作者:钱佳卫,研发工程师,产品研发和工程架构部-Client Infrastructure-App Infra-DevOps-Developer Tools 前言 CocoaPods 云端分析能力是字节跳动的终端技术团队(Client Infrastructure) 下 Developer Tools 部门提供的一系列云化基础设施之一, Developer Tools 团队致力于建设下一代移动

xcode打包导出ipa_wx62d4c604e4fd0的博客-多极客编程

众所周知,在开发苹果应用时需要使用签名(证书)才能进行打包安装苹果IPA,作为刚接触ios开发的同学,只是学习ios app开发内测,并没有上架appstore需求,对于苹果开发者账号认证需要支付688,真的是极大的浪费,使用appuploader,只需要注册苹果普通的账号,不需要688认证,就可以打包自己开发的ios应用,自己真机测试,下面是详细教程: 第一步:注册苹果开发者账号 访问以下网址,

[ios研习记]聊聊ios中的mach-o_11633026的博客-多极客编程

[iOS研习记]聊聊iOS中的Mach-O 一 关于Mach-O Mach-O的全称为Mach Object,是OS X与iOS上的一种可执行文件格式。Mach本身指一种操作系统的微内核标准,被用于OS X与iOS系统的内核中。相信对于移动端的iOS开发者来说,对Mach-O文件一定不陌生,我们编译打包的iOS IPA文件,内部其实就有一个可执行的Mach-O文件,我们开发的framework和.

关于dart的一些知识点_亦可追寻的博客-多极客编程

$符号 Dart 中可以在字符串通过$variableName或 ${expression} 语法插入变量,类似shell脚本 例如 var s = "hello"; print('${s}, world!'); //可以简化成: print('$s, world!'); //调用方法 print('${s.toUpperCase()}, world!'); ==可以直接用来比较字符串 Dart

outlook更改ost数据文件存储位置_吴明课堂的博客-多极客编程

一. 修改注册表打开注册表,找到以下目录:计算机\HKEY_CURRENT_USER\Software\Microsoft\Office\16.0\Outlook在outlook这一层文件夹上右键,选择 新建—>字符串值,将新建的字符串名称改为:ForceOSTPath,并将值设置为你想存放ost文件的位置。如下图所示:在outlook上新建字符串ForceOSTPath并设置对应的路径这一

laravel 安装jwt_没有鸡汤,只为生活的博客-多极客编程

1.安装 jwt-auth composer require tymon/jwt-auth:dev-develop参考文档:Installation · tymondesigns/jwt-auth Wiki · GitHub2.在 config/app.php 的 providers 配置项中注册服务提供者'providers' => [ 、、、 Tymon\JWTAu

基础知识(5) --matlab中特殊符号使用总结_domi+1的博客-多极客编程

前言:上篇文章分享了Matlab经常会遇到(),[],与{}三种符号,下面接着捋一捋其他的特殊符号使用方法,主要有:冒号'分号&   &&与|      || 或~非.点1、:冒号冒号的主要用途是用来表示数据从开始位置取到/生成到截止位置,例如:>> x = 1:4 % 生成1到4的数据x = 1 2 3 4>> x

如何在容器中进行抓包?_mb6242cc9db1000的博客-多极客编程

nsenter 命令是一个可以在指定进程的命令空间下运行指定程序的命令。它位于 util-linux 包中。用途一个最典型的用途就是进入容器的网络命令空间。相当多的容器为了轻量级,是不包含较为基础的命令的,比如说​​ip address​​,​​ping​​,​​telnet​​,​​ss​​,​​tcpdump​​等等命令,这就给调试容器网络带来相当大的困扰:只能通过 ​​docker insp

autodesk inventor 2023软件安装包和安装教程_乐乐软件管家的博客-多极客编程

Autodesk Inventor 2023软件简介:Autodesk Inventor 2023是AutoCAD 用户的最佳选择。它不仅进入了三维设计,而且不会增加在二维设计数据和AutoCAD 专业技术上的附加投资。作为AutoCAD软件的开发者,Autodesk了解设计过程,并且研发出系列软件,使得进入三维设计更加简便。Inventor为设计者提供了一个自由的环境,使得二维设计能够顺畅地转入

dubbo 泛化调用在vivo统一配置系统的应用_vivo互联网技术的博客-多极客编程

作者:vivo 互联网服务器团队- Wang Fei、LinYupanDubbo泛化调用特性可以在不依赖服务接口API包的场景中发起远程调用, 这种特性特别适合框架集成和网关类应用开发。本文结合在实际开发过程中所遇到的需要远程调用多个三方系统的问题,阐述了如何利用Dubbo泛化调用来简化开发降低系统耦合性的项目实践,最后对Dubbo泛化调用的原理进行了深度解析。一、背景统一配置平台是一个提供终端设