下载文档

·创建一个AppCan应用
更新时间:2016-06-28

1、应用简介

该应用会一步一步给你演示怎么开发一个AppCan应用。该应用包含最常用的插件,window、request、file等。另外教会你使用AppCan应用开发平台,AppCan IDE等相关知识。

2、开发环境

在AppCan的官方网站上创建应用,并在IDE中开发完成后,到官网上进行打包。

1)、注册并登陆AppCan应用管理系统(http://dashboard.appcan.cn/app )。

2)、点击创建应用。

3)、 输入你的应用名称,和应用描述,然后保存。

4)、点击【开发】按钮,进入天气应用的详细信息。

AppCan官网下载并安装AppCan IDE
安装下载

5)、打开AppCan IDE,并用刚才注册的用户登陆

6)、登录进入IDE

7)、点击新建项目

8)、选择同步AppCan 项目,点击下一步。

9)、选择天气点击完成。

10)、整个应用创建完成了。

3、应用开发

1) 、打开index.html页面加入应用头部,我们的头部都是统一的,所以加入一下代码

  1. <!--header开始-->
  2. <div id="header" class="uh bc-text-head ubbc-head">
  3. <div class="nav-btn" id="nav-left">
  4. </div>
  5. <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">appcan天气</h1>
  6. <div class="nav-btn" id="nav-right">
  7. <!--按钮开始-->
  8. <!--按钮结束-->
  9. </div>
  10. </div>
  11. <!--header结束-->

删除默认的背景图片,你也可也在css中修改,index/css/main.css

2)、 打开index_content.html页面这个是我们的内容页面。因为这是天气列表内容页,引入列表控件的js文件、css文件(appcan.listview.js、appcan.control.css),在body中插入一个容器元素来显示列表内容。

  1. <div class="city-list content">
  2. </div>

3)、用listview控件添加列表内容我们添加六个城市,listview的icon我们放置天气状况,设置天气列表,刚开始我们我们用默认图片,等列表加载完成之后我们 用appcan.request.ajax()方法异步请求真正的天气列表数据。

  1. var lv = appcan.listview({
  2. selector : ".city-list",
  3. hasIcon : true,
  4. hasAngle : true
  5. });
  6. lv.set([{
  7. title : "北京",
  8. icon:"./css/res/appcan_s.png",
  9. icontitle : "",
  10. }, {
  11. title : "南京",
  12. icon:"./css/res/appcan_s.png",
  13. icontitle : "",
  14. }, {
  15. title : "杭州",
  16. icon:"./css/res/appcan_s.png",
  17. icontitle : "",
  18. },{
  19. title : "深圳",
  20. icon:"./css/res/appcan_s.png",
  21. icontitle : "",
  22. },{
  23. title : "上海",
  24. icon:"./css/res/appcan_s.png",
  25. icontitle : "",
  26. },{
  27. title : "三亚",
  28. icon:"./css/res/appcan_s.png",
  29. icontitle : "",
  30. },{
  31. title : "昆明",
  32. icon:"./css/res/appcan_s.png",
  33. icontitle : "",
  34. }]);

列表添加完成,异步获取天气状况,我们用百度的天气api。

  1. function updateInfo(city,ele){
  2. varweatherUrl = 'http://api.map.baidu.com/telematics/v3/weather?location='+city+'&output=json&ak=hTXrtTGGcljoOMdf2jZcc1yD';
  3. appcan.request.ajax({
  4. url:weatherUrl,
  5. type:'GET',
  6. dataType:"json",
  7. success: function(data){
  8. if(data.error){
  9. alert('获取天气出错');
  10. }else{
  11. varweatherData = data.results[0].weather_data;
  12. var today = weatherData[0];
  13. $(ele).find('.lis-icon-s').css('background-image','url("'+today.dayPictureUrl+'")');
  14. }
  15. }
  16. });
  17. }

添加点击事件,当点击的时候保存点击的城市,并打开详情页面。

  1. function openDetail(city){
  2. appcan.window.open({ name:'detail',
  3. data:'detail.html?'+city,
  4. aniId:10
  5. });
  6. appcan.locStorage.val('city',city);
  7. }
  8. lv.on('click', function(ele, obj, subobj) {
  9. openDetail(encodeURI(obj.title));
  10. });

4)、我们添加一个方法当页面下拉的时候完成刷新动作,appcan sdk中已经封装好了该方法

  1. function openDetail(city){
  2. appcan.frame.setBounce(0, function(type) {
  3. }, function(type) {
  4. }, function(type) {
  5. $('.city-list li').each(function(i,v){
  6. var data = v.lv_data;
  7. if(!data){
  8. return;
  9. }
  10. updateInfo(encodeURI(data.title),v);
  11. });
  12. appcan.frame.resetBounce(type);
  13. })

5)、到此我们就完成了整个城市列表的内容了下面就是完成的内容。

  1. <!DOCTYPE html>
  2. <html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
  3. <head>
  4. <title></title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <link rel="stylesheet" href="css/fonts/font-awesome.min.css">
  8. <link rel="stylesheet" href="css/ui-base.css">
  9. <link rel="stylesheet" href="css/ui-box.css">
  10. <link rel="stylesheet" href="index/css/main.css">
  11. <link rel="stylesheet" href="css/ui-color.css">
  12. <link rel="stylesheet" href="css/appcan.control.css">
  13. </head>
  14. <body class="um-vp" ontouchstart>
  15. <div class="city-list content">
  16. </div>
  17. <script src="js/appcan.js"></script>
  18. <script src="js/plugin/appcan_plugin.js"></script>
  19. <script src="js/appcan.listview.js"></script>
  20. <script>
  21. function updateInfo(city,ele){
  22. var weatherUrl = 'http://api.map.baidu.com/telematics/v3/weather?location='+city+'&output=json&ak=hTXrtTGGcljoOMdf2jZcc1yD';
  23. appcan.request.getJSON(weatherUrl,function(data){
  24. if(data.error){
  25. alert('获取天气出错');
  26. }else{
  27. var weatherData = data.results[0].weather_data;
  28. var today = weatherData[0];
  29. $(ele).find('.lis-icon-s').css('background-image','url("'+today.dayPictureUrl+'")');
  30. }
  31. });
  32. }
  33. appcan.ready(function(){
  34. appcan.frame.setBounce(0, function(type) {
  35. //$("#pullstatus"+type).html(!type?"开始下拉":"开始上拖");
  36. }, function(type) {
  37. //$("#pullstatus"+type).html(!type?"下拉超过临界点,产生事件了!":"超过临界点,产生事件了!");
  38. }, function(type) {
  39. $('.city-list li').each(function(i,v){
  40. var data = v.lv_data;
  41. if(!data){
  42. return;
  43. }
  44. updateInfo(encodeURI(data.title),v);
  45. });
  46. appcan.frame.resetBounce(type);
  47. })
  48. var lv = appcan.listview({
  49. selector : ".city-list",
  50. hasIcon : true,
  51. hasAngle : true
  52. });
  53. lv.set([{
  54. title : "北京",
  55. icon:"./css/res/appcan_s.png",
  56. icontitle : "",
  57. },
  58. {
  59. title : "南京",
  60. icon:"./css/res/appcan_s.png",
  61. icontitle : "",
  62. },
  63. {
  64. title : "杭州",
  65. icon:"./css/res/appcan_s.png",
  66. icontitle : "",
  67. },
  68. {
  69. title : "深圳",
  70. icon:"./css/res/appcan_s.png",
  71. icontitle : "",
  72. },
  73. {
  74. title : "上海",
  75. icon:"./css/res/appcan_s.png",
  76. icontitle : "",
  77. },
  78. {
  79. title : "三亚",
  80. icon:"./css/res/appcan_s.png",
  81. icontitle : "",
  82. },
  83. {
  84. title : "昆明",
  85. icon:"./css/res/appcan_s.png",
  86. icontitle : "",
  87. }]);
  88. function openDetail(city){
  89. appcan.window.open({
  90. name:'detail',
  91. data:'detail.html?'+city,
  92. aniId:10
  93. });
  94. appcan.locStorage.val('city',city);
  95. }
  96. lv.on('click', function(ele, obj, subobj) {
  97. openDetail(encodeURI(obj.title));
  98. });
  99. $('.city-list li').each(function(i,v){
  100. var data = v.lv_data;
  101. if(!data){
  102. return;
  103. }
  104. updateInfo(encodeURI(data.title),v);
  105. });
  106. })
  107. </script>
  108. </body>
  109. </html>

6)、新增天气详情页面detail.html、detail_content.html两个页面detail.html页面里面我们加一个标题和页尾,标题加一个返回按钮

  1. <!--header开始-->
  2. <div id="header" class="uh t-wh ub c-blu">
  3. <!- 返回按钮开始 -->
  4. <div class="nav-btn" id="nav-left">
  5. <div class="fa fa-arrow-left ulev2"></div>
  6. </div>
  7. <!- 返回按钮结束 -->
  8. <h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">
  9. <span class="detail-title"></span>
  10. </h1>
  11. <div class="nav-btn umw4 ub ub-ac ub-pc">
  12. </div>
  13. </div>
  14. <!--header结束--><!--content开始-->
  15. <div id="content" class="ub-f1 tx-l appCan ub-img4">
  16. </div>
  17. <!--content结束-->
  18. <!--footer-->
  19. <div id="footer" class="uinn-z1">
  20. <div class="tx-c t-93 ulev0 ufm1">www.appcan.cn</div>
  21. <div class="tx-c t-93 ulev-4 umar-at1">正益无线(北京)科技有限公司</div>
  22. </div>

7)、我们用button控件来给返回按钮加上事件

  1. appcan.button(".nav-btn", "btn-act", function() {
  2. appcan.window.close(-1);
  3. });

8)、获取当前城市并设置当前状态页面,标题的内容

  1. var city = appcan.locStorage.val('city');
  2. $('.detail-title').html(decodeURI(city)+'天气详情');

9)、现在添加城市天气详情页面,因为天气为三天的天气,所以我们这里可以用列表控件,先生成列表数据,三天天气都大致相同,我们定义一个模版。

  1. <script type="text/template" id="weather-tmp">
  2. <div class="day">
  3. <span class="temperature"><%-weather_data.temperature%></span>
  4. <div>
  5. <span><%-weather_data.wind%></span>
  6. <span><%-weather_data.weather%></span>
  7. </div>
  8. <span class="weather-pic">
  9. <img src="<%-weather_data.dayPictureUrl%>"><br>
  10. <span><%-weather_data.date%></span>
  11. </span>
  12. </div>
  13. </script>

10)、新增更新天气函数,来更新天气数据

  1. function updateForecast(weatherData){
  2. //生成列表模版
  3. var render = appcan.view.template($('#weather-tmp').html());
  4. var weatherList =[];
  5. //遍历整个数据渲染整个列表添加到数据中
  6. for(var i =0,len=weatherData.length;i<len;i++){
  7. var res = render({weather_data:weatherData[i]});
  8. weatherList.push({
  9. title:res
  10. });
  11. }
  12. //创建一个listview对象设置渲染的数据到列表中
  13. var lv = appcan.listview({
  14. selector : ".city-detail",
  15. hasIcon : false,
  16. hasAngle : false
  17. });
  18. lv.set(weatherList);
  19. }

11)、执行更新数据,在更新数据前先打开一个提示框表明正在加载数据,当数据加载成功删除提示框,把获取的数据传给更新列表函数进行渲染

  1. function updateInfo(city){
  2. //打开一个没有弹出框的toast
  3. appcan.window.openToast({
  4. msg:'加载天气数据...',
  5. duration:0,
  6. position:5,
  7. type:0
  8. });
  9. varweatherUrl = 'http://api.map.baidu.com/telematics/v3/weather?location='+city+'&output=json&ak=hTXrtTGGcljoOMdf2jZcc1yD';
  10. appcan.request.ajax({
  11. url:weatherUrl,
  12. type:'GET',
  13. dataType:"json",
  14. success: function(data){
  15. if(data.error){
  16. alert('获取天气出错');
  17. }else{
  18. varweatherData = data.results[0].weather_data;
  19. var today = weatherData[0];
  20. updateForecast(weatherData);
  21. }
  22. appcan.window.closeToast();
  23. }
  24. });
  25. }

12)初始化页面,获取传来的城市然后根据该城市更新页面数据

  1. appcan.ready(function(){
  2. appcan.initBounce();
  3. var city = appcan.locStorage.val('city');
  4. updateInfo(city);
  5. })

4、应用打包

开发完成打包应用有两种方式,一种是本地打包,一种是线上打包。

4.1、本地打包(仅供测试使用)

1)、点击发行

或者右键点击phone,然后点击生成安装包

2)、可以修改应用名称,上传图标,我们使用默认的然后点击下一步

3)、选择要生成的平台,启动画面点击下一步

4)、选择需要的插件然后点击完成。等待打包如果打包完成就会自动打开应用目录。

4.2、线上打包

1)、点击右键把代码提交的服务器

2)、选择要提交的文件。点击ok

3)、选择应用进入详情页面,并点击应用开发,进入应用开发页面

4)、点击应用打包,点击图标设置可以修改图标,点击启动页面可以修改启动页面,然后选择插件,证书,最后点击云端打包。

5)、选择平台和版本号,点击生成安装包。

6)、等待打包完成,可以下载生成的安装包了,点击下一步进入应用详情页面。

5、更多开发操作

详细查看平台服务专题。


以上信息是否解决您的问题?


免费注册,快速体验