一、建立注册页面
1.首先打开APICloudStudio,新建apicloud项目，选择空百应用。
2.然后写注册页面，截图如下:
注册页面.jpg
二、加载短信模块和使用短信验证码功能
var isinerval, times;
var smsVerify = null;
apiready = function() {
api.parseTapmode();
smsVerify = api.require('smsVerify');
// 初始化
register();
}
// 注册，初始化
function register() {
smsVerify.register(function(ret, err) {
if (ret.status) {
//api.alert({msg: '注册成功'});
console.log('注册成功');
} else {
api.alert({
msg : err.code + ' 注册失败'
});
}
});
}
// 发短信验证码
function sms() {
var mobile = document.getElementById("mobile").value;
smsVerify.sms({
phone : mobile,
}, function(ret, err) {
if (ret.status) {
// 新增的安卓智能验证功能
api.alert({
msg : '短信发送成功'
});
var sendVerify = $api.byId('sendVerify');
var status = $api.attr(sendVerify, 'status');
if (status != 1) {
return;
}
$api.removeAttr(sendVerify, 'onclick');
api.parseTapmode();
$api.html(sendVerify, '<span id="GetVerify">20</span>S');
times = 19;
isinerval = setInterval("CountDown()", 1000);
} else {
api.alert({
msg : err.code + ' 短信发送失败'
});
}
});
}
二、注册页面功能实现
1.当点击下一步的时候判断手机号 和验证码，密码，和确认密码的是否为空.
写if判断
function next() {
var mobile = $api.byId('mobile').value;
var password = $api.byId("password").value;
var password2 = $api.byId("password2").value;
var code = $api.byId("code").value;
if ($api.byId('mobile').value.length == 0) {
$api.byId('mobile').focus();
api.toast({
msg : '手机号不能为空!'
});
return;
} else if ($api.byId('code').value.length == 0) {
$api.byId('code').focus();
api.toast({
msg : '请输入验证码!'
});
return;
} else if ($api.byId('password').value.length == 0) {
$api.byId('password').focus();
api.toast({
msg : '密码不能为空!'
});
return;
} else if ($api.byId('password2').value.length == 0) {
$api.byId('password2').focus();
api.toast({
msg : '请输入确认密码!'
});
return;
} else if ($api.byId('password').value != $api.byId('password2').value) {
$api.byId('password').focus();
api.toast({
msg : '两次密码不一致，请重新输入!'
});
return;
}
2.当验证码等信息输入正确后，会向服务器发起ajax,然后数据库里插入注册的数据,具体代码如下;
//html端代码
api.ajax({
url : 'xxl',
method : 'post',
cache : false,
timeout : 30,
dataType : 'json',
data : {
values : {
mobile : mobile,
password : password
}
}
}, function(ret, err) {
if (ret.msg == 1) {
//存储新注册的用户id到本地storage中
$api.setStorage('user_id', ret.id);
alert('注册成功')
} else {
api.alert({
msg : ('错误码：' + err.code + '；错误信息：' + err.msg + '网络状态码：' + err.statusCode)
});
};
});
//服务端代码
public function index() {
// echo "获取数据中";
$mobile=json_decode($_POST['mobile']);
$password=json_decode($_POST['password']);
$users_model=M("Users");
$where['mobile']=$mobile;
$result=$users_model->where($where)->count();
if($result){
$res=array('msg'=>"手机号已经被注册");
echo json_encode($res);
}else{
$data=array(
'user_login' => '',
'user_email' => '',
'mobile' =>$mobile,
'user_nicename' =>'',
'user_pass' => sp_password($password),
'last_login_ip' => '',
'create_time' => date("Y-m-d H:i:s"),
'last_login_time' => date("Y-m-d H:i:s"),
'user_status' => 1,
"user_type"=>2,//会员
);
$rst = $users_model->add($data);
if($rst){
//注册成功后页面跳转
$res=array('msg'=>1,'id'=>$rst);
echo json_encode($res);
}else{
$res=array('msg'=>"注册失败");
echo json_encode($res);
}
}
}
三、 短信功能的实现步骤
1、先去mob官网注册帐号；
2、进入短信管理后台分别添加Android和iOS应用，并获取应用的AppKey和AppSecret（老以前创建的应用不能使用此模块，因为此模块SDK为2.0+，不兼容SDK1.x时代创建的应用。）；
3、在APICloud应用控制台的模块列表里搜索smsVerify并添加；
4、以源码方式打开你的项目config.xml文件，在里面添加smsVerify模块的配置，配置内容为上面获取的AppKey和AppSecret，格式如下：
1. <feature name="smsVerify">
2. <param name="android_app_key" value="xxl"/>
3. <param name="android_app_secret" value="xxl"/>
4. <param name="ios_app_key" value="xxl"/>
5. <param name="ios_app_secret" value="xxl"/>
6. </feature>
5、SVN提交源码到APICloud的云端；
6、在 APICloud Studio 上编译自定义loader；
7、现在你就可以使用smsVerify模块进行开发了，不过需要注意的是，<font color="#ff0000" style="word-wrap: break-word;">在调用sms、voice、verify这三个接口前，必须先调用register接口注册应用（调用一次就行了）；</font>
8、新版的smsVerify模块（1.1.0及以上）sms接口Android上支持“智能验证”功能，可以通过回调中的 smart 参数的 true|false 进行判断，由于iOS不支持此功能，所以在iOS上 smart 永远返回false。智能验证不会下发短信，通过智能验证的手机号开发者可以直接让用户跳转到验证成功的界面；
PS：验证码的有效时长是5分钟。
<font size="4" style="word-wrap: break-word;"><font color="#ff0000" style="word-wrap: break-word;">另外：iOS版上架的注意事项请看下面链接：</font></font>
http://bbs.mob.com/forum.php?mod=viewthread&tid=20580
http://wiki.mob.com/idfa%E7%9A%8 ... %E5%AE%A1%E6%A0%B8/
网友评论