hbuilder这点事

公司要开发oa管理系统对应的手机端应用。此处使用hbuilder进行开发，在我浅薄的了解后发现hbuilder确实适合快速开发app。和以往需求不同的是，我们即将要开发的app页面样式是定制化的这就意味着mui对我们的作用不大。

之前在校期间接触过wex5，与hbuilder相比较不难发现wex5更灵活些。

hbuilder最大的优点应该是强大的js解析引擎了。

开始学习hbuilder：

第一条知识点线记录使用hbuilder开发的流程

1.了解hbuilder菜单栏工具栏且熟悉hbuilder入门教程后新建移动app

依次点击文件→新建→选择Web项目(按下Ctrl+N,W可以触发快速新建(MacOS请使用Command+N,然后左键点击Web项目))

2.了解hbuilder已经提供模板，此处使用mui登录模板

3.了解hbuilder项目结构（样式/js/font/ima/libs/页面）

就登录模板对hbuilder展开深层次的认识：

准备工作：使用手机进行调试  （自行安装sdk），手机运行后进行调试

登录页面：关键之处js部分

涉及功能：账号密码长度判断、注册注册账号、忘记密码、自动登录、登录

和常用js不同之处：

(function($, doc) {}(mui, document));//页面加载完成后执行

$.init({});       //初始化

$.plusReady(function() {})//准备工作

plus.screen.lockOrientation("portrait-primary");

var state = app.getState();
var mainPage = $.preload({      //通过json格式定义登录成功后要跳转页面
"id": 'main',
"url": 'main.html'
});
var main_loaded_flag = false; //声明变量用于判断页面中load事件是否触发
mainPage.addEventListener("loaded",function () {   
main_loaded_flag = true;
});
var toMain = function() { //登录成功后跳转页面
//使用定时器的原因：
//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
var id = setInterval(function () {
if(main_loaded_flag){
clearInterval(id);
$.fire(mainPage, 'show', null);
mainPage.show("pop-in");
}},20);
};

//检查 "登录状态/锁屏状态" 开始  

//settings.autoLogin：是否选择自动登录   

//state.token：是否登录

//settings.gestures：是否设置锁屏图案
if (settings.autoLogin && state.token && settings.gestures) {
    $.openWindow({
url: 'unlock.html',
id: 'unlock',
show: {
aniShow: 'pop-in'
},
waiting: {
autoShow: false
}
});
} else if (settings.autoLogin && state.token) {
toMain();
} else {
app.setState(null);
//第三方登录
var authBtns = ['qihoo', 'weixin', 'sinaweibo', 'qq']; //配置业务支持的第三方登录
var auths = {};
var oauthArea = doc.querySelector('.oauth-area');
plus.oauth.getServices(function(services) {
for (var i in services) {
var service = services[i];
auths[service.id] = service;
if (~authBtns.indexOf(service.id)) {
var isInstalled = app.isInstalled(service.id);
var btn = document.createElement('div');
//如果微信未安装，则为不启用状态
btn.setAttribute('class', 'oauth-btn' + (!isInstalled && service.id === 'weixin' ? (' disabled') : ''));
btn.authId = service.id;
btn.style.backgroundImage = 'url("images/' + service.id + '.png")'
oauthArea.appendChild(btn);
}
}
$(oauthArea).on('tap', '.oauth-btn', function() {
if (this.classList.contains('disabled')) {
plus.nativeUI.toast('您尚未安装微信客户端');
return;
}
var auth = auths[this.authId];
var waiting = plus.nativeUI.showWaiting();
auth.login(function() {
waiting.close();
plus.nativeUI.toast("登录认证成功");
auth.getUserInfo(function() {
plus.nativeUI.toast("获取用户信息成功");
var name = auth.userInfo.nickname || auth.userInfo.name;
app.createState(name, function() {
toMain();
});
}, function(e) {
plus.nativeUI.toast("获取用户信息失败：" + e.message);
});
}, function(e) {
waiting.close();
plus.nativeUI.toast("登录认证失败：" + e.message);
});
});
}, function(e) {
oauthArea.style.display = 'none';
plus.nativeUI.toast("获取登录认证失败：" + e.message);
});
}

//获取按钮和输入框，分别绑定事件：

var loginButton = doc.getElementById('login');
var accountBox = doc.getElementById('account');
var passwordBox = doc.getElementById('password');
var autoLoginButton = doc.getElementById("autoLogin");
var regButton = doc.getElementById('reg');
var forgetButton = doc.getElementById('forgetPassword');

//登录按钮事件

loginButton.addEventListener('tap', function(event) {
var loginInfo = {
account: accountBox.value,
password: passwordBox.value
};
app.login(loginInfo, function(err) {//调用app.js中的登录方法，将用户名密码以//json的格式传过去，如果返回err，登录失败，验证通过执行前面提到的main方法，跳转到main.html页面
if (err) {
plus.nativeUI.toast(err);
return;
}
toMain();
});
});

//判断获取焦点 当焦点进入对象时，发生该事件。对象本身可以接收焦点，或者子控件可以接收焦点。

$.enterfocus('#login-form input', function() {
$.trigger(loginButton, 'tap');
});

//自动登录按钮绑定事件

autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')
autoLoginButton.addEventListener('toggle', function(event) {
setTimeout(function() {
var isActive = event.detail.isActive;
settings.autoLogin = isActive;
app.setSettings(settings);
}, 50);
}, false);

//注册按钮绑定事件

regButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'reg.html',
id: 'reg',
preload: true,
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
}, false);

//忘记密码绑定事件

forgetButton.addEventListener('tap', function(event) {
$.openWindow({
url: 'forget_password.html',
id: 'forget_password',
preload: true,
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
}, false);

//窗体监听事件  添加样式

window.addEventListener('resize', function() {
oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
}, false);
//点击手机home键的监听事件
var backButtonPress = 0;
$.back = function(event) {
backButtonPress++;
if (backButtonPress > 1) {
plus.runtime.quit();
} else {
plus.nativeUI.toast('再按一次退出应用');
}
setTimeout(function() {
backButtonPress = 0;
}, 1000);
return false;
};

实际开发中我们涉及的登录功能也就包括这些功能，这个登录模板涉及的功能还是很全面的。再看一下登录成功后跳转的main.html页面涉及内容：

除基本style、body体之外涉及的功能包括：点击设置按钮事件

$.plusReady(function() {
var settingPage = $.preload({//设置跳转页面内容
"id": 'setting',
"url": 'setting.html'
});
//点击事件
var settingButton = doc.getElementById('setting');
settingButton.addEventListener('tap', function(event) {
$.openWindow({
id: 'setting',
show: {
aniShow: 'pop-in'
},
styles: {
popGesture: 'hide'
},
waiting: {
autoShow: false
}
});
});

通过对这两个页面的掌握，基本的规则也都了解了，先去开发试试