liangliangshuo 2019-07-01
最近的项目中,需要学生端使用微信小程序,所以这两天做了一下小程序的原型。在这里总结一下踩过的坑。
上来遇到的第一个大问题就是组件的选择。因为微信原生的实在是又不好看,又不好用。虽然有官方文档,但不得不说,不适合新手使用。
第一次选择: 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...