码迷,mamicode.com
首页 > 移动开发 > 详细

AppCan

时间:2018-04-15 16:28:05      阅读:336      评论:0      收藏:0      [点我收藏+]

标签:模块   off   ocs   地址   put   sub   sdk   form   bind   

启动服务

技术分享图片

技术分享图片

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

技术分享图片

在浏览器输入192.168.2.102:3000/appToken的值/文件路径后即可调试

入口文件

项目必须有一个放在根目录下的入口页面,否则在手机上无法进入app模块。比如在根目录下放一个appcan页面,命名为Login,然后在config.xml配置文件中注册(右击xml - 以xml方式打开)

<content encoding="utf-8" src="login.html"/>

文件结构

 技术分享图片

 技术分享图片

 技术分享图片

常用文件

<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
<link rel="stylesheet" href="MyLogin_content/css/main.css">
<link rel="stylesheet" href="css/xy.css">

<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
<script src="js/pc.js"></script>
<script src="js/base.js"></script>
<script src="js/ec.js"></script>
<script src="js/uf.js"></script>
<script src="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="icon.png"/>
    <license href=""/>
    <content encoding="utf-8" src="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="com.xuyong.xyzls.worker"/>
        <param name="$UEXJPUSH_APPKEY$" platform="Android" value="303759edfd226f8e5dd4fe80"/>
        <param file="uexGroupfolder/PushConfig.plist" name="$UEXJPUSH_APP_KEY$" platform="iOS" value="303759edfd226f8e5dd4fe80"/>
        <param file="uexGroupfolder/PushConfig.plist" name="$UEXJPUSH_PUSH_CHANNEL$" platform="iOS" value="c1"/>
        <param file="uexGroupfolder/PushConfig.plist" name="$UEXJPUSH_APS_ENVIRONMENT$" platform="iOS" value="0"/>
    </config>
    <!--百度地图配置-->
    <config desc="uexBaiduMap" type="KEY">
        <param name="$uexBaiduMap_APIKey$" platform="Android" value="mncGL5qjo78HImOXDPcaWtHPdPBATVbz"/>
        <param name="$uexBaiduMap_APIKey$" platform="iOS" value="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);
    }          
});

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=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="js/appcan.listview.js"></script>
<script src="js/ec.js"></script>
<link rel="stylesheet" href="../css/xy.css">
<link rel="stylesheet" href="../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
            });
        }
    }
});

技术分享图片

复杂列表只是在左侧和右侧文本下方多出了说明性文本

"title" : "leo",
describe:"用户名",
"subTitle" : "023789",
subDescribe:"电话号码",

技术分享图片

快捷键

Ctrl+Shift+F:格式化代码

Ctrl+Shift+/:注释

Ctrl+/:取消注释

AppCan

标签:模块   off   ocs   地址   put   sub   sdk   form   bind   

原文地址:https://www.cnblogs.com/myrocknroll/p/8846031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!