当前位置: 首页 > news >正文

pc 响应式网站模板百度seo优化是什么

pc 响应式网站模板,百度seo优化是什么,wordpress如何修改首页模板文件,网页编辑软件office1、背景 大家平时用到微信的时候,应该都会用到微信的通讯录功能,刚好我们公司项目中也有要实现组织通讯录的需求,在次记录下实现过程。 我的实现比较简单,目前是没有添加右侧的字母导航模块。 实现效果图如下所示: …

1、背景

大家平时用到微信的时候,应该都会用到微信的通讯录功能,刚好我们公司项目中也有要实现组织通讯录的需求,在次记录下实现过程。

我的实现比较简单,目前是没有添加右侧的字母导航模块。

实现效果图如下所示:

        

分为两部分,上面一部分是部门,下面部分为当前部门下的员工列表,目前做的比较简单,仅供大家参考哈。

2、实现

打开微信开发者工具,创建项目并且在 app.json 文件中添加      "pages/addressbook/addressbook", 如下图所示:

2.1、addressbook.js 的实现

// pages/addressbook/addressbook.js
//https://blog.csdn.net/weixin_44039965/article/details/93503931
//https://www.jianshu.com/p/17b339adbe9b
Page({data:{windowHeight: '',deptData:[{"deptName":'基础研发部'},{"deptName":'设计部'},{"deptName":'测试部'},{"deptName":'质量管理部'},{"deptName":'生产部'}],
userData:[
{"letter":"A", "data":[{"name":"AAA","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"AAAAAAA","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"B","data":[{"name":"BBB","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"C","data":[{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"CCC","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"D","data":[{"name":"DDD","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"E","data":[{"name":"EEE","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"F","data":[{"name":"FFF","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"G","data":[{"name":"GGG","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"H","data":[{"name":"HHHH","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"I","data":[{"name":"IIIII","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"J","data":[{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"},{"name":"JJJ","phoneNum":"15771009876","icon":"/image/user_icon.png"}]},
{"letter":"K","data":[{"name":"KKK","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"L","data":[{"name":"LLL","phoneNum":"15771009876","icon":"/image/user_icon.png"},
]},
{"letter":"M","data":[]},
{"letter":"N","data":[{"name":"NNN","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"O","data":[{"name":"OOO","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"P","data":[{"name":"PPP","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"Q","data":[{"name":"QQQ","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"R","data":[{"name":"RRR","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"S","data":[{"name":"SSS","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"T","data":[{"name":"TTT","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"U","data":[{"name":"UUU","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"V","data":[{"name":"VVV","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"W","data":[{"name":"WWW","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"X","data":[]},
{"letter":"Y","data":[{"name":"YYY","phoneNum":"15771009876","icon":"/image/user_icon.png"},]},
{"letter":"Z","data":[]},
]
},onLoad: function (options) {try {var res = wx.getSystemInfoSync()this.setData({windowHeight: res.windowHeight + 'px'})} catch (e) {console.log(e);}},// 拨打电话给callGetPhone(e) {// 号码let telPhone = e.currentTarget.dataset.getphone;if(telPhone == 'null' || telPhone == ''){wx.showToast({title: '电话号码为空!',})return;}wx.showModal({title: '拨打电话',content: telPhone,confirmText: '拨打',success: function (res) {if (res.confirm) {wx.makePhoneCall({phoneNumber: telPhone})}}})},
})

deptData:存放的是部门数据, userData:存放的是用户数据。

2.2、 addressbook.wxml的实现

<!--pages/addressbook/addressbook.wxml-->
<scroll-view scroll-y style="height: {{windowHeight}}">
<view class="alphabet">    
<!-- 部门数据列表 -->
<view class="alphabet-list"><view class="section-item"><view wx:for="{{deptData}}"  wx:for-item="deptItem" wx:for-index="idx" class="section-item-cells"><view class="section-item-cell {{'border-bottom'}}"  data-obj="{{deptItem}}"><view class="dept-name"><text class="dept-text">{{deptItem.deptName}}</text> </view></view></view></view>
</view><!-- 用户数据列表 -->
<view class="alphabet"><view class="alphabet-list"><view wx:for="{{userData}}" wx:key="unique" id="{{item.letter}}" class="section-item"><block wx:if="{{item.data.length > 0}}"><view class="item-header">{{item.letter}}</view><view wx:for="{{item.data}}" wx:for-item="cell" class="section-item-cells"><view class="section-item-cell {{'border-bottom'}}"><view class="userList"><view class="flex-wrp-row item"><view class='item-left flex-wrp-row'><image  class="userIcon"  src="{{cell.icon}}" mode="cover"></image><text class="cell-name">{{cell.name}}</text></view>                <view  class='item-right flex-wrp-row'><image class="callPhone" src="/image/ic_contact_call.png" catchtap="callGetPhone" data-getPhone="{{cell.phoneNum}}"></image></view> </view></view></view></view></block></view>
</view>
</view>
</view>
</scroll-view>

 

可以看到整个布局时 scroll-view ,因为里面的列表数据需要进行滚动,另外布局里面的代码也分为两部分: 部门数据列表  +  用户数据列表。

2.3、addressbook.wxss 的实现

/* pages/addressbook/addressbook.wxss */
.dept-name{height: 54rpx;
}.alphabet-list .section-item .section-item-header{display: flex;align-items: center;font-size: 26rpx;font-family: PingFang SC;background-color: #f2f4f5;  color: #000000;padding: 4rpx 20rpx;
}.item-header{display: flex;align-items: center;font-size: 16rpx;font-family: PingFang SC;background-color: #f2f4f5;  color: #666666;padding: 4rpx 20rpx;
}.alphabet-list .section-item .section-item-cells {padding-left: 20rpx;
}
.alphabet-list .section-item .section-item-cells .section-item-cell{font-size: 26rpx;line-height: 1.0;color: #000000;padding: 29rpx 0;
}.dept-text{font-size: 26rpx;font-family: PingFang SC;color: #000000;line-height: 54rpx;
}.border-bottom {border-bottom: 1rpx solid #dbdbdb;
}.userIcon{width: 33px;height: 33px;
}.callPhone{width: 40rpx;height: 40rpx;margin-right: 50rpx;
}.deptName{margin-left: 16rpx;font-size: 20rpx; font-family: PingFang SC;font-weight: 500;color: #000000;line-height: 54px;
}.userList{display: flex;flex-direction: column;height: 50rpx;
}.cell-name{margin-left: 20rpx;font-size: 28rpx;font-family: PingFang SC;color: #000000;
}.flex-wrp-row {display: flex;flex-direction: row;
}.item {position: relative;
}.item-left {flex: 1; /* 重要 */align-items:center;
}.item-right {position: relative;align-items:center;
}

样式这块就没什么好说的了,我也是才学习,写的比较简陋。

3、工程图片资源

工程里面用到两个图片资源,放置在image文件夹下,如下图所示:

 

 

 

好了,就先到这里,如果文章对你有所帮助,不要忘记点个赞哟~

http://www.hrbkazy.com/news/24532.html

相关文章:

  • 公司网站建设费用记什么科目杭州seo公司
  • 潍坊建设厅网站百度手机app下载并安装
  • 微信公众号小程序怎么创建手机优化什么意思
  • 什么网站可以做告白的网页怎么建网站教程图解
  • 宝安营销型网站制作软文撰写
  • 郑州市中原区建设局网站常州seo招聘
  • 郑州外贸网站建设公司排名网站 seo
  • 做国内打不开的网站个人网页怎么做
  • 网站设计策划书月入百万的游戏代理
  • 人力资源公司起名大全武汉seo首页优化报价
  • 如何删除在凡科上做的网站百度一下全知道
  • 外贸公司的经营范围东莞seo整站优化火速
  • html 门户网站搜索引擎优化哪些方面
  • 做封面哪个网站好网站关键词收录查询
  • qq空间实名认证网站大连网站建设
  • 开发大型网站的最主流语言雅虎日本新闻
  • 中国企业信息公示系统广东百度seo
  • 刚创业 建网站附近电脑培训班位置
  • 平价网站建设西安百度推广优化托管
  • 进入外国网站的方法百度认证服务平台
  • 建设网站的网站阜阳seo
  • 乐清网站推广制作网络营销五个特点
  • 网站制作设计报价seo关键词选取工具
  • angularjs做网站案例武汉做网络推广的公司
  • 深圳网站建设方维沈阳cms模板建站
  • 网页设计html代码大全爱心网站seo内容优化
  • 专门做电脑壁纸网站实时热榜
  • 我的世界做图片网站抖音搜索引擎推广
  • 跨境电商数据在哪个官网查湖北seo整站优化
  • 珠海做网站多少钱外链交换平台