原生小程序 引入vant-weapp 组件库 和 WeUI组件库
目录
- 原生小程序 引入vant-weapp 组件库
- project.config.json 文件配置
- app.json 配置
- 生成 miniprogram_npm 文件
- 使用vant 组件库
- 原生小程序 引入 WeUI组件库
- 配置相关
- 使用
原生小程序 引入vant-weapp 组件库
- vant-weapp官网
- 创建项目后 npm init -y 一直回车
- 下载:
npm i @vant/weapp@1.3.3 -S --production
- 生成 node_modules - @vant
project.config.json 文件配置
- "setting"对象下的
"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./"}]
app.json 配置
"usingComponents": {"van-button": "@vant/weapp/button/index"}
生成 miniprogram_npm 文件
使用vant 组件库
<van-button type="primary">主要按钮</van-button>
原生小程序 引入 WeUI组件库
- 下载:
npm i weui-miniprogram --production
- –production 目的在于可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小
配置相关
01:构建npm
02:引入样式
app.wxss
/* 引入 WeUI样式 */ @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
若是报错的话,可以尝试这样下载:
npm i weui-miniprogram --save
之后再构建npm
使用
小程序UI
再index.wxml首页使用
inedx.json
{"usingComponents": {"mp-dialog": "weui-miniprogram/dialog/dialog"}
}
- index.wxml
<!--index.wxml-->
<view class="container"><mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}"><view>test content</view>
</mp-dialog>
</view>
- index.js
// index.js
Page({data: {buttons: [{ text: '取消' },{ text: '确认' }]},
})
原生小程序 引入vant-weapp 组件库 和 WeUI组件库相关推荐
- 微信小程序引入vant Weapp
1.微信小程序的内置终端用不了,只能使用外部终端 点击微信开发者工具>视图>命令面板(或者Ctrl+Shift+Alt+P)打开外部终端 或者直接Ctrl+Shift+C直接打开 2.打开 ...
- Day267/300 Mac微信小程序引入@vant/weapp样式不生效问题
(一)需求 微信小程序想使用Vant Weapp ,按照官网的步骤安装成功,但是就是不生效--是在真机预览的时候生效,但是在开发工具上的时候不生效. 折腾了一天多,终于解决了,分享给大家. (二)官网 ...
- 微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
- 微信小程序引入Vant UI
微信小程序引入Vant UI 第一次导入Vant UI时,照着vant weapp 官网给的"快速上手"文章做的,结果出了几大错误,改了半小时才解决.下面将完整演示引入流程. 1. ...
- 微信小程序中Vant Weapp的引用与使用
微信小程序中Vant Weapp的引用与使用 1.安装方式 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @va ...
- 微信小程序使用vant weapp报错
微信小程序使用vant weapp报错 错误一:构建错误 错误二:["usingComponents"]["van-button"] 未找到 我的安装流程 1. ...
- 微信小程序引入 Vant UI
微信小程序引入 Vant UI 一. 安装 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @vant/weapp ...
- 小程序安装Vant Weapp详细步骤,下载和npm安装版
小程序安装Vant Weapp详细步骤 使用npm下载 1.新建项目并初始化项目 2.下载Vant Weapp 3.修改 app.json 4.构建 npm 包 5.引入组件 下载方式 1. npm下 ...
- 微信小程序引入iview weapp
微信小程序引入iview weapp 1. 下载iview 方式1:前往github下载 iview下载地址 方式2:在项目中通过npm引入 2. 引入下载好的文件 解压文件,目录如下 将其中的dis ...
- 微信小程序升级Vant Weapp版本
微信小程序升级Vant Weapp版本 大家好,今天我们来学习一下微信小程序如何升级Vant Weapp版本,好好看,好好学,超详细的 第一步 首先你要有一个构建npm的项目 还不知道构建npm的小伙 ...
最新文章
- HTML的标签描述20
- 【文本分类】BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding
- 比特币现金开发者:BCH网络将“提升到VISA级别”来处理交易
- 一个小度科技就估值200亿,百度现在被低估了吗?
- 【Spring】BeanFactory解析bean详解
- JavaSE学习笔记(二十九)—— 其它流
- App Store审核被拒的23个理由
- C语言重要知识点回顾
- 如何在Python中建立回归模型
- Idea加快开发的10个技巧
- 为Unreal4制作插件
- java中none applicable_Java线程使用技巧学习(二)
- python程序设计基础第二版pdf下载_Python语言程序设计基础(第二版) 包含Python语言程序设计基础(第二版)pdf - 下载 - 搜珍网...
- 蚂蜂窝VS穷游最世界-自由行类App分析
- 微信读书分享群+无限卡攻略
- 100+个数据分析常用指标和术语
- python0x452_python at 0x
- TM1638驱动数码管的一点建议,附程序
- OS X Mountain Lion高手进阶
- 快钱CEO关国光:在家睡觉也可以赚钱