初探微信小程序

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

組件庫的選擇

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

第一次選擇: 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...