高仿瑞幸小程序 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