cordova+framework7入门——笑笑APP

【前言】

framework7确实做的很赞，但是一直各种原因没有做什么app，

这个感觉就像大厨遇到百年难见的好材料，不炒个菜憋的慌，

机缘巧合周一周二两个晚上做了一个简单app，先看下效果：

 

ios截图稍候奉上，

 

感觉还不错吧。

 

【原理】

app其中一类就是基于内容和基于数据的，恰好有个平台提供数据源：https://www.juhe.cn/

上去看了一眼，笑话的数据接口可以做一个简单的app，于是就开动了。

 

数据源：用三方平台提供的api。

 

framework7，http://framework7.io/kitchen-sink-material/

上去瞅了瞅，发现几个模块不错：left-panel，floating-action-button，cards，navbar等等，

 

ui层：framework7中的几个组件

 

这个app目前没有太多的和native交互的地方，只有一处，设置statusbar的色值，

所以需要用到cordova的一个plugin：statusbar，这个对比hbuilder中的nativejs，稍有不同

 

native层：statusbar插件

 

【开发过程】

首先需要下载framework7，地址：https://github.com/nolimits4web/framework7/

其中dist中为核心js css代码，

kitchen-sink-ios为ios实现代码，kitchen-sink-material为android实现代码，

由于ios和android在实现上有写差别，包括html不同，css不同，js不同，为了达到更好的效果所以需要两套代码，

但是总体思路是相同的，只是细微之处有些不同。

开发的时候可以看http://framework7.io/kitchen-sink-material/实现的效果，

对比kitchen-sink-material中具体页面的代码，

然后转变为自己需要的代码。

 

【枯燥的代码讲解】

1.开源和项目结构

github：https://github.com/uikoo9/_hpp_01_xiaoxiao

分为android和ios两套代码，所以对应两个文件夹，文件夹下目录结构相同，

外层config.xml：备份文件

android-platforms：android平台代码，暂时忽略

android-plugins：html和native交互的插件，类似hbuilder中的nativejs，暂时忽略

android-res：资源文件

android-www：项目代码，这部分才是具体开发的代码

config.xml：打包的配置文件

2.www文件夹结构

www文件夹下是具体的开发代码，可以参照上图，

看过上节文章的同学应该知道，framework7是单页面应用spa，也就是说只有一个入口html，

也就是入口index.html，对应的index.js和index.css，app对应所有页面的js css都应该写到这里。

3.重点是打包

代码暂且不讲了，自己看源码，应该可以懂，f7的组件之后有需要在单开一节讲吧。

本节重点是可以自己写完代码，用cordova运行，调试，打包发布。

 

【phonegap之坑】

按上节的内容，一直是使用的phonegap作为打包工具，

phonegap和cordova的区别，可以去百度看看，

简单的来说，cordova是kernel，phonegap相当与ide，

类似android sdk 和android studio的关系，

但是使用过程中发现这个ide不好用，然后就直接转向cordova了，

上节内容已经讲到phonegap的简单使用，运行，调试了。

这里说下phonegap的打包，

说下在线打包，这个功能和hbuilder有点类似，只不过hbuilder是集成在ide内了，phonegap是web形式，

https://build.phonegap.com/apps/

登录这个地址，如下图：

1.用adobe帐号登录，创建app

2.将代码打成zip然后上传

3.上传后会自动build，也可以自己手动build

4.ios需要上传key文件

 

坑

1.周一晚上android打包还正常，安装后也正常使用，周二晚上安装后就一直停留在device is ready界面

2.android debug发现一直报错

百度，谷歌也没发现具体的解决办法，

 

而且云端打包的弊端就是不可控，报错的时候不知道怎么处理，思考再三觉得还是本地打包靠谱。

 

【cordova】

决定不使用phonegap的云端打包后就开始转向cordova，http://cordova.apache.org/

介绍之类的自行去百度，我只能说apache好牛，apache上的项目想要看完感觉得好多年，

程序员就是一条贼船，学不完的新技术，看不完的书，唉。

 

1.config.xml

desc：app名称的信息

index：入口页面

prefer：插件设置

plugin：插件引用

android：android平台相关设置，这里只设置了icon，没有设置启动页，启动页也可以在这里设置

access：白名单，刚开始的时候没有引入whitelist插件，倒是app访问http无法正常进行，后来添加插件添加权限即可

 

2.www和res

参照上面文件结构图，

www：代码

res：config.xml中配置的文件存放目录，这个也可以自己调整，只要能找到即可

 

3.cordova intro

官网的getstarted，比较简单明了，貌似也没有什么问题

 

4.cordova create

以后可以不需要命令创建，以本项目为模版，保留www和res文件夹，以及config.xml即可

 

5.cordova platform add android

这个需要本地有android和ios的环境，android sdk即可，安装请百度，ios稍候补充。

 

6.cordova run android

run，就是将app发送到手机并运行，需要数据线连接手机，并开启usb调试

 

7.cordova serve

和上一节phonegap serve相同，在本地启动一个serve，方便初期在浏览器调试

 

8.cordova build

浏览器调试完毕，真机调试完毕后就是打包了，build有几个命令，可以使用cordova help build查看

 

【debug】

debug是必不可少的环节

1.浏览器调试

刚开始功能开发的时候，可以使用cordova serve命令，本地开启serve然后浏览器调试，很方便

2.真机调试

当功能开发完毕后，需要真机校验和调试，这个时候可以用cordova run，将app安装到真机中，

但是调试就发愁了，具体可以参考这篇文章：http://rensanning.iteye.com/blog/2018417

结论是，gapdebug比较好用，具体使用详见官网。

 

【梳理流程】

www下代码开发

cordova serve浏览器调试

config.xml中引用res，引用plugin

cordova platform add android生成平台和plugin

cordova run android真机调试，配合gapdebug

 

【end】

至此，应该可以在我代码基础上，自己将流程跑一遍了。

也算是cordova+framework7入门了。

源码：https://github.com/uikoo9/_hpp_01_xiaoxiao

 

转载：http://uikoo9.com/book/chapterDetail/109