写点什么

高仿瑞幸小程序 01 初建项目,引入 Vant Weapp

发布于: 2020 年 05 月 03 日
高仿瑞幸小程序 01 初建项目,引入Vant Weapp



我觉得小程序的精髓在于小,需精准定位,解决用户痛点。不做大而全,做好小而精,让用户为了解决某个问题能想到我们的小程序就是成功了。例如,想喝咖啡就打开我们的小程序。



在这一篇教程中,我们要完成以下几件事。



1 整理项目文件

2 引入有赞UI库vant weapp



在上一篇教程中,我们创建了小程序。小程序默认的项目有太多demo,是我们不需要的。所以我们要把项目整理一下,删掉不要用的东西。



首先,我们可以把这三个目录下的内容都删掉

“components”,“images”,“pages”。



接下来我们打开app.json,注意“pages”这个字段的值,这里面引用的是一些demo路径。现在我们要把这些路径都删掉。然后写下自己的第一个界面路径。

"pages": [

    "pages/home/home"

  ],



在这里,我们写了一个路径,而相应的微信开发着工具,就会在这个路径下生成一个默认的页面:home。 



在网站的概念中,这就是网站的首页。我们可以看到,在home文件夹下,有四个文件。这四个文件都负责什么作用呢?让我们一一细说。



home.js 这个文件看后缀名就知道,我们它负责程序的业务逻辑,例如获取数据,设定数据,界面跳转等。



home.json 这是页面的配置文件,引入一些第三方的库和模块都可以在这里设置。



home.wxml 我们可以把这个后缀名分为w和xml,所以它本质是个xml文件,起的作用是定义页面的界面。我们可以把整个页面上有什么视觉内容都在这个文件中定义好。



home.wxss 这其实是一个css样式文件。



所以由上面四个文件组成了如下的视觉效果

这是开发者工具创建的默认界面,

<text>pages/home.home.wxml</text>



至此,我们完成了今日的第一部分内容,整理项目文件。



接下来,我们要引入一个非常牛逼的UI组件库,来自有赞团队的Vant Weapp。让我们打开他们的首页。



https://youzan.github.io/vant-weapp/#/intro



大家可以去上面的网址看看他们提供的UI组件和强大的自定义能力,别玩了再跳回来继续看我的文章哟。如果你看完了,我们就来看看如何引入这个牛逼的库。我们在项目网站的“快速上手”中可以找到安装教程。在这里我简单的说一下:



1 右键单击miniprogram文件夹,选择“在终端打开”



2 通过# 通过 yarn 安装

yarn add @vant/weapp  —production



3 我们打开微信开发者工具右边的“详情”按钮,在本地设置中,勾选上“使用npm” 



4 构建 npm 包



让我们打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件 



至此,我们就完成了vant weapp组件库的导入。在我们的项目文件中,会出现 “miniprogram_npm”和“node_modules”两个目录,还有package.json和yarn.lock这两个文件。 

至此,我们就完成了Vant Weapp UI组件库的导入。最后有一个大坑别忘记了,我们要在app.json 中把"style": “v2”给删掉。官方给出的理由是“程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。”



希望有赞团队以后能改进,要不然总觉得不完美。



对了,我把代码放到了github上

https://github.com/gogoswift/luckin



发布于: 2020 年 05 月 03 日阅读数: 344
用户头像

与码共舞 2018.03.26 加入

我在浪尖浪,哪管它是前浪还是后浪。

评论 (2 条评论)

发布
用户头像
楼主没有说明为什么必须要引入Vant Weapp组件库啊,到目前为止,用到的仅仅是tabBar组件,但其实原生开发只需要在app.json写上5行代码就可以有5个tab了,感觉单独将home页作为tabBar的切换,没什么必要啊?或者说我没有领会楼主的意思?能说明一下么?
2020 年 05 月 27 日 14:40
回复
vant有很多组件非常方便,随着开发的深入用的多了,自然就体会到好处了。这已经是我开发小程序时必备的库了。所以在一开始就介绍如何引入。这个系列最近没什么时间完成它,再过段时间闲下来就继续完成
2020 年 07 月 26 日 12:28
回复
没有更多了
高仿瑞幸小程序 01 初建项目,引入Vant Weapp