微信小程序——律师事务所微官网

效果预览和文件结构

<!--pages/case/index.wxml-->
<view class="page"><!-- 设置轮换banner --><view><swiper indicator-dots="ture" autoplay="true" interval="5000" duration="1000"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="pic" /></swiper-item></block></swiper></view><!-- 设置展示图标 --><view class="body"><view class="left"><view class="l1"><navigator url="../person/person"><image class="pic1" src="../images/1.png" /></navigator></view><view class="l2"><text>个人简介</text></view><view class="l3"><navigator url="../map/map"><image class="pic1" src="../images/3.png" /></navigator></view><view class="l4"><text>地图导航</text></view></view><view class="right"><view class="l1"><navigator url="../case/case"><image class="pic1" src="../images/2.png" /></navigator></view><view class="l2"><text>典型案例</text></view><view class="l3" bindtap="phone"><image class="pic1" src="../images/4.png" /></view><view class="l4"><text>联系方式</text></view></view></view><view class="foot">点击右侧,联系客服=><contact-button size="27"></contact-button></view></view>

swiper图片轮播图官方参考文档

navigator指定元素被点击后页面转跳路径

contact-button 转跳与小程序客服对话页面

/**index.wxss**/
/*页面四边样式*/
.page{margin: 0rpx 10rpx 0rpx 10rpx;
}
/*banner图标设置充满容器*/
.pic{width:100%;
}
/*下部外周样式*/
.body{margin: 50rpx 10rpx 0rpx 10rpx;
display: flex;
flex-direction:row;
}
/*左右容器大小*/
.body view{width:300rpx;
height:600rpx;
align-items: center;
}
/*左侧容器*/
.left{flex:1;
display: flex;
flex-direction:column;
}
/*子容器大小*/
.left view{width:200rpx;
height:200rpx;
}
/*设置图文比例3：1*/
.l1{flex:3;}
.l2{flex:1;
}
.l3{flex:3;
}
.l4{flex:1;
}
.right{flex:1;
display: flex;
flex-direction:column;
}
.right view{
width:200rpx;
height:200rpx;
}
/*图标大小样式*/
.pic1{width:150rpx;
height:150rpx;
border-radius: 50%;
border: 1px solid black;
}
.foot{background-color: lightgrey;
text-align: center;
}

//index.js
Page({data: {imgUrls: ['../images/banner1.jpg','../images/banner2.jpg','../images/banner3.jpg',],},phone: function (e) {wx.makePhoneCall({phoneNumber: '114'})}
})

通过wx.makePhoneCall调用用户通话程序拨打114（号码可以指定）
wx.makePhoneCall({
phoneNumber: ‘114’
})

case.wxml页面

<!--pages/case/case.wxml-->
<view class="page"><view class="banner"><swiper indicator-dots="ture" autoplay="true" interval="5000" duration="1000"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="pic" /></swiper-item></block></swiper></view><view class="body"><text>
车主向交警队赔偿无名氏死亡赔偿金后，保险索赔遭拒，经向法院起诉，成功获赔。
</text><video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"></video></view>
</view>

使用video控件src引用视频，最好使用腾讯视频

map.wxml页面

<!--pages/map/map.wxml-->
<!-- map.wxml -->
<map id="map" longitude="116.715790" latitude="23.362490" markers="{{markers}}" scale="18"  style="width: 100%; height: 300px;">
</map>

// pages/map/map.js
Page({data: {markers: [{iconPath: "../images/mark.png",id: 0,latitude: 23.362490,longitude: 116.715790,title: '华乾大厦',}],}
})

在地图中添加一个标志

微信小程序——律师事务所微官网相关推荐

HBuilder X下载安装，运行微信小程序教程（官网）
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE. [1] HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写. ...
八月微信小程序导航：官方文档+精品教程+demo集合（8月25...
2019独角兽企业重金招聘Python工程师标准>>> 1:官方工具: https://mp.weixin.qq.com/debug/w ... tml?t=147643467846 ...
商城前端模板_如何理解微信小程序和微商城,微信公众号以及APP之间的关系？一张图看懂了！...
老张的一位粉丝,花了几天时间把知乎里面分享的一些关于微信小程序,微信商城,微信公众号,以及APP的相关介绍全看完了. 然后用他自己的话描述了微信小程序和微商城,微信公众号以及APP之间的关系,如下图所 ...
微信小程序联盟：官方文档+精品教程+demo集合（12月更新……）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
STM32+ESP8266+MQTT微信小程序SoftAP一键配网接入腾讯物联网平台
STM32+ESP8266+MQTT微信小程序SoftAP一键配网接入腾讯物联网平台 Wi-Fi 配网,指由外部向 Wi-Fi 设备提供 SSID 和密码(PSW),让 Wi-Fi 设备可以连接指 ...
微信小程序导航：官方文档+精品教程+demo集合（5月9日更新)
微信小程序联盟:官方文档+精品教程+demo集合 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1 ...
微信小程序导航：官方文档+精品教程+demo集合（5月31日更新)
官方文档 1:官方工具:https://mp.weixin.qq.com/debug/w - tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/d ...
微信小程序项目-最常用网盘助手
目录项目展示首页-页面全部-页面项目地址微信小程序云开发开始收费,白嫖的时代结束了,不能靠着这个小程序薅羊毛了.所以把这个项目分享给大家.这是一款记录分享阿里云盘链接的小程序.可以记录分享一 ...
微信小程序之微票前后端简易版+五天实训总结
本文为本人原创,如需转载请注明出处! 为期五天的实训结束了,其实算起来除去机房被占用顶多四天多一点. 来给我们做培训的是优才学院(没有打广告的意思,本着实事求是的态度),老师很有耐心,确实学到很多东西 ...
微信小程序联盟：官方文档+精品教程+demo集合（未完待续，持续更新中……）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

微信小程序——律师事务所微官网

效果预览和文件结构

case.wxml页面

map.wxml页面

微信小程序——律师事务所微官网相关推荐

最新文章

热门文章