微信小程序小结02-- 完整的demo

小程序确实方便，在移动端方便小个体宣传，不须要服务器和域名，还有客服功能。按朋友的意思，作了一次调整，分红了首页、预定和个人三个页面。

下面说下遇到的几个问题。

01.客服功能

不得不说这个一条龙服务的功能挺好的，帮住小店主开辟了一个客源路径，节省了开发的成本。只须要在页面里，放置一个contact-button就能够

   <contact-button   type="default-light"  size="20"  session-from="weapp" >客服 </contact-button> 

只是这个button的样式很差修饰，还自带图标。不喜。就能够换成button。

 <button class="cs_button" open-type="contact"  
  session-from="weapp">客服</button > 

设置类型为contact就好。这样用户点击就能进入客服会话页面，

 

在用户的微信聊天记录中会出现新的一栏：小程序客服消息

 

而后在小程序后台设置客服人员，在指定的pc页面上扫码登陆就能接入会话了。 客服地址：https://mpkf.weixin.qq.com/cgi-bin/kfindex

 

惋惜这个地址不能在手机上用，若是能够集成到客服人员的用户里面最好了。在pc的网页上是比较麻烦的，由于小店主本身也不会一直在那登陆，若是手机上收到消息能提示最好了，否则就很鸡肋。另外客服须要先在小程序后台绑定客服人员，注意若是微信设置了不能搜索，到这个地方也是搜不到的。

02.获取用户登陆信息

这个功能一开始是好的，过了几天不知道怎么就获取不到用户信息了。而后按照文档意思，须要让用户再次点击button受权才能够。

<view wx:if="{{isAuth}}" class="container short">
    <view class='avatar-box'>
    <image class="user-avatar"  src="{{ userInfo.avatarUrl }}"  />
    </view>
    <text class="title">{{ userInfo.nickName }}</text>
</view>
 <button  wx:if="{{!isAuth}}" open-type="getUserInfo">受权登陆</button>

isAuth是加载的时候判断有没有 res.authSetting['scope.userInfo'] 这个权限，没有就为false。这样才能再次获取用户信息。

03.图片自适应

一开始在页面怎么调整css，图片的宽高比都失真，无奈之余去看了才晓得，这个竟然也有暗门。

<image class="img" bindtap="previewImage" src="images/actv.jpg" mode="widthFix">

须要加上mode才能自适应。这真是伤悲，为啥不是默认配置。

04.拨打电话

  call:function(){
    wx.makePhoneCall({
      phoneNumber: phone 
    })
  },

这个功能实用，直接跳转到用户手机拨打电话的界面。

05.页面后退的问题

在页面导航的时候，非tarbar页面咱们但愿可以有个回退键，其实这是默认的。用navigator标签就好。

<navigator  url="/pages/location/location"  >
  <image class='icon s' src='../../images/w1.png'></image> 
  门店位置</navigator>

但我一开始拿来代码的时候傻逼了，navigator（至关因而a标签） 加了一个redirect的。结果就是又去无回...

小结：开发这种纯展现的不须要域名和服务器，这是快哉。另外就是阿里的这个图标用的很爽。

github地址：https://github.com/stoneniqiu/weapp-demo