vue做混合式app_基于vue2.0开发混合app的思考

前言

工作中接到开发混合app的需求，以前没有接触过，做了一段时间调研，也写个几个项目，就过程中遇到的问题，谈谈想法。

调研阶段

经过一阵google搜索，大致了解了几种方案，按照类别可以分成以下几类：

类别

代表

native APP

react-native(jsx)、weex(vue)

hybrid APP

dcloud(mui、5+SDK)、ionic(angular、cordova)、webview加载SPA应用

web APP

浏览器加载SPA应用

注：并未考虑原生 APP。

各种方案的优缺点，网上有很多详细的文章，这里就不一一叙述了，大家可自行搜索。

实践阶段

1. React-Native

接下来就是一个一个的尝试，最早接触过React-Native开发，就先说说它。

React-Native提供了常用的组件，JSX语法，生态圈也比较繁荣，有很多插件。

坑也比较多：

前期对windows平台以及android平台支持不太友好，在此平台上搭建环境简直想哭，建议mac；

list组件存在性能问题，初入门的面对一大堆英文文档研究性能问题，还是有一点点勉强的；

打包要兼顾ios和android，需要一定的原生基础，但不多；

键盘遮挡问题；

navigator不是太好用；

2. Ionic

稍微尝试了下Ionic框架，简单理解就是，Ionic提供UI框架，angular作为mvvm渲染框架，cordova作为中间件，并负责打包。

Ionic的UI组件丰富，大大方便了前端的开发工作，但是UI设计严格要求的话，还是需要自己定制的。

3. Dcloud

dcloud提供了hbuilder开发工具，mui框架，以及5+sdk，致力于提高HTML5性能体验。

mui不仅提供的UI组件丰富，还提供了事件管理、网络请求等功能，真的是一应俱全，而且有相关的完整demo。

坑：

普遍反映社区不活跃，官方论坛回复也很慢。

对于熟悉mvvm模式的开发而言，不算好消息，dcloud采用的是类似jquery操作dom的方式

项目比较散乱，代码冗余，和目前流行的前端项目工程化还是有差距的

vue + mui 集成，相对比较困难，但是本人还是成功了。

客户端反映，集成复杂，权限问题严重。

4. weex

感觉还有待提高，对初学者很不友好。

从环境搭建，到建立项目工程，再到调试打包，没有一份合理的指导，入坑需谨慎。

坑：

weex-toolkit 升级后不再支持init命令

npm需要> 5.0

使用vue-router需要将项目改造成单页面，即修改webpack配置文件为单入口

vue-router需要设置默认值，否则会显示空白

navigator方式跳转在web端不行，需要使用playground调试

在自己编写的组件中使用v-for指令，playground中调试一直报错，Web正常。

flex-direction默认不是row

5. webview嵌套

前端工程可自行架构，但要注意和客户端商量好交互方式。

单页面和多页面都是可以的。

单页面有一些注意的地方，重定向最好不要用，replace比push更好用。

webview就相当于浏览器，如果从原生跳转到嵌套SPA页面，再跳转到原生，可以像浏览器一样正常逐级返回。

从原生跳转到SPA页面，首先要跳转到SPA项目的路由入口才能继续向下一级跳转。

vue做混合式app_基于vue2.0开发混合app的思考相关推荐

vue tree组件_基于 Vue2.0 和 HeyUI 组件库的中后端系统 HeyUI Admin
介绍 heyui-admin 是一个成熟的企业应用解决方案,基于 vue2.0 和 heyui 组件库的中后端系统. 功能 - Js - common / 通用 - ajax / 封装axios - ...
vue 仿二手交易app_项目vue2.0仿外卖APP（二）
vue-cli开启vue.js项目 Vue.js开发利器vue-cli,是vue的脚手架工具. 在工地上,脚手架是工人搭建好的架子,能够帮助工人们作业:在技术圈,脚手架就是来帮助我们编写好基础的代码的 ...
vue 仿二手交易app_项目vue2.0仿外卖APP（七）
ratings评价列表页实现在ratings.vue组件里开发首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: ...
Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
基于vue2.0+ 抽奖项目
前言临近年关抽奖活动,基于vue2.0+开发的抽奖项目. 便于查看效果,贴上相关地址: 在线示例地址:快速访问 github地址:查看源码简介基于vue.js抽奖项目,截屏保存每次抽奖图片至本地 ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
基于vue2.0实现音乐/视频播放进度条组件的思路及具体实现方法+代码解释
基于vue2.0实现音乐/视频播放进度条组件的方法及代码解释需求分析: ①:进度条随着歌曲的播放延长,歌曲播放完时长度等于黑色总进度条长度:时间实时更新. ②:当滑动按钮时,实时更新播放时间,橙色进 ...
基于vue2.0的一个豆瓣电影App
1.搭建项目框架使用vue-cli 没安装的需要先安装 npm intall -g vue-cli 使用vue-cli生成项目框架 vue init webpack-simple vue-movie ...
基于oAuth2.0开发属于自己的SSO授权服务 - 授权码（Authourization Code）模式 (持续更新中。。。)
此文章篇幅较长,平日上班较少时间写作,请见谅.持续更新中... oAuth2.0系列文章目录 #mermaid-svg-AZMPq56OmFj1I7k0 {font-family:"treb ...
一款基于Vue2.0高仿微信App的单页应用
概述利用Vue2.0模仿微信app,努力做到以假乱真的效果.个人独立开发,源码中有详细的注释,为新手提供许多有用的提示信息.项目的第一期接近尾声,后期会增加仿3DTouch.登陆.注册.emoji ...

vue做混合式app_基于vue2.0开发混合app的思考

vue做混合式app_基于vue2.0开发混合app的思考相关推荐

最新文章

热门文章