小程序框架 WePy中 -- 使用 zanUI组件

2024-06-07 22:07:38

因为Wepy 中不能直接引入zanUI组件, 好在还有百度, 参考链接 https://github.com/brucx/wepy-zanui-demo(感谢);

我的做法是将源码下了下来, 源码中将zanUI组件用Wepy的文件类型写了出来 , 然后在项目中需要用到的那个,再添加进来,加以应用;

步骤截图

　　1: 在src下创建文件夹, 存放zanUI的样式文件, helper.scss 与 common.scss 基础样式, 接着看自己用到什么,就引入什么, 比如要用 icon图标, 就加入icon.scss样式.

2: 入口处 app.wpy引入zanUI样式文件, 注意引入时结尾是 .wxss ; helper是基础样式

在helper样式文件中引入其余的zanUI样式

使用zanUI中的 icon图标 (使用按钮样式也是一样的过程)

3: 使用zanUI组件中的布局; 比如使用 zan-tab, 在src的components文件下创建单独文件夹, 存放tabBar布局;

将zan-tab组件通过import导入进页面, 声明之后,使用组件 zanTab

效果图

对于Wepy中使用组件, 具体参考官方文档 https://tencent.github.io/wepy/document.html#/?id=%e6%99%ae%e9%80%9a%e7%bb%84%e4%bb%b6%e5%bc%95%e7%94%a8

Wepy框架目前也是边学习边开发, 加油!

小程序框架 WePy中 -- 使用 zanUI组件相关推荐

对小程序框架WePY的精简总结
大家下午好,萍子最近一直都在写小程序的项目,其中也涉及到了小程序的框架--WePY,讲真的,一开始对这个框架并没有很熟悉,所以也是看了多次它的对应文档,然后特此整理下来,写成博文保存一下,方便日后查看 ...
wepy微信小程序框架和wept第三方小程序开发工具
微信小程序框架wepy文档: 参考链接:https://segmentfault.com/a/1190000007580866 点击打开链接点击打开链接微信小程序第三方开发工具wept: 项目地址 ...
认识WebStorm-小程序框架wepy
WebStorm是一个功能强大的IDE,适用于JavaScript开发,适合使用Node.js进行复杂的客户端开发和服务器端开发. WebStorm具有对JavaScript,HTML, CSS及其现 ...
微信小程序开发框架—wepy快速入门
小程序框架wepy文档 Github地址 wepy官网:https://tencent.github.io/wepy/index.html 项目创建与使用安装wepy 以下安装都通过npm安装 ...
小程序框架对比 ( WePY / mpvue / Taro )
摘要: 对比小程序框架. 原文:小程序第三方框架对比 ( wepy / mpvue / taro ) 公众号:前端小苑 Fundebug经授权转载,版权归原作者所有. 众所周知如今市面上端的形态多种多 ...
原生开发小程序和 wepy 、 mpvue 对比
原生开发小程序和 wepy . mpvue 对比本文横向对比.探讨了下原生开发小程序,和目前比较热门的 wepy .mpvue 开发小程序三种方式的优势和劣势:由于三者的篇幅都比较多,本文只是简单 ...
滴滴开源小程序框架 Mpx
Mpx 是一款致力于提高小程序开发体验的增强型小程序框架,通过 Mpx,能够以最先进的 Web 开发体验 ( Vue + Webpack ) 来开发生产性能深度优化的小程序,Mpx 具有以下一些优秀特 ...
小程序开发框架WePY和mpvue使用感受
今天想和小伙伴聊聊小程序开发框架的问题. 种种原因,去年年末接触到了小程序,使用mpvue做了两个项目,也使用WePY做了一个项目,关于这两个框架的恩恩怨怨,我觉得我有资格说两句. 1.主人公介绍首 ...
小程序框架选型必看：Taro vs uni-app选型经历！
公司新产品要求发布到各家小程序,最近研究对比了社区主流的几家小程序开发框架,独坑不如拉人众坑,分享给各位,欢迎和我一起入坑:) 背景最近老板不知怎的很重视各种小程序平台,感觉要靠小程序完成今年大半k ...

最新文章

热门文章