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

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

目录

1. 准备
2. 联系人列表(1)
3. 联系人列表(2)
4. 联系人详情
5. 单页应用 (With Router)
6. 使用 SQLite

---

传送门：全部章节 示例代码

---

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

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

详情页面

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

规划

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

详情页面仍然需要显示一个页头，标题就是姓名。之后的内容仍然用列表显示。用 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 这个地址，已经可以看到数据显示出来，只不过由于没有添加样式，还不够美观。

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

按照 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-detail 和 li.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;
}

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

---