共计 1833 个字符，预计需要花费 5 分钟才能阅读完成。
最近的项目中，需要学生端使用微信小程序，所以这两天做了一下小程序的原型。在这里总结一下踩过的坑。
组件库的选择
上来遇到的第一个大问题就是组件的选择。因为微信原生的实在是又不好看，又不好用。虽然有官方文档，但不得不说，不适合新手使用。
第一次选择: 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…
