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