展开了各种准备工作与布局后,走进首页研发。首先须要同时实现首页效果图如下:
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指向微信的提供更多window
var 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里面的cards
var data = res[k].cards;
for(var i = 0;iIf(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 重定向(还在稳步健全中)。
这里除了个左滚删掉名片功能,微信没提供更多这个在移动端的很新颖的功能真的比较惋惜