创建小程序及引入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模块
在这里插入图片描述

修改后,效果如下
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

coderdwy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值