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

时间:2022-05-12 阅读:11 评论:0 作者:老李

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组件

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

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

本文链接: https://www.liaier.com/1049.html 转载请注明出处!

相关文章 是不是在找它?!
评论区 交流一下吧!

共有0条评论来说两句吧...

欢迎 发表评论: