初探微信小程序

最近的項目中，需要學生端使用微信小程序，所以這兩天做了一下小程序的原型。在這裏總結一下踩過的坑。

組件庫的選擇

上來遇到的第一個大問題就是組件的選擇。因爲微信原生的實在是又不好看，又不好用。雖然有官方文檔，但不得不說，不適合新手使用。

第一次選擇: WeUI。這是以前老師提到過的一個組件庫，所以先嚐試了它。但是效果不大好。

有兩個問題：1.組件庫不強大。雖然涉及的種類挺全面的，但是一旦想去實現某個功能時，總會有不順手的地方。

2.沒有文檔。WeUI本身是有較完善的文檔的，但是小程序版的就沒有了，所以就造成了想去實現一個功能，就只能根據他給的Demo去扒代碼了。

第二次選擇：ZanUI。一個第三方組件庫，相較上面的來說，最大的提升就是文檔完善。組件方面也是種類比較齊全的。基本上可以滿足開發的需求。

第三次選擇：VantUI。它是ZanUI的升級版本，功能上更加齊全，而且同種的功能有了更多的選擇，可以適應更多變的場景。文檔方面也是極其優秀的，不僅有適合新手的入門教程，最大的亮點就是可以同步展示，可以更快的找到想要的效果。

最終使用了VantUI進行原型的製作，雖然過程中還是有些地方沒法更設想的完全一樣，但是好在還能找到替代的解決辦法。總體上比較滿意。

返回鍵

基本上我們看到的小程序，上面的返回鍵都是不可缺少的。

最開始，路由跳轉，使用官方給的API進行路由跳轉：

wx.redirectTo({
    url: '/pages/personal/changePassword/changePassword'
})

然後就是添加返回按鈕了。找到組件文檔，添加個返回鍵：

<van-nav-bar
  title="標題"
  left-text="返回"
  left-arrow
  bind:click-left="onClickLeft"
/>

結果是這樣的，好像還行，到是感覺有點彆扭。打開微信，發現人家的樣式都是隻有一行的，我的就顯得有點怪異。

google一下，發現是我路由跳轉的方法用錯了。

wx.navigateTo({
  url: 'changePassword/changePassword'
})

使用這個可以直接出現返回的按鈕：

上面兩種方法的區別是，第一個是關閉當前頁面，然後跳轉；後一種是保留當前頁面，然後跳轉。所以可以看到上面的url也有一些區別。第一個我寫了完整的路徑，而後一種我只寫了相對路徑（當然完整的也可以）。

使用後面的好處，還可以利用API:wx.navigateBack實現返回，也省卻了不少麻煩。

界面風格

在這次做原型的過程中，看了好多個別人的小程序，發現其中cell這個組件被用的很頻繁。它的效果是這樣的：

它的大面積使用，代替了按鈕的使用，所以我也借鑑了這一點，不得不說，效果確實比按鈕要好。

先看一下按鈕實現的風格：

再對比一下cell的風格：

雖然按鈕好像也不差，但是後面的給人感覺要更好一點。

不僅如此，我還利用他解決了table的問題。因爲小程序本身是沒有table的，各大組件庫中也沒有看到，所以最後便用VantUI庫中的兩個組件panel和cell組合實現：

<van-panel title="2018-2019學年第一學期" use-footer-slot>
  <view slot="footer">
    <van-cell-group wx:for="{{ scores }}" wx:for-item="score">
      <van-cell title="{{ score.name }}"/>
      <van-cell title="平時成績" value="{{ score.usualScore }}" />
      <van-cell title="期中成績" value="{{ score.middleScore }}" />
      <van-cell title="期末成績" value="{{ score.finalScore }}" />
      <van-cell title="總評" value="{{ score.totalScore }}" />
    </van-cell-group>
  </view>
</van-panel>

實現效果如下：

儘管沒有達到我的預期，但是作爲第一版也可以了。

安利

VantUI庫中添加了很多圖標，但如果還不能滿足你的需求，可以去這裏找找靈感：https://www.iconfont.cn/

最後附上VantUI的地址：

https://github.com/youzan/van...
https://youzan.github.io/vant...