开发环境

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属性

<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();
})
在它下面复制以下代码

         //这里是按钮事件#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();
        })