AppCan之登录功能001

开发环境

1.mac系统
2.AppCan集成开发工具Mac版本

开发过程

1.新建AppCan项目,选择空模板

07270177-406B-4068-8F59-7FB25D9E916A.png

2.右键点击index.html预览，会在模拟器打开

3.修改标题，就在index.html中修改AppCan变为登录

4.鼠标输入放在index_content.html的body下，点击菜单栏中的AppCan，文本输入，选择登录表单，就会自动生成代码

修改下文字，文本框和按钮增加id属性

  

      

          

              

              
          
      
      

          

              

              
          
      
  
  

      

          

          登录
      
  
  

C8B303C0-A6CC-4E4E-9A4D-7D4F2A3578D6.png

5.增加按钮点击事件
找到这一段
appcan.ready(function() {
appcan.initBounce();
})
在它下面复制以下代码

         //这里是按钮事件#submit是按钮的id,ani-act是动画效果
          appcan.button("#submit", "ani-act", function() {
           console.log('按钮点击');  
        })

右键预览index.html文件，然后右键点击审查元素，再弹出的界面，选择console，进入控制台窗口

DB8DAD3D-D58E-46F5-87C3-22C1ECEFA128.png

点击按钮，就会看到有提示输出。

6.新建AppCan页面，选择空模板，内容也为空，my.html

7.添加一个方法，用来做网络请求，登录验证，成功就跳转到主页面my.html

   //登录功能
function login(){
var phone = $("#phone").val();//根据文本框id
var password = $("#pwd").val();//根据文本框id
 
//数据请求
 
 appcan.request.ajax({
 url:'http://这是你自己的网络后台接口/sqlOperation.php?username='+phone+'&password='+password+'&operation=login',
 type:'get',
 dataType:'json',
 success:function(data,status,xhr){
       console.log(data.userName);//根据后台接口返回的字段，一定要有userName
         //页面跳转
         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();
        })