初探微信小程序

最近的项目中，须要学生端使用微信小程序，因此这两天作了一下小程序的原型。在这里总结一下踩过的坑。

组件库的选择

上来遇到的第一个大问题就是组件的选择。由于微信原生的实在是又很差看，又很差用。虽然有官方文档，但不得不说，不适合新手使用。

第一次选择: 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...