创建小程序及引入vant-weapp组件及使用云开发

1.创建小程序

1.首先创建一个文件夹，用来存放小程序的文件，我一般在d盘创建个文件夹

2.然后双击打开 微信开发者工具，点击项目 -新建项目 ，然后就会出现个弹窗 创建小程序
写好 项目名称 找到刚才创建的文件夹的路径 AppID 可以去注册 也可以使用测试的，点击新建

3.鼠标右击pages，选择 新建文件夹 ，接着 在创建的文件夹上面 右击 ，选择 新建page，然后就会出现四个文件 分别是 .html，.wxss，.json，.js ，html文件就是用来写html，wxss文件用来写css样式，json文件用来配置这个页面的，js文件就是写js的

如新建个 test文件

2.引入 vant-weapp组件

1.首先 打开cmd，选择管理员模式 ，然后复制 文件夹的路径 进入这个目录

2.输入 npm init 初始化，然后就是一直回车
3.输入 npm i @vant/weapp -S --production 引入node_modules

4.点击 工具 - 构建npm - 点击确定

发现 项目里面有了个文件夹 miniprogram_npm ，里面是vant-weapp组件，然后
点击 详情-勾选 使用npm模块，此时已经可以在页面调用组件了！

调用组件的方式 去json文件下的配置 如想调用vant-button这个组件

3.vant组件在开发者工具里面的一些不同

vant里面

<van-search v-model="value"  @search="onSearch" placeholder="请输入搜索内容" ><van-search>

开发者工具里面

<van-search value="{{value}}" bind:search="onSearch" placeholder="请输入搜索内容"><van-search>

vant-weapp地址 https://youzan.github.io/vant-weapp/#/search

4.程序页面设置背景颜色

1.在单个页面设置背景颜色

在需要设置背景颜色的页面找到 .wxss文件
如 想要在 job里面设置背景颜色 ，只需在 job.wxss文件里面输入

page{backgroud-color:rgba(204, 204, 204, 0.596078431372549)}

即使切换了机型，背景颜色也是全部铺满的~

2.给所有的页面都设置背景颜色
只需在app.wxss里面

page{backgroud-color:rgba(204, 204, 204, 0.596078431372549)}

5.使用云开发

使用云开发需要正式账号的AppID，测试账号不能使用云开发

需要在project.config.json文件里面做些修改

然后点击 工具——构建npm

在本地设置里面 勾选 使用npm模块

修改后，效果如下