转载

[学习笔记] Cordova+AmazeUI+React 做个通讯录 - 联系人详情

[学习笔记] Cordova+AmazeUI+React 做个通讯录 系列文章目录

  • Cordova+AmazeUI+React 做个通讯录 - 准备

  • Cordova+AmazeUI+React 做个通讯录 - 联系人列表(1)

  • Cordova+AmazeUI+React 做个通讯录 - 联系人列表(2)

  • Cordova+AmazeUI+React 做个通讯录 - 联系人详情

前面已经完成了联系人列表,然而似乎与 Cordova 没啥关系,随便找个 Web 服务器就可以跑。那么标题上的 Cordova 就只是一个简单的 Web 窗口而已么?

当然不是,目前我们的数据是保存在 json 文件中的,以后会放在数据库中,以便于实现数据的增删改。数据库选用 SQLite,操作 SQLite 必须使用 Android 提供的一些 API,这时候就需要通过 Cordova 的插件来实现了。甚至再往后添加二维码等功能,都需要用到 Cordova。但是 Cordova 的 API 参与了开发之后,调试时就要部署在手机上进行了,操作多有不变,所以先处理前端不需要 Cordova 的部分,待前端成熟之后再来连接 Cordova。

详情页面

联系人列表完成之后,现在开始考虑详情页面。之所以需要详情页面,是因为还有一些不便于在列表中展示的信息(列表项显示范围有限),所以再在测试数据中添加更多的字段,比如性别、城市等

规划

详情页面写在 detail.html 中,对应的在 js 目录中创建一个 detail.jsx 保存 React 组件和脚本。样式表暂时仍然使用 index.css,在里面添加详情页面所需要的样式。所以新的 www 目录结构会是这样

[学习笔记] Cordova+AmazeUI+React 做个通讯录 - 联系人详情

详情页面仍然需要显示一个页头,标题就是姓名。之后的内容仍然用列表显示。用 HTML 表示大概会像这样

<ul>  <li>   <span class="label">姓名</span>   <span>张三</span>  </li>  <li>   <span class="label">电话</span>   <span>13801234567</span>  </li>  <li>   <span class="label">性别</span>   <span>男</span>  </li>  <li>   <span class="label">城市</span>   <span>四川省绵阳市</span>  </li> </ul> 

代码

detail.html

detail.html 的代码和 index.html 几乎一样,唯一的区别是

    <script type="text/jsx" src="js/index.jsx"></script>

换成了

    <script type="text/jsx" src="js/detail.jsx"></script>

detail.jsx

detail.jsx 中主要定义 3 个组件

  1. Detail 组件渲染联系人信息详情列表

  2. DetailItem 组件渲染联系某一项信息的内容

  3. Page 组件渲染页面内容,包括页头和 Detail 组件等

因为是静态页面,不能处理 GET 或 POST 参数,所以由地址栏的 HASH 传递联系人的 ID 参数,再在页面中通过 AJAX 获取数据,筛选出该详情页面需要显示的联系人信息。而数据获取就由 Page 组件处理(处理过程参考 index.jsx 中的 Page 组件。

之后由 Page 通过属性方式向 Detail 传递联系人数据;而 Detail 则拆分数据项,仍然通过 props 方式,逐项向 DetailItem 传递数据。

在容错方面,为了简化处理过程,如果没能取得联系人数据,则用一个姓名叫“查无此人”的默认的联系人数据代替。

定义 Detail 组件

var Detail = React.createClass({  render: function() {   var person = this.props.person;   return (    <A.List data-id={person.id}>     <DetailItem label="姓名" value={person.name} />     <DetailItem label="电话" value={person.tel} />     <DetailItem label="性别" value={person.isMan ? "男" : "女"} />     <DetailItem label="城市" value={person.city} />    </A.List>   );  } }); 

注意,这里在 <A.List> 中传入了一个 data-id 属性,这个属性在作为 React 对象属性的同时,也会以标签属性形式渲染到 HTML 中——React 会把 data- 前缀的属性直接渲染为 HTML 标签属性。

DetailItem 组件

var DetailItem = React.createClass({  render: function() {   return (    <A.ListItem>     <span className="label">{this.props.label}</span>     <span>{this.props.value}</span>    </A.ListItem>   );  } }); 

这个组件没什么悬念,只是直接把 label 的文本显示出来而已。

Page 组件

var Page = React.createClass({  defaultPerson: {   id: "0000",   name: "查无此人",   phone: "00000000000"  },  getInitialState: function() {   return {    person: null   };  },  componentDidMount: function() {   $.getJSON("/js/data.json").then(function(data) {    if (this.isMounted()) {     this.setState({      person: data.filter(function(p) {       return "#" + p.id === window.location.hash;      })[0]     });    }   }.bind(this));  },  render: function() {   var person = this.state.person || this.defaultPerson;   return (    <div>     <A.Header title={person.name} />     <Detail person={person} />    </div>   );  } }); 

Page 组件和之前列表页面的 Page 组件一样,在 componentDidMount() 中通过 AJAX 加载数据。之后,通过 window.location.hash 按 ID 精确查找联系人,设置到 state 中。

显示的时候,如果没有找到 this.state.person ,则使用默认的“查无此人”联系人信息。

渲染 Page

最后当然不能忘了渲染根组件:Page。

React.render(<Page />, document.body);

这时候,通过 http://localhost/detail.html#1001 这个地址,已经可以看到数据显示出来,只不过由于没有添加样式,还不够美观。

[学习笔记] Cordova+AmazeUI+React 做个通讯录 - 联系人详情

在列表页面上添加到详情页面的连接

按照 Amazi UI React 文档,在列表页面上添加到详情页面的连接,只需要在 Person 组件中为 <A.ListItem> 添加 href 属性即可,

<A.ListItem className="person" href={"detail.html#" + this.props.id}> </A.ListItem>

然后添加之后显示出来的效果却大大出乎意料。主要原因是 Amaze UI 将 li>a 的 display 设置为 block了,所以带链接的电话图标会显示在下一行。当然通过修改 CSS 是可以解决的,但是我想用另一种方法来解决:点击事件。

列表项上的点击事件

React 是支付事件处理的,在其 Event System 一章中说明了事件处理的方式和注意事项。React 可以处理的事件分几大类共计数十个,都在 Event System 中列举出来了。这里需要用到的是 onClick 事件。

注意,下面说的内容不是在 detail.jsx 而是在 index.jsx 中

首先为 Person 组件定义一个处理函数,用于处理列表项被点击后的动作:设置 window.location.href 跳转到详情页。

var Person = React.createClass({     handleClick: function(event) {         window.location.href = "detail.html#" + this.props.id;     },     render() { ... } });

可以看到,数据来源仍然可以是 this.props ,同理,也可以是 this.state

之后在 <A.ListItem> 中绑定事件处理函数

  render: function() {  var link = "tel:" + this.props.tel;  return (   <A.ListItem className="person" onClick={this.handleClick}>   ...   </A.ListItem>  ); } 

注意到 onClick={this.handleClick} 的写法,联想到在 HTML 标签属性中绑定事件处理函数的情况,函数在执行时 this 指针会变为全局对象 (window)。这里是不是需要 bind(this) 呢?

不需要!

React 已经处理了 this 的问题,所以这里只需要简单绑定 this.handleClick ,而在 handleClick 中使用 this 就是当前组件对象,不会是全局对象。

如果有强迫症,可能还需要给 <A.ListItem> 加个内联样式: style={{ cursor: "pointer" }} ,不过我认为没必要,因为我们的目标是手机 App,指哪点哪,完全没有 hover 一说。

可点击的详情电话

要让电话可点击只需要加 <a href="tel:xxxxxx"> 即可。但是在详情页,每个数据项都是这个结构:

<ListItem>     <span>{label}</span>     <span>{value}</span> </ListItem>

如果要加链接,就会变成下面的结构

<ListItem>     <span>{label}></span>     <span>         <a href={href}>{value}</a>     </span> </ListItem>

然后再在 Detail 中使用组件的时候多传入一个 href 参数。

说起来,两个 DetailItem 中的区别只有第 2 个的 <span> 中的内容那一点,有没有办法可以重用呢?——可以试试 mixins,因为从 Reusable Components 的理解,mixins 有点像继承。

尝试(第 1 次失败)

var DetailItem = React.createClass({  getValueContent: function() {   return this.props.value;  },  render: function() {   return (    <A.ListItem className="person-detail-item">     <span className="label">{this.props.label}</span>     <span>{this.getValueContent()}</span>    </A.ListItem>   );  } }); 
var DetailLinkItem = React.createClass({     mixins: [DetailItem],     getValueContent: function() {         return <a href={this.props.href}>{this.props.value}</a>;     } });

结果失败了。再次阅读 Reusable Components 中的示例,然后发现 mixins 数组中应该是一个原型对象更贴切,尝试

第 2 次尝试(再次失败)

var DetailLinkItem = React.createClass({     mixins: [DetailItem.prototype],     getValueContent: function() {         return <a href={this.props.href}>{this.props.value}</a>;     } });

这次是因为重复定义了 constructor。 DetailItem.prototype 中有一个 constructor ,而 React.createClass() 又定义了一个。看来不能偷懒,只能定义个独立对象了

终于成功的尝试

var detailBase = {  render: function() {   return (    <A.ListItem className="person-detail-item">     <span className="label">{this.props.label}</span>     <span>{this.getValueContent()}</span>    </A.ListItem>   );  } }; var DetailItem = React.createClass({  mixins: [detailBase],  getValueContent: function() {   return this.props.value  } }); var DetailLinkItem = React.createClass({  mixins: [detailBase],  getValueContent: function() {   return <a href={this.props.href}>{this.props.value}</a>;  } }); 

补充一下 Detail 中的变更

这个变更是在第 1 次尝试的时候就修改了的,主要是处理“电话”那一项时用 <DetailLinkItem> 代替了 <DetailItem>

var Detail = React.createClass({  render: function() {   var person = this.props.person;   return (    <A.List className="person-detail" data-id={person.id}>     <DetailItem label="姓名" value={person.name} />     <DetailLinkItem label="电话" value={person.tel} href={"tel:" + person.tel} />     <DetailItem label="性别" value={person.isMan ? "男" : "女"} />     <DetailItem label="城市" value={person.city} />    </A.List>   );  } }); 

美化 Detail

美化通常放在最后,但不代表不需要,现在来加 className 和 CSS。

从效果上来看,主要是需要把 label 和后面的内容区分开来,顺便参照列表页面的列表样式,做一些细节上的美化。

先为 <A.List> 添加 className="person-detail" ,再为 <A.ListItem> 添加 className="person-detail-item"className="label" 是有先见之明早就加了的。最后修改 CSS,去掉 li 的类限定,再加上 ul.person-detailli.person-detail-item 的样式

ul.person-list {  margin-top: 0; } li {  padding: 3px 6px; } li>.person-icon {  margin-right: 6px; } li>.person-phone {  margin-top: 4px; } ul.person-detail li {  margin-bottom: 4px;  border-top: 0; } li.person-detail-item .label {  margin-right: 8px;  padding: 2px 5px;  background-color: #41afff;  border-radius: 3px;  color: white; } 

最终效果还是比较令人满意的

[学习笔记] Cordova+AmazeUI+React 做个通讯录 - 联系人详情

示例代码

  • 传送门:本节示例代码

正文到此结束
Loading...