微信小程序——律师事务所微官网-即速应用

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

浏览量：568 时间：2019-12-20 来源：DavidGhul

效果预览和文件结构

小程序

!--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.jsPage({  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.jsPage({  data: {    markers: [{      iconPath: "../images/mark.png",      id: 0,      latitude: 23.362490,      longitude: 116.715790
              
                点击这里免费试用，快速创建您的专属小程序
              
              
                标签：
                微信小程序
                小程序
                小程序是什么