Hbuilder创建app

1、第一步当然先下载Hbuilder,创建移动app,创建时选择mui登录模板

Hbuilder创建app_第1张图片

2、项目建成功,直接运行Ctrl+R看看hello word效果。然而最难搞的还是真机调试,我用的小米,折腾了好久,提示联机不上,要安装手机助手。一点默认链接,果不其然,最讨厌的360流氓来了,给我pc端装手机助手,然并卵还是联不上,又让我在手机上安装手机助手,也没用,流氓就是流氓半点用都没,一股脑把360都卸载了。把Hbuilder自带的手机助手用数据线拷贝上去安装。再联机OK,心酸啊。

3、联机成功后,在手机上就可以看到效果,不错我要的都有demo。下一步就是要和web api联机调试了。找到项目文件目录js中app.js里面就是关于登录的js代码,都是本地数据读取没有访问数据库。访问数据库还是老办法ajax了,在mui里,为了表示他的nb,封装了mui.ajax,mui.getJSON一堆,其实也就是jquery. 言归正传,看代码:

(function($, owner) {
	/**
	 * 用户登录
	 **/
	owner.login = function(loginInfo, callback) {
		callback = callback || $.noop;
		loginInfo = loginInfo || {};
		loginInfo.account = loginInfo.account || '';
		loginInfo.password = loginInfo.password || '';
		if (loginInfo.account.length == 0) {
			return callback('请输入登录账号!');
		}
		if (loginInfo.password.length == 0) {
			return callback('请输入登录密码!');
		}		
		
		
		var users = JSON.parse(localStorage.getItem('$users') || '[]');
		var authed = users.some(function(user) {
			return loginInfo.account == user.account && loginInfo.password == user.password;
		});
		if (authed) {
			return owner.createState(loginInfo.account, callback);
		} else {
			return callback('用户名或密码错误');
		}
		*/
		var url='http://192.168.1.168:7778/api/values/'+loginInfo.account;
		
		/*
		mui.getJSON(url,function(response){
			var d = JSON.stringify(response);
			var j = JSON.parse(response);
            alert("学号:"+j[0].uname);
 
         });
         */			
			
		mui.ajax(url,{			
			dataType:'json',//服务器返回json格式数据
			type:'get',//HTTP请求类型
			timeout:2000,//超时时间设置为2秒;
			success:function(data){
				//服务器返回响应,根据响应结果,分析是否登录成功;
				var userInfo = JSON.parse(data);
				if(userInfo.length == 1)
				{
					if(userInfo[0].pwd == loginInfo.password)
					{
						//return callback('登录成功,用户名:'+userInfo[0].uname );
						return owner.createState(loginInfo.account, callback);
					}
					else 
						return callback('您输入的密码不对,请核对后重新输入!');
				}else
				{
					return callback('用户'+loginInfo.account+'不存在,请核对后重新输入!');					
				}
			},
			error:function(xhr,type,errorThrown){
				//异常处理;
				return callback('登录失败');
			}
		});
	};



你可能感兴趣的:(Hbuilder创建app)