因为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样式文件中 引入其余的zanUI样式

　　　　　　

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

　　　　　　

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

　　　　　　  效果图 zan-tab

　　　　　 在页面中使用时 import导入 ,

　　　　　　

　　　　　　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--使用zanUI组件的更多相关文章

  1. WePY | 小程序组件化开发框架

    资源连接: WePY | 小程序组件化开发框架 WePYAWESOME 微信小程序wepy开发资源汇总 文档 GITHUB weui WebStorm/PhpStorm 配置识别 *.wpy 文件代码 ...

  2. wepy框架自定义组件编译报错not Found File XXX.wxss

    今天在自己写wepy框架组件的时候编译后报错not Found File XXX.wxss 我去,当时我很难受啊,调用组件时结构和逻辑都正常,一写样式就原地爆炸 解决之路:1.先打开编译后的dist文 ...

  3. wepy框架滑动组件使用

    https://github.com/dlhandsome/wepy-com-swiper

  4. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  5. 微信小程序之：wepy框架

    1.介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 2.使用 npm install -g wepy-cl ...

  6. 小程序第三方框架对比 ( wepy / mpvue / taro )(转)

    文章转自  https://www.cnblogs.com/Smiled/p/9806781.html 众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程 ...

  7. 小程序第三方框架对比 ( wepy / mpvue / taro )

      众所周知如今市面上端的形态多种多样,手机Web.ReactNative.微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端 ...

  8. 快速入门 WePY 小程序【转】

    一.WePY介绍 WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性. 二.WePY 使用 1.WePY的安装或更新都 ...

  9. 使用wepy框架搭建微信小程序采坑记（一）

    1.什么是wepy 这个框架是腾讯内部出的一个类MVVM的小程序开发框架.大体上来说语法是类VUE的,所以如果有VUE开发经验的话迁移成本会低一些.至于具体的怎么使用我就不赘言了,有问题查文档(官方文 ...

随机推荐

  1. POJ Pseudoprime numbers（ Miller-Rabin素数测试 ）

    链接:传送门 题意:题目给出费马小定理:Fermat's theorem states that for any prime number p and for any integer a > 1 ...

  2. [bzoj2662 BeiJing wc2012] 冻结 (分层图+最短路)

    传送门 Description "我要成为魔法少女!" "那么,以灵魂为代价,你希望得到什么?" "我要将有关魔法和奇迹的一切,封印于卡片之中„„&q ...

  3. Maven Hibernate

    1.使用maven管理Hibernate实现自动装配jar包 2.需要在配置文件pom.xml中引入 如:引入hibaernate5.2.11.Final版本的jar包,需要做如下配置: <!- ...

  4. HTTP中的重定向和请求转发的区别(转)

    时间长有些忘了,转篇文章加深一下印象: 一.调用方式 我们知道,在servlet中调用转发.重定向的语句如下:request.getRequestDispatcher("new.jsp&qu ...

  5. Linux常用命令last的使用方法详解

    http://www.jb51.net/article/120140.htm 最近在学习linux命令,学习到了last命令,发现很多同学对last命令不是很熟悉,last命令的功能列出目前与过去登入 ...

  6. snmp--CentOS安装Net-SNMP小计

    http://blog.csdn.net/tmpbook/article/details/39620549

  7. 用友ERP T6技术解析（六） 库龄分析

    2.4 库存管理   2.4.1 库龄分析 介绍:库存账龄是在某时间节点,某种或某类存货的库存时间的加权平均值,跟库存周转率关系明显,库存周转率越高,库存账龄越低,可是二者又不是反比关系.不能简单把库 ...

  8. Android 运行 gson.toJson(object) 报java.lang.StackOverflowError异常

    如以下的代码,运行后报java.lang.StackOverflowError错误: MusicSavedInfo musicSavedInfo=new MusicSavedInfo(currentS ...

  9. 数组进行多少次OP操作，才干有序

    1 题目描写叙述: 有一个数组:2,1,4,3.对于数组,有一种操作op(idx):将该index相应的数字移到首位.比方: op(3):  2 1 43 -> 3 2 1 4 op(1):   ...

  10. weblogic状态监控脚本

    echo "======================================welcome============================================ ...