邢臺網站建設,邢臺系統開發
邢臺網站建設,邢臺網站制作,邢臺網絡公司,邢臺系統開發,邢臺網站設計,邢臺網頁制作
15081754822
網站首頁 網站建設 系統開發 系統開發知識 手機網站 外貿網站 網站維護 網站案例 選課系統 域名注冊 微信開發 行業交流 聯系我們
 
邢臺區縣網站建設
邢臺行業門戶網站建設
邢臺網站策劃
公司主營業務
  系統開發
網站建設
手機網站
網站案例
成品網站
網站維護
域名注冊
虛似主機
機房工程
弱電工程
視頻主持人
 
增值服務
 
SSL證書申請
微信小程序
 
關于我們
 
公司簡介
公司視頻
支付方式
人才招聘
企業文化
服務承諾
合作伙伴
下載中心
 
你所處的位置:首頁 - 微信小程序 - 微信小程序聯系我們頁面制作教程
微信小程序聯系我們頁面制作教程
發布日期:2020-3-9 11:06:27  瀏覽次數:125次


一、wxml頁面代碼如下:


<view class="page-phone">


    <view class="header">


      <view class="wx-title">奧祥網絡</view>


      <view class="wx-desc">專注移動互聯網開發與營銷!</view>


      <image src="{{logosrc}}" class="logoimg"></image>


    </view>


 


    <view class="content">


      <view class="wx-cell">


         <view class="icon">


            <image src="{{adrimg}}" class="icon-postion"></image>


         </view>


         <view class="cell-bd" bindtap="getLocation">邢臺市中興綠谷30樓</view>


         <view class="cell-fd">


            <image src="{{jtimg}}" class="icon-postion"></image>


         </view>


      </view>


 


      <view class="wx-cell">


         <view class="icon">


            <image src="{{clockimg}}" class="icon-postion"></image>


         </view>


         <view class="cell-bd">9:00 - 18:00</view>


      </view>


      <view class="wx-cell" bindtap="calling">


         <view class="icon">


            <image src="{{phoneimg}}" class="icon-postion"></image>


         </view>


         <view class="cell-bd">400-000-0000</view>


         <view class="cell-fd">


           <image src="{{jtimg}}" class="icon-postion"></image>


         </view>


      </view>


    </view>


    <view class="content">


       <view class="wx-cell">


         <view class="icon">


            <image src="{{picimg}}" class="icon-postion"></image>


         </view>


         <view class="cell-bd">業務圖片</view>


       </view>


       <swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">


       <block wx:for="{{imgUrls}}">


          <swiper-item>


            <image src="{{item}}" class="slide-image" width="355" height="150"/>


          </swiper-item>


       </block>


       </swiper>


        


    </view>


</view>


二、wxss樣式頁面代碼如下:

/**about.wxss**/
.page-phone{
  font-family: '微軟雅黑';
}
.header{
  padding: 41rpx;
  position: relative;
}
.wx-title{
  font-size: 46rpx;
  font-weight: bold;
}
.wx-desc{
  font-size: 32rpx;
  color: #aaa;
  line-height: 67rpx;
}
.logoimg{
  width:100rpx;
  height:100rpx;
  position: absolute;
  top:40rpx;
  right:40rpx;
}
.content{
  padding: 41rpx;
  border-top: 1rpx #eeeeee solid;
  border-bottom:1rpx #eeeeee solid;
}
.wx-cell{
  margin-bottom: 46rpx;
  margin-left: 60rpx;
  position: relative;
}
.icon{
  width: 50rpx;
  height:50rpx;
  position: absolute;
  left:-55rpx;
  top:-6rpx;
}
.icon-postion{
  width: 50rpx;
  height:50rpx;
}
.cell-fd{
  width: 50rpx;
  height:50px;
  position: absolute;
  top:-6rpx;
  right:0px;
}
.cell-bd{
  font-size: 32rpx;
  color:#666;
}

三、js頁面代碼如下:

//about.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    logosrc:'../../image/logo.png',
    adrimg:'../../image/icon-address.png',
    clockimg: '../../image/icon-clock.png',
    phoneimg: '../../image/icon-phone.png',
    jtimg: '../../image/icon-jt.png',
    picimg: '../../image/icon-pic.png',
    imgUrls: [
 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495626232647&di=c7c53f96e0f48681471e4626eebe0181&imgtype=0&src=http%3A%2F%2Fwww.sanchiseo.com%2Fuploadfile%2F2015821%2F2015821115728937045.jpg',
 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495626316444&di=ff20f74da6031541a12e0eeadaf156b9&imgtype=0&src=http%3A%2F%2Fsem.g3img.com%2Fsite%2F34016275%2F20160216162430_82108.png',
 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1495626359075&di=3297d75c3742024d15f553547495f3db&imgtype=0&src=http%3A%2F%2Fwww.17emarketing.com%2Fuploads%2Fallimg%2F160627%2F1-16062G54154.png',
    ],
    indicatorDots: false,
    autoplay: true,
    interval: 5000,
    duration: 1000
  },
  calling: function () {
    wx.makePhoneCall({
      phoneNumber: '4000019651', 
    })
  },
  getLocation: function (){
    wx.openLocation({
      latitude: 29.53,
      longitude: 106.57,
      name:"邢臺市中興綠谷",
      address:"邢臺市中興綠谷30樓",
      scale: 28
    })
  },
  onLoad: function (options) {
    // 頁面初始化 options為頁面跳轉所帶來的參數
  },
  onReady: function () {
    // 頁面渲染完成
  },
  onShow: function () {
    // 頁面顯示
  },
  onHide: function () {
    // 頁面隱藏
  },
  onUnload: function () {
    // 頁面關閉
  }
})






作者:未知 上一條: 微信小程序在開通是提示未認證
來源:互聯網 下一條: 微信小程序 頁面路由
奧祥介紹 聯系我們
域名注冊 成品網站
成功案例 客戶服務
行業交流 支付方式
版權所有: © 2005-2015 邢臺奧祥網絡™
聯系電話:15081754822  15102693855
公司郵箱:[email protected] 《信息產業部備案 冀ICP備09043254號》
本站關鍵詞:邢臺網站建設 邢臺網站設計 河北邢臺網絡公司 邢臺網站制作公司 邢臺網站推廣邢臺網站制作
網站統計:
黑色沙漠造船赚钱 九五至尊棋牌游戏 急速赛车 下载幸运农场 什么原因导致股票下 神来棋牌全部版本 股票大盘几点开始 贪玩娱乐棋牌 福建22选5结果 pk10软件 1.3.7.15.31百家乐 福彩20选8开奖结果西安 极速赛车微信群 快乐扑克体彩 幸运赛车前一有哪些技巧 中愿25选五开奖结果 上海天天彩选4走势图双色球开奖结果