appcan从前端到接口获取数据流程

appcan从前端到接口获取数据流程

对于刚接触appcan的平台,很多人用起来肯定不是很熟悉,今天就写一个获取QQ在线状态的app

首先我们要下载appcan IDE,

新建一个项目

appcan从前端到接口获取数据流程

appcan从前端到接口获取数据流程

接下来选择内置模版

appcan从前端到接口获取数据流程

appcan从前端到接口获取数据流程

项目名称,应用名称。随便

应用id,不可以出现字母

选择空模板

appcan从前端到接口获取数据流程

我建的名字为qq_appcan

生成的就是上面的这个样子

我们要编辑的是index和index_content

css自己新建,就js就直接写在页面中,因为我们的js比较少

用appcan的样式可以

自己写也可以

因为比较简单,直接上代码

js代码

 appcan.ready(function() {
            var titHeight = $('#header').offset().height;
            appcan.frame.open("content", "index_content.html", 0, titHeight);
            window.onorientationchange = window.onresize = function() {
                appcan.frame.resize("content", 0, titHeight);
            }
        });
        appcan.button(".nav-btn", "btn-act", function() {
            appcan.window.close(-1);
        })

上面的是index里面的,没什么东西
下面的是显示

js代码

 appcan.ready(function() {
        });
        appcan.button("#btn2", "ani-act", function() {

            var mobile = $("#inputval").val();
            
            appcan.request.<a href="http://www.ldhblog.com/tag/ajax/" title="查看与 ajax 相关的文章"target="_blank">ajax</a>({
                type : "POST",
                url : "http://192.168.56.1:8084/qqmobile_v/qqmobile_qq",
                timeout : "2000",
                datatype : "json",
                
                data : {
                    "qqCode" : mobile
                },
                success : function(data, status, requestCode, response, xhr) {
                    //console.log(data);  
                    //console.log(retStr);                                     
                   data=data.substring(data.length-10,data.length-9);
                   console.log(data);
       
                    if(data=="Y"){
                        $("#xs").html(mobile+":在线");
                    }else if(data=="N"){
                        $("#xs").html(mobile+":离线");
                    }else if(data=="E"){
                        $("#xs").html(mobile+"QQ号码错误");
                    }
                },
                error : function(xhr, erroType, error, msg) {
                    alert("error:" + msg);
                }
            });
        });
        

发送ajax请求
这里我们开始写mas
还是新建项目》》服务

appcan从前端到接口获取数据流程

appcan从前端到接口获取数据流程

这就算完成了一步,接下来在他的基础上建个工程

appcan从前端到接口获取数据流程

appcan从前端到接口获取数据流程

离成功就差几步了

在工程上建个接口右键》新建》ajax接口

appcan从前端到接口获取数据流程

建完以后,层级关系如下

appcan从前端到接口获取数据流程

我们编辑红框的文件

var MEAP=require("meap");

function run(Param, Robot, Request, Response, IF)
{
	
	var option={
        method : "POST",
        url : "http://ws.<a href="http://www.ldhblog.com/tag/web/" title="查看与 web 相关的文章"target="_blank">web</a>xml.com.cn/<a href="http://www.ldhblog.com/tag/web/" title="查看与 web 相关的文章"target="_blank">web</a>services/qqOnlineWebService.asmx/qqCheckOnline",
        Enctype:"application/x-www-form-urlencoded",
        Body:{
            "qqCode":Param.fields.qqCode,
            "userID":""
        }
    };
    Response.setHeader("Content-type","application/json;charset=utf-8");
	MEAP.AJAX.Runner(option,function(err,res,data){
	    if(!err)
	    {
			//Add your normal handling code
            Response.end(data);
	    }
	    else
	    {
			//Add your exception handling code 
            Response.end(JSON.stringify({status:-1, message:"Error"})); 
	    }
	},Robot);
}
exports.Runner = run;


就这几行代码
最后效果如下

appcan从前端到接口获取数据流程

然后我们运行mas
右键点击》运行
appcan从前端到接口获取数据流程这样我们就可以运行了,

appcan从前端到接口获取数据流程

这是比较简单的,难的还在学习中!
有什么好的意见,可以提出来!下面是以上的整体demo
app
appcanhtml
mas
apcanmas
 

李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:21   其中:访客  14   博主  7

  1. avatar 记忆 5

    还可以

  2. avatar 发软文就找松松软文 2

    软文的好处就是过了很久在百度搜索您的文章还一直都在,话不多说!有要发布软文的就找松松软文!

  3. avatar 江太公公号网赚引流 2

    我曹就这写了那么长一段代码。

  4. avatar 奇虎分享网 5

    过来看看你的博客,希望每天都更新一些文章。

  5. avatar 小易分享网 5

    不错学习了,谢谢分享! http://www.xevip.cn

  6. avatar 乐赚168赚钱博客 3

  7. avatar VIP灵儿网 5

    过来看看你的博客,希望每天都更新一些文章。 http://www.viplinger.cn

  8. avatar 整形视频 2

    不错不错

  9. avatar 整形医生 1

    这个是端口吗

  10. avatar 助美整形网 2

    看的有点复杂

  11. avatar 小易分享网 5

    不错学习了,谢谢分享! 欢迎回访:http://www.3gwb.com

  12. avatar www.tmcore.com 5

    过来看看你的博客,希望每天都更新一些文章。 欢迎回访:www.tmcore.com