AppCan初次使用Word下载.docx
- 文档编号:1455323
- 上传时间:2023-04-30
- 格式:DOCX
- 页数:32
- 大小:936.22KB
AppCan初次使用Word下载.docx
《AppCan初次使用Word下载.docx》由会员分享,可在线阅读,更多相关《AppCan初次使用Word下载.docx(32页珍藏版)》请在冰点文库上搜索。
5)、打开AppCanIDE,并用刚才注册的用户登陆
6)、登录进入IDE
7)、点击新建项目
8)、选择同步AppCan项目,点击下一步。
9)、选择天气点击完成。
10)、整个应用创建完成了。
3、应用开发
1)、打开index.html页面加入应用头部,我们的头部都是统一的,所以加入一下代码
删除默认的背景图片,你也可也在css中修改,index/css/main.css
2)、打开index_content.html页面这个是我们的内容页面。
因为这是天气列表内容页,引入列表控件的js文件、css文件(appcan.listview.js、appcan.control.css),在body中插入一个容器元素来显示列表内容。
<
divclass="
city-listcontent"
/div>
3)、用listview控件添加列表内容我们添加六个城市,listview的icon我们放置天气状况,设置天气列表,刚开始我们我们用默认图片,等列表加载完成之后我们用appcan.request.ajax()方法异步请求真正的天气列表数据。
列表添加完成,异步获取天气状况,我们用百度的天气api。
添加点击事件,当点击的时候保存点击的城市,并打开详情页面。
4)、我们添加一个方法当页面下拉的时候完成刷新动作,appcansdk中已经封装好了该方法
5)、到此我们就完成了整个城市列表的内容了下面就是完成的内容。
!
DOCTYPEhtml>
htmlclass="
umlandscapemin-width-240pxmin-width-320pxmin-width-480pxmin-width-768pxmin-width-1024px"
head>
title>
/title>
metacharset="
utf-8"
metaname="
viewport"
content="
target-densitydpi=device-dpi,width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"
linkrel="
stylesheet"
href="
css/fonts/font-awesome.min.css"
css/ui-base.css"
css/ui-box.css"
index/css/main.css"
css/ui-color.css"
css/appcan.control.css"
/head>
bodyclass="
um-vp"
ontouchstart>
scriptsrc="
js/appcan.js"
/script>
js/plugin/appcan_plugin.js"
js/appcan.listview.js"
script>
functionupdateInfo(city,ele){
varweatherUrl='
appcan.request.getJSON(weatherUrl,function(data){
if(data.error){
alert('
获取天气出错'
);
}else{
varweatherData=data.results[0].weather_data;
vartoday=weatherData[0];
$(ele).find('
.lis-icon-s'
).css('
background-image'
'
url("
'
+today.dayPictureUrl+'
"
)'
}
});
}
appcan.ready(function(){
appcan.frame.setBounce(0,function(type){
//$("
#pullstatus"
+type).html(!
type?
开始下拉"
:
开始上拖"
},function(type){
//$("
下拉超过临界点,产生事件了!
超过临界点,产生事件了!
$('
.city-listli'
).each(function(i,v){
vardata=v.lv_data;
if(!
data){
return;
}
updateInfo(encodeURI(data.title),v);
});
appcan.frame.resetBounce(type);
})
varlv=appcan.listview({
selector:
"
.city-list"
hasIcon:
true,
hasAngle:
true
lv.set([{
title:
北京"
icon:
./css/res/appcan_s.png"
icontitle:
},
{
南京"
},
杭州"
深圳"
上海"
三亚"
昆明"
}]);
functionopenDetail(city){
appcan.window.open({
name:
detail'
data:
detail.html?
+city,
aniId:
10
appcan.locStorage.val('
city'
city);
}
lv.on('
click'
function(ele,obj,subobj){
openDetail(encodeURI(obj.title));
$('
vardata=v.lv_data;
if(!
return;
updateInfo(encodeURI(data.title),v);
})
/body>
/html>
6)、新增天气详情页面detail.html、detail_content.html两个页面detail.html页面里面我们加一个标题和页尾,标题加一个返回按钮
--header开始-->
divid="
header"
class="
uht-whubc-blu"
-返回按钮开始-->
nav-btn"
id="
nav-left"
fafa-arrow-leftulev2"
-返回按钮结束-->
h1class="
utub-f1ulev-3ut-stx-c"
tabindex="
0"
spanclass="
detail-title"
/span>
/h1>
nav-btnumw4ubub-acub-pc"
--header结束-->
--content开始-->
content"
ub-f1tx-lappCanub-img4"
--content结束-->
--footer-->
footer"
uinn-z1"
tx-ct-93ulev0ufm1"
tx-ct-93ulev-4umar-at1"
正益无线(北京)科技有限公司<
7)、我们用button控件来给返回按钮加上事件
appcan.button("
.nav-btn"
"
btn-act"
function(){
appcan.window.close(-1);
8)、获取当前城市并设置当前状态页面,标题的内容
varcity=appcan.locStorage.val('
$('
.detail-title'
).html(decodeURI(city)+'
天气详情'
9)、现在添加城市天气详情页面,因为天气为三天的天气,所以我们这里可以用列表控件,先生成列表数据,三天天气都大致相同,我们定义一个模版。
scripttype="
text/template"
weather-tmp"
day"
temperature"
%-weather_data.temperature%>
div>
span>
%-weather_data.wind%>
%-weather_data.weather%>
weather-pic"
imgsrc="
%-weather_data.dayPictureUrl%>
br>
%-weather_data.date%>
10)、新增更新天气函数,来更新天气数据
11)、执行更新数据,在更新数据前先打开一个提示框表明正在加载数据,当数据加载成功删除提示框,把获取的数据传给更新列表函数进行渲染
12)初始化页面,获取传来的城市然后根据该城市更新页面数据
appcan.initBounce();
varcity=appcan.locStorage.val('
updateInfo(city);
4、应用打包
开发完成打包应用有两种方式,一种是本地打包,一种是线上打包。
4.1、本地打包(仅供测试使用)
1)、点击发行
或者右键点击phone,然后点击生成安装包
2)、可以修改应用名称,上传图标,我们使用默认的然后点击下一步
3)、选择要生成的平台,启动画面点击下一步
4)、选择需要的插件然后点击完成。
等待打包如果打包完成就会自动打开应用目录。
4.2、线上打包
1)、点击右键把代码提交的服务器
2)、选择要提交的文件。
点击ok
3)、选择应用进入详情页面,并点击应用开发,进入应用开发页面
4)、点击应用打包,点击图标设置可以修改图标,点击启动页面可以修改启动页面,然后选择插件,证书,最后点击云端打包。
5)、选择平台和版本号,点击生成安装包。
6)、等待打包完成,可以下载生成的安装包了,点击下一步进入应用详情页面。
最后来看一下实际运行效果GIF:
以上就是今天要介绍的内容,谢谢。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AppCan 初次 使用