Taro教程之相亲类微信小程序—09 tabBar组件开发
2019-03-01 本文已影响0人
老夫撸代码
微信公众号：老夫撸代码
本期提示：如何使用Taro如何开发一个TabBar组件
欢迎各位发际线后移的童鞋点赞、留言、转发、好看！
业务问题
上一期教程老夫主要讲的是如何接入阿里云的短信服务，至此个人信息已经收集完成了，我们需要将存放在Mobx中的数据保存到数据库，为做推荐页和个人中心做准备。
保存数据的时机
在我们获取手机号并且校验没有问题后，就可以将formStore中的数据保存，这里注意一定要有防错意识。
我们一般将一个流程确定后，需要额外考虑的是流程无法正常流转后应该怎样将流程拉回到既定的流程中去，大家思考以下的情形：
- 服务器宕机
- 网络不通
- 业务数据错误
- 服务器代码出现Bug
上述现象是开发人员经常遇到的问题，但是对于用户来说就2种感受：成功和失败。
成功的结果是我们每个程序员都喜闻乐见的事儿。
失败的结果是我们不愿意看到的事情。
但是，命运往往一般会给我们打开失败的大门、关上成功的大门、必定要经历一番头破血流的过程。
因此，在我们做了充分测试的前提下，异常以及错误的处理也应该是我们需要考虑的问题。
分析可能产生的错误
大型项目我们就不说了，我们只说现阶段的小程序项目。
这种前后分离的结构，我们也分为前端和后端来解决。
前端在产生错误后，我们给出客户合理提示后，将错误日志上传到服务器，后端产生错误后，我们要封装一下，然后将合理的提示反馈给用户。
保存formStore
小程序代码
/**
* 保存formstore用户信息
*/
saveUserinfo() {
const {
formStore: {
gender,
province,
city,
county,
year,
month,
day,
height,
education,
marriage,
income
}
} = this.props;
let data = {
gender: gender,
province: province,
city: city,
county: county,
year: year,
month: month,
day: day,
height: height,
education: education,
marriage: marriage,
income: income,
session3rd: Taro.getStorageSync("session3rd"),
}
/**
* 保存formStore到数据库
*/
Taro.request({
url: api.saveFormStore,
method: "POST",
data: data,
header: {
"content-type": "application/x-www-form-urlencoded" // 默认值
},
success: function (res) {
if(res.data.data == true){
Taro.redirectTo({
url:'/pages/comprehensive/comprehensive?i=0'
})
}else{
Taro.showToast({
title:'系统错误，请重试',
icon:'none'
})
}
},
fail: function (e) {
//TODO 此处可以将发生错误的数据，存储到数据库
console.log(e)
}
})
}
服务器端代码
/**
* 保存用户信息
*/
public function saveUserInfo() {
$params =[
"gender"=>$this->gender,
"province"=>$this->province,
"county"=>$this->county,
"year"=>$this->year,
"month"=>$this->month,
"day"=>$this->day,
"height"=>$this->height,
"education"=>$this->education,
"marriage"=>$this->marriage,
"income"=>$this->income,
"is_finish" => 1,
"createdAt"=>date('Y-m-d H:m:s')
];
$domain = new CoreDomain();
$res = $domain->getOpenidBySession3rd($this->session3rd);
$params = array_merge($params,array("openid" => $res['openid']));
$userDomain = new UserDomain();
try{
\PhalApi\DI()->logger->info("保存个人信息", $params );
$userDomain->saveUserInfo($params);
return true ;
}catch (Exception $e){
\PhalApi\DI()->logger->info("保存个人信息", $e->getMessage() );
return false;
}
}
代码解析：
- 小程序端代码会对服务器返回的接口进行判断，如何成功则跳转页面，如果失败则给出相应的提示
- 服务端代码通过try catch进行处理，只要发生异常就返回false,没有异常就返回true,将错误信息返回到小程序端是没有任何意义的，因为我们的所有提示是给用户看的,用户根本看不懂你的异常信息。
tabBar组件的开发
这里我们不使用小程序自带的tabBar,使用我们自己的写的组件。
为什么要重复造轮子了？
因为只有在造轮子的过程中，你才会碰到新的技术难点，才知道应该怎样去解决问题。
我们要做有挑战的事情，这样技术才会增长，一个人才会成长起来。
效果图如下：
WechatIMG105.jpeg
示例代码：
tabBar.js
import Taro, { Component } from "@tarojs/taro";
import './tabbar.less'
/**
* 底部tabbar
*/
class Tarbar extends Component{
state = {
tablist: [
{
text: '推荐',
class: 'recommend',
selectClass: 'c_recommend',
textClass: 'item_text_select'
},
{
text: '我的',
class: 'me',
selectClass: 'c_me',
textClass: 'item_text_select'
}
]
}
changeTab(i){
this.props.onChange(i)
}
render(){
return <View className='container'>
<View className='tab-bar'>
{
this.state.tablist.map((item,i) => {
return <View className='item' onClick={this.changeTab.bind(this,i)}>
<View className={'item_image ' + (this.props.tabindex == i ? item.selectClass : item.class) }></View>
<View className={'item_text ' + (this.props.tabindex == i && 'item_text_select') }>
{item.text}
</View>
</View>
})
}
</View>
</View>
}
}
export default Tarbar
......
......
关注微信公众号：老夫撸代码 回复数字 1010 获取完整教程以及代码仓库地址
老夫撸代码
