Cordova项目中使用BUI框架,以及常见问题解答

一、Cordova框架浅谈以及安装跟创建项目

  Cordova官网:http://cordova.axuer.com/

(1).什么是Cordova

            简单来说就是可以把你的前端页面打包成android或者ios端可使用的App

     它不会把你的前端页面变成 ios 原生的 objective-c 或者 android 的 java 代码,你的界面还是网页呈现的,渲染在android 的 android.webkit.WebView 或 iOS 的 UIWebView 中。

     不太像壳,更像是胶水,因为它不像框架一样团团包住你写的那部分内容,只是在运行在 WebView 中的 javascrip代码和原生代码之间建了一座沟通的桥梁, Ionic 这种东西才更像是壳。这个桥怎么搭下面写。

     不是前端框架, bootstrap、angularjs、jqueryUI、Ionic 这些是前端框架,可以和 Cordova 协作,但都不必要,可用的前端框架有很多,下面我讲的是结合BUI使用。

(2).为啥要用Cordova

        混合模式移动应用App(Hybrid App)目前成为主流,BAT大厂目前采用的都是这种技术,为什么要采用这个技术,千古不变的问题:开发一个原生App(Native App)的成本或许可以接受,但是维护一个Native App更新的成本则成了跨不过的悬崖(打江山容易,守住难),Hybrid App(混合模式移动应用)兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

        首先,它可以让众多Web开发人员几乎零成本转型为移动应用的开发者

        其次,相同的代码只需针对不同平台进行编译就能实现在多平台的分发,大大提高了多平台开发的效率。而相较于Web应用,开发者可以通过包装好的接口调用大部分常用的系统API

(3).Cordova优缺点

      总的来说,使用Cordova框架开发优缺点很明显,实际使用中,Cordova提供的插件,大部分能解决 。一些相关缺点所带来的问题(图不是本人的,这里只是作为展示,比较优缺点)。

(4).Cordova安装

1.下载安装Node.js

官网地址是 https://nodejs.org/en/

在命令行下进行测试:node -v 

2. JDK安装和SDK

        通常的java和android开发人员,jdk就基本都安装和配置好的了,而sdk的话,我比较建议是直接安装android studio,因为这里面有附带安装。

3. 命令行下输入:npm install –g cordova 

       npm通常都会比较慢,这里推荐淘宝的镜像cnpm:npm config set registry https://registry.npm.taobao.org  然后再
npm install –g cordova 

4. 安装成功之后:cordova -v

        

(5).Cordova应用创建

          命令行下输入:cordova create hellowordl com.example.hello demo
                   
变量      说明
helloword 创建的文件的名称
com.example.hello 创建的项目的包名
demo APP客户端的名称
(6).Cordova添加平台

关于Cordova相关配置,这里不赘述,详细方法参考:Cordova环境安装配置

二、BUI前端框架与Cordova框架进行整合

(1).BUI前端框架介绍

这里也不多赘述,个人介绍,肯定不如其团队自己介绍来的实际,原文地址: BUI前端框架介绍


(2).BUI前端框架与Cordova框架进行整合

1.下载模板,模板地址:点击打开链接 ;下载地址:点击打开链接

2. BUI分单页面路由跟多页面路由,这里使用多页面进行演示,将对应的font、css、js、images、login文件夹放到生成的Cordova项目中,替换index.html

    

3. Cordova项目页面文件在www中,放入对应文件

   

 4. 命令符进入到Cordova项目中,添加browser平台 cordova platfrom add browser (浏览器运行) 

                

5. 浏览器运行  cordova run serve

   

6、打包apk安卓运行,生成的安卓包

                 

  

 

 (3).BUI前端框架与Cordova框架进行整合使用中,常见问题

                 开发过程中遇到几个常见问题,如有其他问题,欢迎提问,加群:691560280

     
1、跨域问题
        使用过程ajax请求会存在跨域请求,解决办法:跨域问题点击打开链接
2、缓存问题
     跳转路由增加时间戳,有效解决缓存问题

 (4).Crodova常用插件汇总

1、支付宝支付插件:cordova-plugin-alipay-v2
2、微信相关插件(支付,分享):cordova-plugin-wechat
3、极光推送插件:jpush-phonegap-plugin
4、其他插件参考:点击打开链接

 三、结言

        BUI这个是今年开始接触使用的框架,当时公司接了个比较复杂的项目,Ionic基本是满足不了我了(当时还在使用),为了满足需求,前期做了大量调研,偶然发现BUI,当时吸引我的还是官方的文档,都是大白话(最近文档更新了,比之前更容易阅读),实际使用中,模板挺多的,搭配Cordova,基本实现接近原生(官方提供的dcloud,apicloud, appcan 等第三方平台打包还是觉得用的不舒服),可以直接使用自己熟悉的js(像我这样的还是觉得Jquery最好用~),查看过他们的整个页面结构,还是挺合理,基本app跟网页都可以复用,套用广告:谁用谁知道~~

        实际使用中,也是有一些问题的:路由跳转方面我花了挺长时间去进行理解,官方提供的图标太少(但是可以通过阿里的图标库解决),基本问题不大,这个也是我目前用的时间最长的框架,已经完全放弃使用Ionic了,希望BUI为了可以越来越好吧

        最后目前世面上的框架太多,参差不齐,一个适合自己框架,能让你的开发效率事半功倍,使用过程中BUI是真的让我眼前一亮的框架,以上总结只是自己个人的见解,BUI相关问题可以直接访问官网,或者加群:691560280 希望不喜勿喷,我可是玻璃心、嘿嘿。


              

                    

                



猜你喜欢

转载自blog.csdn.net/qq_33334746/article/details/80925998