[学习笔记] 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;
}

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