基于appcan平台開發一個簡單的手機app--登入注冊例子

打開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)
	@ResponseBody
	public 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)
	@ResponseBody
	public 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大功告成啦!