基于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大功告成啦!