微信开发前端框架,前端小程序开发

Vant Weapp是有赞前端团队开源的移动端微信小程序组件库微信开发前端框架，组件丰富，生态活跃，应该是目前最火的微信小程序UI组件库

一、安装

1、npm安装

npm i @vant/weapp -S --production

2、修改app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱

3、修改project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置

{ ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ] }}

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

4、构建npm包

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

npm构建

二、使用

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装// app.json"usingComponents": { "van-button": "@vant/weapp/button/index"}

组件使用

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>三、常用组件事例

1、按钮

引入

"usingComponents": { "van-button": "@vant/weapp/button/index"}

按钮类型

// 支持default、primary、info、warning、danger五种类型，默认为default<van-button type="default">默认按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><van-button type="warning">警告按钮</van-button><van-button type="danger">危险按钮</van-button>

朴素按钮

// 通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色<van-button plain type="primary">朴素按钮</van-button><van-button plain type="info">朴素按钮</van-button>

按钮事例

2、icon图标

组件引入

"usingComponents": { "van-icon": "@vant/weapp/icon/index"}

基本使用

<van-icon name="close" /><van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />

3、时间选择器

组件引入

"usingComponents": { "van-datetime-picker": "@vant/weapp/datetime-picker/index"}

基本使用

<van-datetime-picker type="datetime" value="{{ currentDate }}" min-date="{{ minDate }}" max-date="{{ maxDate }}" bind:input="onInput"/>Page({ data: { minHour: 10, maxHour: 20, minDate: new Date().getTime(), maxDate: new Date(2019, 10, 1).getTime(), currentDate: new Date().getTime(), }, onInput(event) { this.setData({ currentDate: event.detail, }); },});

时间选择组件

4、Field组件

组件引入

"usingComponents": { "van-field": "@vant/weapp/field/index"}

基本使用

<van-cell-group> <van-field value="{{ value }}" placeholder="请输入用户名" border="{{ false }}" bind:change="onChange" /></van-cell-group>Page({ data: { value: '', }, onChange(event) { // event.detail 为当前输入的值 console.log(event.detail); },});

Field组件

还有很多实用的组件，细节上大家可以去官网查看，微信开发前端框架我平时项目的业务开发基本上都能满足

觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧