打開appcan進入開發者中心注冊并登陸AppCan應用管理系統

1.點擊創建應用：(選擇的是hybrid)

2.下載開發工具點擊打開鏈接

具體可以看這里點擊打開鏈接

3.應用開發

1）右擊phone這個文件新建->appcan頁面，這里有一些模塊供選擇，我們先創建一個主頁面起名main：

創建完成之后phone下面會生成一個main文件夾及main.html

2）打開main.html文件，我們可以點擊實時預覽

右邊將出現我們說創建的頁面預覽效果

根據需要進行修改

3）接下來將對個人中心進行開發實現

a.給個人中心這個div添加一個id="userInfo"

b.點開main/js/mian.js文件，添加點擊事件，點擊打開登錄頁面

appcan.button("#userInfo", "btn-act",function() {appcan.window.open({name:'login',data:'login.html',aniId:10})});說明：data為跳轉頁面，aniId為以何種方式效果跳轉具體可參考 點擊打開鏈接

c.下面我們先來添加登錄頁面取名login：

一樣是新增一個appcan頁面，具體哪個看你喜歡了

d.先給后退按鈕添加一個點擊事件，點擊返回主頁面main

修改login/js/login.js統計如下代碼：

appcan.button("#nav-left", "btn-act",function() {appcan.window.open({name:"main",data:"main.html",aniId:9})});e.ok這樣的話就可以點擊個人中心進入登錄頁面，點擊返回返回主頁面了

f.給“立即注冊”點擊注冊事件，先新增一個appcan頁面，和以上操作一樣，不贅述,取名register

g.login/js/login.js添加注冊點擊事件：

//打開注冊窗口appcan.button("#openrg", "ani-act", function() {appcan.window.open({name : 'register',data : 'register.html',aniId : 10})})說明：#openrg對應立即注冊div的id
h.添加個人中心頁面取名userInfo,與上面操作差不多，不贅述

4）下面對注冊頁面進行開發

a.打開register/js/register.js添加如下代碼

function register() {var name = $("#name").val();var pwd = $("#pwd").val();var r_pwd = $("#r_pwd").val();if (pwd != r_pwd) {appcan.window.openToast("兩次密碼不一致", 3000, 5, 0)} else {appcan.request.ajax({url : "http://192.168.43.42:8080/springMVC/login/register/" + name + "/" + pwd,type : 'get',dataType : 'json',success : function(ret, status, xhr) {if (ret.status == "1") {appcan.window.alert({title : "提示",content : '注冊成功',buttons : ["確認", "取消"],callback : function(err, data, dataType, optid) {//成功后回調，跳轉到登錄頁面if (data == 0) {//0代表對應第一個按鈕確認appcan.window.open({name : "login",data : "login.html",aniId : 10})}}})} else {appcan.window.openToast(ret.message, 3000, 5, 0)}},error : function(xhr, type) {appcan.window.open()}})}}說明：先個各個輸入框添加對應id="name",pwd,r_pwd
b.調用register()函數

appcan.button("#submit", "ani-act", function() {register();})c.對應服務端實現代碼，我用的是springmvc來實現注冊接口：

@RequestMapping(value="/register/{name}/{pwd}",method=RequestMethod.GET)@ResponseBodypublic Map<String,Object> register(@PathVariable("name")String name, @PathVariable("pwd")String pwd){User user = new User();user.setUsername(name);user.setPassword(pwd);boolean bool = userservice.insertUser(user);Map<String,Object>map = new HashMap<String,Object>();if(bool){map.put("status", "1");}else{map.put("message", "注冊失敗");}return map;}d.實時預覽效果如下：

當輸入密碼不一致時：

當注冊成功時：

5）下面對登錄頁面進行具體實現：

a.打開login/js/login.js添加代碼如下：

//登錄function login() {var name= $("#name").val();var pwd = $("#pwd").val();if (name== '' || pwd == '') {appcan.window.openToast("請輸入正確的賬號及密碼", 3000, 5, 0);} else {appcan.request.ajax({url : "http://192.168.43.42:8080/springMVC/login/login/" + name+ "/" + pwd,type : "post",dataType : "json",success : function(ret, status, xhr) {if (ret.status == "1") {var name = ret.user.username;var id = ret.user.id;//數據存儲本地appcan.locStorage.setVal("userId", id);appcan.locStorage.setVal("userName", name);//appcan.locStorage.remove("userName");appcan.window.open({name : "userInfo",data : "userInfo.html",aniId : 10})} else {appcan.window.openToast(ret.message, 3000, 5, 0)}},error : function(xhr, type) {appcan.window.openToast("系統出錯", 3000, 5, 0);}})}}說明：#name及#pwd對應各輸入框id,自行添加
b.調用登錄login()函數

appcan.button("#submit", "ani-act", function() {login();})c.對應服務端接口實現：

@RequestMapping(value="/login/{acno}/{pwd}",method=RequestMethod.POST)@ResponseBodypublic Map<String,Object> login(@PathVariable("acno")String acno, @PathVariable("pwd")String pwd){User user=userservice.getUserByName(acno);Map<String,Object>map = new HashMap<String,Object>();if(user!=null){String r_pwd = user.getPassword();if(r_pwd.equals(pwd)){map.put("status", "1");map.put("user",user);}else{map.put("message", "請輸入正確的密碼");}}else{map.put("message", "請輸入正確的賬號");}return map;}
d.實時預覽效果如下：

密碼出錯情況：

登錄成功后則跳轉到個人中心頁面
6）個人中心頁面具體實現：

打開userInfo/js/userInfo.js：

a.修改以下代碼為

lv1.set([{icon : 'userInfo/css/myImg/myImg6.png',title : '<div class="ub"><div class="umar-ar3" id="userName">userName</div><div class="sc-bg-alert uc-a1 uinn3 ulev-2 bc-text-head">V<span class="ulev-2">2</span>會員</div></div>',describe : '<div class="ulev-1 sc-text1 uinn3" id="acno">帳號:</div>'}]);b.添加頁面加載事件：

appcan.ready(function() {var userName = appcan.locStorage.getVal("userName");$("#userName").html(userName);$("#acno").text("賬號："+userName);})c.ok這樣的話登錄成功后跳轉到該頁面，然后獲取我們前面存儲的數據

7）整理，對左側導航欄的個人中心進行判斷，當用戶登錄過則直接跳轉到個人中心頁面，或者跳轉到登錄頁面：

a.修改main/js/main.js

appcan.button("#userInfo", "btn-act",function() {var name = appcan.locStorage.getVal("userName");if(name==''||name==null){appcan.window.open({name:'login',data:'login.html',aniId:10})}else{appcan.window.open({name:"userInfo",data:"userInfo.html",aniId:10})}});b.補充一點，把congfig這里修改起始頁面為main.html
4.在線打包測試

1）提交代碼，右擊項目->team->提交

2）進入應用管理界面打包應用：

說明：點擊生成安裝包，這步需要排隊等候
3）掃碼下載到手機，注意：電腦和手機要在同一個局域網內，不然服務端鏈接不上

ok大功告成啦!

總結

以上是生活随笔為你收集整理的基于appcan平台开发一个简单的手机app--登录注册例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。