基于mpvue和bootstrap的cnode微信小程序
发布于 4 个月前 作者 wikelgc 1638 次浏览 来自 分享

Github 地址

mpvue-cnode

微信小程序二维码

gh_7a399fe5538a_344.jpg

介绍

先自我介绍一下,我是一名前端工程师。由于近期css写烦了,所以在想能不能不用写css,正所谓20%的通用样式可以解决80%的布局问题,节省80%的写样式时间。正巧bootstrap v4也发布了第四版, 索性也就用上它(别批评我,知乎上说前端不用bootstrap,所以,我对bootstrap不熟。too yang too simpo, 原谅曾经无知的我)。

bootstrap有一个设定很好,记1rem = 16px。这样我们可以发现,在bootstrap的工具库中,绝大多数是基本4的倍数。所以,如果设计师遵循4的倍数进行设计,那么对于前端来说基本是不用任何样式的,然而现实中设计师并不会这么做(sad) 。但是bootstrap是基于saas,因此只要稍微修改下代码即可基于2的倍数。应该可以满足任意设计需求,毕竟设计规范中建议是4的倍数(两倍图的情况下)。

在小程序使用bootstrap唯一尴尬的便是字体,因为默认字体是1rem,即16px。h1 - h6 (分别是3rem - 1rem), small是(.85rem) 按照ant-design的字体规范,估计是完全不达标。如果不想写css,估计还需要为bootstrap的移动端在写一套字体大小的saas库。

有一个小想法:

  1. 即基于bootstrap的现有设定的基础上,做一套纯sass的工具库和组件库,作为bootstrap的第三方组件的补充类。
  2. 基于_variables做主题共享

说明: 组件库是以bootstrap的现有设定为主的纯saas文件,交互可以是jquery,vue,react的任意方案。

能力有限,请多多包涵!

最后

希望大家能给个star,一起交流。

需要招聘的小伙伴可以在cnode官网抒写招聘需求(按照要求),然后可以进入小程序在我的发布里面找到你的招聘需求,并把它分享到群里面。

想要获得解答的朋友朋友,可以在官网提出你的疑惑,并分享将其到相应的群里面,这样也有助于提高答疑效率。

小程序还有很多不足,希望大家能多提提建议(可以在本话题下面,也可以在github的issue中)!

谢谢 !!

8 回复

详情页如何处理?

@JZLeung直接用的mpvue-wxparse
☆ 来自微信小程序 cnode助手

体验还可以,不过小程序真的坑挺多的,比如最近废掉了getUserInfo

@feng-fu另外审核也是大坑,本来想慢慢迭代优化,结果突然要我转企业小程序,加招聘/问答/咨询等栏目
☆ 来自微信小程序 cnode助手

支持!mpvue 和原生小程序开发体验,相比如何?mpvue坑多吗?

@brucecodezone坑肯定还是有的,不过开发起来比较爽
☆ 来自微信小程序 cnode助手

回到顶部