进行了各种准备与配置后，来到首页开发。首先需要实现首页效果图如下：
Template 名片很多，需要用模板、这里需要微信提供的基础组件大致是 input（搜索框）、action-sheet（右边是个底部下拉菜单，需要下拉菜单）、Scroll-view (右边 ABC 跳转)、（这个目前实现还有点问题，正在攻克中）。
View是块元素，整个搜索框的一个样式。
* 名片夹：由于该项目主打名片功能，故很多地方使用，所以需要把名片以 template 分离出来。* Template：定义一个模板，name 模板的名字其实是个作用域。* Block：循环控制，名片很多，必须用循环出来，和很多操作数据的前端框架循环差不多。* 支持自定义属性 data，这里用作判断线上名片以及线下名片。* View 里面是一些数据引入，里面是支持三目运算符。
引入 template 时非常方便，is 和 name 一样，data 是 nameData 传递过来的数据填充。
一切都绑定数据为中心点。
取到数据具体操作根据你数据结构：
这里的数据结构和 json 数据结构一样，
这里如要传到页面的话即是
```this.setData({nameData:card_list_name.data.cards,timeData:card_list_time.data.cards});```
因为页面遍历的是 nameData,timeData
可以看下打印出来的数据结构，根据你的结构进行解析与传递。
也可以看下这里对数据的一些操作。（这里须根据定义的 json 数据格式来操作的）
名片的样式由于很多页面需要使用放在 common.css 里面，这个 common.css 是所有页面都需要用到，一些初始化设置。它是在 app.wxss 里面引用之后才能被映射到全局 APP。
搜索框：其中 bindChange 为输入框发生改变事件。微信提供的 bindchange 在支持方面还有小问题，目前是失去焦点才能触发到此事件的发生，待后续完善吧，先实现功能再说。
在 index.js 里面写事件
```bindInputChange:function(e){//发生搜索事情var self = this; //this绑定，这个this指向微信的提供windowvar Text = e.detail.value.toUpperCase(); //取到输入的内容if(Text==""){ //如果输入为空 一些东西需要显示 否则不显示show_letter = "block";}else{show_letter = "none";}this.setData({show_letter:show_letter,showSheet:true});var res = nameData; 获取到传递的数据if(data_type=="name"){}else if(data_type=="time"){res = timeData;};for(var k in res){ //for-in循环取到data里面的cardsvar data = res[k].cards;for(var i = 0;i<data.length;i++){ 循环取到需要搜索的关键字对比If(data[i].userName!=null && data[i].userName.indexOf(Text)!=-1){data[i]["display"] = "block"; //存在就是赋值显示}else{data[i]["display"] = "none"; // 不存在赋值不显示}}}}```
菜单栏：做到菜单栏，使用微信提供的下拉菜单组件 action-sheet，它被触发的条件在这里。
一切以绑定事件为起点：
```bindButtonTapSheet:function(e){//调取底部下拉菜单栏}```
还是得先布好局才能被调动
Js 配置：
Data 初始化数据：
这里得取非，直接设置 false 调不出来: 调用事件。
调出来还得去掉它啊：如下相同即可
取消直接上事件即可。（分为菜单栏外部与底部）
//好了，就是这么简单。实现效果简单，体验效果确实非常不错。
还需要个 loading 效果（暂时没做动画，后期再考虑。）Loading 布局
首页的最外层 view
根据微信的生命周期
```Onload:function(e){this.setData({toastDisplay:”block”,htmlWrapDisplay:”none”})},onShow:function(e){this.setData({toastDisplay:”none”,htmlWrapDisplay:”block”})}```
加载条完成。
扫一扫，直接调用拍照功能，从这里看到微信提供的拍照 api 使用起来非常快速，只需根据需求配置即可。
点击扫一扫之后，在开发者工具即可看到如下效果。
做到这里说明下，dom 长度有限制，页面的结构太长，也是无法渲染的，暂且把公司排序暂时先去掉了。
左边的 ABC 跳转（还在继续完善中）。这里还有个左滑删除名片功能，微信没有提供这个在移动端很实用的功能真的比较遗憾
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
