Framework7 + cordova +AS 混合开发安卓app（一）

一、开发目的

开发一个有关销售的APP，主要包含首页，资讯页，发现页，购物车页以及个人中心页，其性质类似于电商APP，注册用户分为普通用户与商家，用户可通过页面链接进入商家页面以及商品页面浏览APP内容，也可通过上传相关信息认证成为商家。

二、准备工作

安装/下载：
1、Framework7框架，开源；
2、虚拟服务器（Virtual Server），博主使用的是WAMP(For Windows)；
3、允许浏览器的跨域请求，博主使用的谷歌浏览器，插件为Allow-Control-Allow-Origin；
4、安装JDK jdk下载
5、安装nodejs (https://nodejs.org/en/download/)
6、安装Android Studio,建议安装带有sdk的，会少一些配置步骤，推荐网址(http://www.androiddevtools.cn/)
7、用npm安装cordova

npm install -g cordova

环境配置：
选中电脑图标，右键选择属性，进入控制面板，选择高级系统设置，点击环境变量进行环境配置：
1、新建一个 JAVA_HOME 的系统变量值为 java 安装路径，博主这里是E:\Java\jdk，然后点击Path变量，后面加上%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
2、新建一个ANDROID_HOME系统变量，值为AndroidSDK 安装路径，博主这里是C:\Users\Administrator\AppData\Local\Android\Sdk，点击Path变量 添加%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

测试环境：
新打开一个cmd，键入以下命令

java -version 
javac -version 
adb version 
cordova -version

如果环境配置正确会出现如图所示

分享问题之java：在安装的时候博主出现如图所示问题：

经验证解决办法如下，执行命令echo %JAVA_HOME%，获取JAVA_HOME地址，然后切换到环境变量在 path 中，把;%JAVA_HOME%\bin放在最前面，而不是后面，然后再次切换到cmd执行上述命令检查环境是否配置成功，附上图片

三、正式开发

在开发之前，博主推荐一些网站Material Design 和 Google Design
操作步骤

在编写好基础代码后，打开WAMP，而后点击进入浏览器，输入localhost：/你的文件名/，比如我这里是http://localhost/cjzx-master/ 然后按键F12进入控制台调试，你会看到：

你可以选择Elements查看你所有的HTML代码，不论它是不是动态添加，console会提示你错误信息，它将很有利于调试代码；
特别值得注意的是，你需要在这里打开插件Allow-Control-Allow-Origin，它将允许浏览器跨域请求；
最后你将会在预览窗口看到你的页面效果，你可以通过添加css代码调整为你想要的效果，但万分注意的是不要随便写死一个尺寸，而是注意响应式布局，开发一套程序适应多种尺寸，高度无所谓，因为页面可以滚动。但是涉及到宽度的时候，上策是用网格系统，其次是能不放在一行就不放在一行，再次是用百分比，实在不行才用数值。值得庆幸的是，在这个界面你可以选择不同的机型展示你的页面，那样你会发现你的问题；

常用方法介绍

声明：以下仅为个人记忆的一些方法，推荐读者查看官方文档 点击查看
console.log( )
在开发过程中，我们避免不了一些bug的产生，使用console.log()方法你将在你的控制台看到你的数据亦或者错误原因，在本次开发中，我们经常将console.log()与post方法配合使用，下方是示例代码：

app.request.post(' https://mp.csdn.net/mdeditor/81911104',   //后端接口
      {id：1},   //参数
          function (data) {   //回调函数
            data = JSON.parse(data); //转json格式
            console.log(data);

返回正常时你一般会看到这样的结果：

进而你可以在控制台测试你的函数，实现你所想的功能；

alert（）
alert（）方法一般用在真机调试，它的使用与console.log（）相似，在手机端你将会看到来自alert的提示，如果没有，那只能说明没有执行到这个语句，你将锁定自己的错误范围；

路由设置
第一步：在index.html里，找到对应的tab，设置a标签的href值。比如设置为#view-news
第二步：在app.js里进行初始化，var view_news = app.views.create(“参数s”, { url: 参数url } )
其中参数s为第一步中设定的href值，url可以随意指定
第三步：在routes.js中进行路由配置，配置时，path的值为第二步中指定的url值，url为实际的文件目录

append()
使用append()方法实现动态添加，一般我们会在需要的添加的div标签中特定id

//html代码
<div id=tab-news><div>
//js代码
$$('#tab-news').append('<div>This is example code </div>');
//效果展示
<div id=tab-news>
	<div>This is example code </div>
<div>

html()
使用html()方法实现动态替换

//html代码
<div id=tab-news>
	<div>这是测试代码</div>
<div>
//js代码
$$('#tab-news').html('<div>This is example code </div>');
//效果展示
<div id=tab-news>
	<div>This is example code </div>
<div>

set_current_id( )
有时我们需要确定某一个区域被点击，需要获取到相应的id，就可以使用set_current_id();

//html代码
<div>onclick="set_current_id(' + data.infor[i].id + ')"> </div>
//js代码
let g_detailedessay_id;
function set_current_id(t){
  g_detailedessay_id = t;
}

时间戳转换
效果是将形如1506073161 转换为 2017-09-22 17：39：21 ，代码如下：

function time(timestamp) {
  var date = new Date(timestamp * 1000);
  var year = date.getFullYear() + '-';
  var month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
  var day = date.getDate() + ' ';
  var hour = date.getHours() + ':';
  var minutes = date.getMinutes() + ':';
  var seconds = date.getSeconds();
  return year + month + day + hour + minutes + seconds;
}

input标签和val（）方法
单独的val( )用来获取一个元素的值，val(“something”)用来设置一个元素的值
val一般指表单的值，比如输入框、日期选择框、颜色选择框、下拉列表、单选按钮、复选按钮等等的值，下方给出示例：

//html代码
<input type="text" placeholder="回复" id="recall-input">
//js代码
let recallcontent = $$('#recall-input').val();

e.detail.route.query.xx
e是一个page对象, detail是page对象的一个属性，包含了页面的详情信息, route是detail 的一个数组，包含了路由信息。query是route的一个属性，包含了随页面传递的数据,示例代码：

/*shop页面代码
/*此处的data.infor是后端接口返回的数组，在此调用
*/
let trade_no = data.infor.out_trade_no;
let fee = data.infor.total_fee;
shop.navigate("/pay/?trade_no=" + trade_no + "&fee=" + fee + "&buycount=" + g_order_confirm_buycounts); //将trade_no、fee、buycount的值传递给pay页面

/*pay页面代码
/*调用e.detail.route.query.xx接收trade_no、fee、buycount的值
*/
let payment_fee = e.detail.route.query.fee;
let payment_trade_no = e.detail.route.query.trade_no;
let payment_buycount = e.detail.route.query.buycount;

.css()
设置或返回被选元素的一个或多个样式属性
单独的css( )用来获取一个元素的值，如：

$("p").css("background-color");//返回p标签的background-color值

设置样式属性：

//html代码
<div class="toolbar toolbar-bottom-md" style="display: none; color: #1b1b1b;" id="comment">
//js代码
$$('#comment').css('display', 'block');

.attr()
设置或返回被选元素的属性值

//html code
<a class="external" id="phone-tel" href="#"></a>
//js code
$$('#phone-tel').attr('href', 'tel:' + 13434534537);

未完待续…