小程序组件使用库(小程序组件库有哪些)

网友投稿 762 2022-12-29

本篇文章给大家谈谈小程序组件使用库,以及小程序组件库有哪些对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 今天给各位分享小程序组件使用库的知识,其中也会对小程序组件库有哪些进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

本文目录一览:

小程序使用npm引入Weui组件库

1、创建小程序项目

2、在小程序根输入npm init,进行初始化,然后一路可以默认(enter)之后可看到package.json

3、开始安装Weui组件库 npm install --save weui-miniprogram --production

4、工具构建npm

5、点击小程序开发工具右上角详情-本地设置,勾选上使用npm模块

[图片上传中...(image-b7a8e2-1624982995933-0)]

6、在小程序app.wxss中引入样式文件

@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

7、index页面使用

//index.json { "usingComponents": { "mp-dialog": "weui-miniprogram/dialog/dialog" } }

//index.wxss <mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}" <viewtest content</view </mp-dialog

小程序的 iview Weapp 组件库的使用

iview 这个 UI 框架想必大家都很熟小程序组件使用库小程序组件使用库,这个搞 Vue 框架小程序组件使用库的基本素养。下面来看看小程序版的。
商城小程序必备的数字输入框。

在 .json 中引入组件

在 .wxml 中引入

下面是运行的效果小程序组件使用库,总的来看还是不错的。

还有个常用的动作面板。
从底部弹出的模态框小程序组件使用库,提供和当前场景相关的 2 个以上的操作动作,也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

在 .json 中引入组件

在 .wxml 中引入组件

这个动作面板和微信小程序原生的动作面板有啥视觉的区别,一起来看看:
总的来讲 iview 还比较好看的。
更多用法去参考: https://weapp.iviewui.com/

另外有赞出品的 vant 框架小程序版,使用方法去看 小程序如何使用 npm 工具

小程序安装第三方组件库 如:vant

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-yi-tong-guo-npm-an-zhuang

vant 小程序组件库

第一步 先npm init 回车 初始化新建package.json文件包
如果微信开发者工具无法输入命令 打开cmd面板 cd d:/ 进入目录 cd users 知道进入小程序项目目录输入命令
第二步 ## 安装

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

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

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

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

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

如果小程序组件使用库你使用 typescript 开发小程序,还需要做如下操作,以获得顺畅的开发体验。

请将 path/to/node_modules/@vant/weapp 修改为项目的 node_modules 中 @vant/weapp 所在的目录。

使用时:

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#yin-ru-zu-jian
vant小程序使用说明文档
在 app.json 或 index.json 中引入组件,详细介绍见 快速上手 。

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

关于小程序组件使用库和小程序组件库有哪些的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。 小程序组件使用库的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于小程序组件库有哪些、小程序组件使用库的信息别忘了在本站进行查找喔。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:足球一网通办(中国足球协会信息化平台)
下一篇:小程序 app(小程序appid在哪里看)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~