标签：qq about 微信 110px 程序 客服 商城

联系客服

本节主要讲解会员功能中的联系客服界面的实现。效果如图15-11所示。

1.布局分析

结构布局分析示意如图15-12所示。

根据上面的布局分析，我们会产生基础的框架，代码示例如下：

<view>

  <view >
    <view >
      <image>客服图片</image>
    </view>
    <view >客服姓名</view>
  </view>
  <view >
    介绍文字
  </view>
  <view >
    <view >联系方式</view>
    <view>地址: 浙江杭州余杭雷恩科国际</view>
    <view>联系电话：135-1234-xxxx</view>
    <view>商务合作：xxxx@qq.com</view>
    <view>
      <button type='default' >拨打客服电话</button>
    </view>
  </view>

</view>

2.功能实现

.wxml文件代码示例如下：

<view class="about"> 
  <view class="about-tou">
    <view class="about-img">
      <image src="/images/hjh.jpg" class="in-img"  model="scaleToFill"></image>
    </view>
    <view class="about-title">讲师：黄菊华</view>
  </view>
  <view class="about-content">微信小程序-电商平台：适合经营电子商务平台移动端所需要</view>
  <view class="about-addr">
    <view class="about-tab">联系方式</view>
    <view>地址: 浙江杭州余杭雷恩科国际</view>
    <view>联系电话：135-1234-xxxx</view>
    <view>商务合作：xxxx@qq.com</view>
<view> 
<button  class='.tel' type="default" bindtap="calling">
点击拨打客服电话</button> 
</view>
  </view>
</view>

.wxss文件样式代码示例如下：

.about-tou {
  text-align: center;
}
.about-img {
  display: block;
  width: 110px;height: 110px;
  margin: 10px auto 0; 
}
.about-title {
  display: inline-block;
  margin: 10px 0;
}
.about-content { 
  text-indent: 2em;
  font-size: 16px; margin: 0 8px; 
  line-height: 1.5;
}
.about-addr {
  font-size: 16px; 
  line-height: 2;
  text-indent: 2em;
}
.about-tab {
  margin-top: 20px; 
  font-weight: bold;
}
.in-img {
  width:110px;height: 110px; 
  border-radius: 50%;
}
.image{
  width:110px;height: 110px;
}
.tel{ 
  width: 90%;
}

.js文件代码示例如下：

  data: {
  },
  calling: function () {
    wx.makePhoneCall({
      phoneNumber: '4000000000',
      success: function () {
        console.log("拨打电话成功！")
      },
      fail: function () {
        console.log("拨打电话失败！")
      }
    })
  }

小程序商城配备了javaweb、php、asp、net几个版本的后台、其他版本陆续制作中
【微信小程序参考资料】

（1）微信小程序学习路线 http://www.hzyaoyi.cn/

（2）Java微信小程序商城系统指导 https://ke.qq.com/course/3066521

（3）PHP微信小程序商城系统指导 https://ke.qq.com/course/3066518

（4）微信官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/

标签：qq,about,微信,110px,程序,客服,商城
来源： https://blog.51cto.com/u_13898481/2890825

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。