本文摘要： require，假数据用于的是 .js 文件形式，里面的数据结构 json 完全一致，把 data 曝露过来才可。

require，假数据用于的是 .js 文件形式，里面的数据结构 json 完全一致，把 data 曝露过来才可。然后所取数据 require 进去才可，这一点用于很便利；Images：图片路径；Page：除 tabar 以外的页面；Servise：服务交付给层（与后台试运行现实数据时用于）；Wxss：一些公共的 css 文件。看见这里大家找到每个页面都被连带好三个有所不同的后缀。

分别页面，css，js 目前不能依照这样，是微信应用于号的一个规范吧。Wxss 文件是引进你写出的样式文件，也可以必要在里面写出样式。

Js 文件须要全部配备到 pages 里面才能生效。下一章：微信小程序首页面研发。

第四章：微信小程序首页面研发展开了各种打算与配备后，回到首页研发。首先必须构建首页效果图如下：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 是所有页面都必须中用，一些初始化设置。它是在 pp.wxss 里面提到之后才能被同构到全局 APP。搜索框：其中 bindChange 为输入框再次发生转变事件。

微信获取的 bindchange 在反对方面还有小问题，目前是丧失焦点才能启动时到此事件的再次发生，待先前完备吧，再行构建功能再说。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;idata.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 函数调用，还在之后完备中。这里还有个左湿移除名片功能，微信没获取这个在移动末端很简单的功能知道较为失望，后面得花点时间自己写先前完备。原创文章，予以许可禁令刊登。

下文闻刊登须知。

本文来源：沙巴官网入口-www.023hmk.com