開發(fā)環(huán)境
1.mac系統(tǒng)
2.AppCan集成開發(fā)工具Mac版本
開發(fā)過程
1.新建AppCan項目,選擇空模板
07270177-406B-4068-8F59-7FB25D9E916A.png
2.右鍵點擊index.html預(yù)覽伙窃，會在模擬器打開
3.修改標(biāo)題尊搬，就在index.html中修改AppCan變?yōu)榈卿?/p>
4.鼠標(biāo)輸入放在index_content.html的body下洋丐，點擊菜單欄中的AppCan壁查，文本輸入，選擇登錄表單农曲，就會自動生成代碼
修改下文字援奢，文本框和按鈕增加id屬性
<form method="get" action="">
<div class="umar-a uba bc-border">
<div class="ub ub-ac ubb umh5 bc-border ">
<div class=" uinput ub ub-f1">
<div class="uinn fa fa-user sc-text"></div>
<input placeholder="手機/郵箱/用戶名" type="text" class="ub-f1" id="phone">
</div>
</div>
<div class="ub ub-ac umh5 bc-border ">
<div class=" uinput ub ub-f1">
<div class="uinn fa fa-lock sc-text"></div>
<input placeholder="請輸入密碼" type="password" class="umw4 ub-f1" id="pwd">
</div>
</div>
</div>
<div class="uinn">
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn uc-a1" id="submit">
<div class="uinn3 fa fa-shield umh1 umw1" id="submit"></div>
登錄
</div>
</div>
<button type="submit"class="uinvisible"></button>
</form>
C8B303C0-A6CC-4E4E-9A4D-7D4F2A3578D6.png
5.增加按鈕點擊事件
找到這一段
appcan.ready(function() {
appcan.initBounce();
})
在它下面復(fù)制以下代碼
//這里是按鈕事件#submit是按鈕的id,ani-act是動畫效果
appcan.button("#submit", "ani-act", function() {
console.log('按鈕點擊');
})
右鍵預(yù)覽index.html文件，然后右鍵點擊審查元素珍语，再彈出的界面锤岸，選擇console，進入控制臺窗口
DB8DAD3D-D58E-46F5-87C3-22C1ECEFA128.png
點擊按鈕板乙，就會看到有提示輸出是偷。
6.新建AppCan頁面，選擇空模板募逞，內(nèi)容也為空蛋铆，my.html
7.添加一個方法，用來做網(wǎng)絡(luò)請求放接，登錄驗證刺啦，成功就跳轉(zhuǎn)到主頁面my.html
//登錄功能
function login(){
var phone = $("#phone").val();//根據(jù)文本框id
var password = $("#pwd").val();//根據(jù)文本框id
//數(shù)據(jù)請求
appcan.request.ajax({
url:'http://這是你自己的網(wǎng)絡(luò)后臺接口/sqlOperation.php?username='+phone+'&password='+password+'&operation=login',
type:'get',
dataType:'json',
success:function(data,status,xhr){
console.log(data.userName);//根據(jù)后臺接口返回的字段，一定要有userName
//頁面跳轉(zhuǎn)
appcan.window.open({
name:'my',
data:'my.html',
aniId:10
})
},
error:function(xhr,status,errMessage){
console.log('error');
}
});
};
修改按鈕事件
//這里是按鈕事件#submit是按鈕的id,ani-act是動畫效果
appcan.button("#submit", "ani-act", function() {
// console.log('按鈕點擊');
login();
})
