微信小程序小結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