小程序模板网

微信小程序开发教程第四章:首页面开发

进行了各种准备与配置后,来到首页开发。首先需要实现首页效果图如下:Template 名片很多,需要用模板、这里需要微信提供的基础组件大致是 input(搜索框)、action-sheet(右边是个底部下拉菜单,需要下拉菜单)、S ...

 
 
 

进行了各种准备与配置后,来到首页开发。首先需要实现首页效果图如下:

 

 

 

 

 

 

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 跳转(还在继续完善中)。
这里还有个左滑删除名片功能,微信没有提供这个在移动端很实用的功能真的比较遗憾



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/22734.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询