7、混合开发

文章目录

框架简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

视频介绍

这里有一个简单的3讲合计60分钟的介绍视频，方便你快速了解uni-app的主要特征

框架特点

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

数量多

• 几十万应用、uni统计月活6.5亿、70+微信/qq群、更高的百度指数。
• 跨端完善度更高，真正落地的提高生产力

平台能力

• 在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。
• 支持原生代码混写和原生sdk集成。

性能优秀

• 体验更好的Hybrid框架，加载新页面速度更快。
• App端支持weex原生渲染，可支撑更流畅的用户体验。
• 小程序端的性能优于市场其他框架。

生态丰富

• 插件市场数千款插件。
• 支持NPM、支持小程序组件和SDK、兼容mpvue组件和项目、兼容weex组件。
• 微信生态的各种sdk可直接用于跨平台App。

学习成本

• 基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。

开发成本

• 不止开发成本，招聘、管理、测试各方面成本都大幅下降。
• HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍（即便只开发一个平台）。

功能架构

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。

跨平台样例

uni-app实现了一套代码，同时运行到多个平台；如下图所示，一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）：

实际运行效果如下（点击图片可放大）：

项目模板

通过本模板快速上手lcpapp开发平台

开发工具

以下工具都可以从公司内部ftp上获取

• HBuilderX 2.6+
• 微信web开发者工具 1.02.1911180+

版本管理

由于缺少类似java中的maven包管理工具，lcpapp暂时采用项目模板的方式对外提供平台支持。从svn上下载最新版本的项目开发模板

http://172.16.1.78:81/svn/06_源代码管理/S008_LCP平台/lcpapp/release/最新版本号/init

项目模板划分为如下两类

名称	说明
init	新建项目时使用。包含完整目录结构
update	项目更新时使用。仅包含lcpapp核心组件

模板结构

使用HBuilderX工具打开解压后的模板。目录结构说明如下。对于未标识项目修改的，原则上不要去修改。每当lcpapp版本升级时，直接获取最新update类型模板直接覆盖即可。减少项目升级成本。

文件路径	说明	update包含
component		uniapp官方扩展UI组件
lcpapp		lcp提供的平台组件
├─	ajax.js	ajax请求组件
├─	apollo.js	apollo访问组件
├─	lcpapp.css	lcpapp平台样式
├─	uni.css	uni官方样式
├─	uni.ttf	字体图标
├─	version.js	版本管理组件
pages		访问页面目录
├─	about/about.vue	关于页面
profiles		系统配置目录
├─	dev/config/application-local.js	dev环境开发调试配置文件
├─	dev/app.js	dev环境apollo服务器连接配置
├─	sit/app.js	sit环境apollo服务器连接配置
├─	uat/app.js	uat环境apollo服务器连接配置
├─	prod/app.js	prod环境apollo服务器连接配置
├─	env.js	环境选择配置
static		静态资源存放目录
├─	about.png，aboutHL.png	tab页关于页签图标
├─	icon.png	应用桌面图标
├─	start32.9.png	竖横比在3:2且符合9.png规范的应用启动页图片
├─	start169.9.png	竖横比在16:9且符合9.png规范的应用启动页图片
App.vue		应用入口页面
custom.js		自定义全局实例变量
main.js		应用启动入口文件
manifest.json		应用配置文件
pages.json		应用界面配置
uni.scss		常用样式变量

apollo配置

应用的首次启动必须连接apollo下载配置。需要提前申请apollo项目配置的restful访问权限

创建账号

登录apollo后，打开【管理员工具】->【开放平台授权管理】菜单，在【创建第三方应用】里，输入各个信息。最后点击创建。各个信息说明如下：

属性	描述
第三方应用ID	访问apollo的应用Id。建议与目标赋权app同名。例如card，wms等
第三方应用名称	访问apollo的应用名称。建议与目标赋权app同名。如一卡通，仓储等
项目负责人	选择Apollo
部门	选择信息技术部(A15)