Hbuilder创建app

admin管理员组

文章数量:1586542

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

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('登录失败');
			}
		});
	};

本文标签： HBuilderapp