AppCan _AppCan - 锐客网

知识为进步之母,而进步又为富强之源泉。这篇文章主要讲述AppCan相关的知识，希望能为你提供帮助。
启动服务

文章图片

文章图片

将app程序寄宿在计算机上，在计算机上调试：访问服务地址，将appToken值复制一下

文章图片

在浏览器输入192.168.2.102:3000/appToken的值/文件路径后即可调试
入口文件项目必须有一个放在根目录下的入口页面，否则在手机上无法进入app模块。比如在根目录下放一个appcan页面，命名为Login，然后在config.xml配置文件中注册（右击xml - 以xml方式打开）

< content encoding="utf-8" src="https://www.songbingjia.com/android/login.html"/>

文件结构

文章图片

文章图片

常用文件

< link rel="stylesheet" href="https://www.songbingjia.com/android/css/fonts/font-awesome.min.css"> < link rel="stylesheet" href="https://www.songbingjia.com/android/css/ui-box.css"> < link rel="stylesheet" href="https://www.songbingjia.com/android/css/ui-base.css"> < link rel="stylesheet" href="https://www.songbingjia.com/android/css/ui-color.css"> < link rel="stylesheet" href="https://www.songbingjia.com/android/css/appcan.icon.css"> < link rel="stylesheet" href="https://www.songbingjia.com/android/css/appcan.control.css"> < link rel="stylesheet" href="https://www.songbingjia.com/android/MyLogin_content/css/main.css"> < link rel="stylesheet" href="https://www.songbingjia.com/android/css/xy.css"> < script src="https://www.songbingjia.com/android/js/appcan.js"> < /script> < script src="https://www.songbingjia.com/android/js/appcan.control.js"> < /script> < script src="https://www.songbingjia.com/android/js/pc.js"> < /script> < script src="https://www.songbingjia.com/android/js/base.js"> < /script> < script src="https://www.songbingjia.com/android/js/ec.js"> < /script> < script src="https://www.songbingjia.com/android/js/uf.js"> < /script> < script src="https://www.songbingjia.com/android/js/login.js"> < /script>

配置文件具体配置，可参考官方文档。注意，使用外面的插件时，需要注册。

文章图片

< ?xml version="1.0" encoding="utf-8" standalone="no"?> < widget appId="test1001" channelCode="0000" height="480" pid="" sreensize="4.5" version="00.00.0000" viewmode="application" widgetId="" width="320"> < name> 测试App< /name> < description/> < author email=""/> < icon src="https://www.songbingjia.com/android/icon.png"/> < license href=""/> < content encoding="utf-8" src="https://www.songbingjia.com/android/MyLogin.html"/> < updateurl/> < logserverip/> < showmyspace> false< /showmyspace> < obfuscation> true< /obfuscation> < bgcolor> #fefefe< /bgcolor> < orientation> 1< /orientation> < debug> true< /debug> < !--极光推送配置--> < config desc="uexJPush" type="KEY"> < param name="$UEXJPUSH_PACKAGE$" platform="android" value="https://www.songbingjia.com/android/com.xuyong.xyzls.worker"/> < param name="$UEXJPUSH_APPKEY$" platform="Android" value="https://www.songbingjia.com/android/303759edfd226f8e5dd4fe80"/> < param file="uexGroupfolder/PushConfig.plist" name="$UEXJPUSH_APP_KEY$" platform="ios" value="https://www.songbingjia.com/android/303759edfd226f8e5dd4fe80"/> < param file="uexGroupfolder/PushConfig.plist" name="$UEXJPUSH_PUSH_CHANNEL$" platform="iOS" value="https://www.songbingjia.com/android/c1"/> < param file="uexGroupfolder/PushConfig.plist" name="$UEXJPUSH_APS_ENVIRONMENT$" platform="iOS" value="https://www.songbingjia.com/android/0"/> < /config> < !--百度地图配置--> < config desc="uexBaiduMap" type="KEY"> < param name="$uexBaiduMap_APIKey$" platform="Android" value="https://www.songbingjia.com/android/mncGL5qjo78HImOXDPcaWtHPdPBATVbz"/> < param name="$uexBaiduMap_APIKey$" platform="iOS" value="https://www.songbingjia.com/android/iXfGyztf4xnUv4pmMBuq5LkPyzC8c3xP"/> < /config> < partobfuscation/> < webapp/> < !--分享功能白名单--> < config desc="whiteList" type="AUTHORITY"> < permission info="urlSchemeWhiteList" platform="iOS"> < string> wechat< /string> < string> weixin< /string> < string> mqzoneopensdk< /string> < string> mqzoneopensdkapi< /string> < string> mqzoneopensdkapi19< /string> < string> mqzoneopensdkapiV2< /string> < string> mqqOpensdkSSoLogin< /string> < string> mqqopensdkapiV2< /string> < string> mqqopensdkapiV3< /string> < string> wtloginmqq2< /string> < string> mqqapi< /string> < string> mqqwpa< /string> < string> mqzone< /string> < string> mqq< /string> < /permission> < /config> < /widget>

View Code 创建Html页面（appcan页面）

文章图片

这会生成两个文件，一个是框架文件，一个是嵌入框架的子文件。框架文件只显示一个标题栏，如图

文章图片

子文件是具体的内容区域，如图的Login_content.html

文章图片

盒子布局只需要将元素放入一个div盒子，为盒子设置class即可实现横向竖向布局

.box { margin-top: 0.2em; border:1px solid red; }

布局前

文章图片

< div class="box" > 芒果 < /div> < div class="box" > 荔枝 < /div> < div class="box" > 番茄 < /div>

布局后

文章图片

< div class="ub"> //将以上三个div放进此盒子中 < /div>

盒子的class
ub：使自身包含的元素浮动在一行显示
ub-pc：使自身包含的元素作为一个整体水平居中
ub-ac：使自身包含的元素作为一个整体垂直居中
盒子包含的元素的class
ub-f1：占剩下的空间，如果每个元素都应用此class，则平均分配占用的空间
常用方法appcan.frame.open()
将参数指定的目标页面嵌入到当前页面中

//框架页载入子页面的代码：如mylogin_content.html时mylogin.html的子页面 appcan.ready(function() { var titHeight = $(‘#header‘).offset().height; appcan.frame.open("content", "mylogin_content.html", 0, titHeight); window.onorientationchange = window.onresize = function() { appcan.frame.resize("content", 0, titHeight); } });

【AppCan】b.show()
用参数指定的目标页面替换当前页面，需要引入公司的js文件，参数3可指定要向目标页传递的数据

/*打开目标页并传参/*
/*在login_content.html页面*/ var obj={name:"sam"}; /*定义需要跨页传递的数据*/ b.click("#Btn",function() { /*打开参数路径指定的页面*/ b.show("home.html","winpage_home",{ data:obj /*传递的参数*/ }); }); /*在home.html中获取参数*/ var fromLoginPageData=https://www.songbingjia.com/android/b.geturlparam(); var name=fromLoginPageData.data.name; alert(name); /*home页面向home._content页面传递数据也是同样的写法*/

appcan.window.alert()
弹出确认对话框

appcan.window.alert({ title : "提醒", content : "表单未填完整", buttons : ‘确定‘, callback : function(err, data, dataType, optId) {} });

b.click()
点击事件，类似的有b.long.click()

b.click("#submit", function() {//可以访问this})

b.close()
回退到上一个页面，等同于appcan.window.close(-1);
每个框架页都有回退按钮，需要自己手动设置，具体是在Header部分添加一个div按钮，如：

< !--header开始--> < div id="header" class="uh bc-text-head ub bc-head"> < div class="nav-btn" id="nav-left"> < div class="fa fa-angle-left fa-2x"> < /div> < /div> < h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0"> 登录< /h1> < div class="nav-btn nav-bt" id="nav-right"> < /div> < /div> < !--header结束-->

文章图片

b.click(".nav-btn",function() { b.close(); //可以访问this });

常用样式缩小元素
设置左右边距可以缩小元素

.inputBox, #submit { margin-top: 1em; margin-left:0.5em; margin-right:0.5em; }

文章图片

设置圆角

#submit{ border-radius: 3em; }

文章图片

圆形按钮

#raBtn { width: 12em; height: 12em; border-radius: 50%; }

< div class="ub ub-ac ub-pc"> < div class="btn/*删掉btn，否则是椭圆*/ ub ub-ac bc-text-head ub-pc bc-btn"id="raBtn"> click < /div> < /div>

文章图片

列表需要引入

< script src="https://www.songbingjia.com/android/js/appcan.listview.js"> < /script> < script src="https://www.songbingjia.com/android/js/ec.js"> < /script>

< link rel="stylesheet" href="https://www.songbingjia.com/css/xy.css"> < link rel="stylesheet" href="https://www.songbingjia.com/css/res/xy-ecbs.css">

文章图片

选择列表控件，这会在页面插入一个列表div，接着需要创建列表对象

var list = ec.listview({ "selector" : "#MylistBox", //插入页面的列表元素的id "type" : "thickLine", //复杂列表简单列表：thinLine "logoSize" : 1.5, "hasSubTitle" : true, //右侧是否显示文本 "subTitleCss" : "setFont", //右侧文本的额css类名 "logoCss" : "logo", "dataType" : "local", //本地数据源 "titleCss" : "setFont", //左侧文本的css类名 "data" : [{ "id" : "1", "logo" : "fa-user", "title" : "leo", "subTitle" : "023789" }, { "id" : "2", "logo" : "fa-user", "title" : "sam", "subTitle" : "023789" }, { "id" : "3", "logo" : "fa-user", "title" : "korn", "subTitle" : "023789" }, { "id" : "4", "logo" : "fa-user", "title" : "tom", "subTitle" : "023789" }, { "id" : "5", "logo" : "fa-user", "title" : "lily", "subTitle" : "023789" }, { "id" : "6", "logo" : "fa-user", "title" : "tim", "subTitle" : "023789" }], "events" : { "click" : function(el, data) { b.show("ResetUser.html", "winpage_ResetUser", { data : data }); } } });