因为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. 【BZOJ4864】【BJWC2017】神秘物质 - Splay

    题意: Description 21ZZ 年,冬.小诚退休以后, 不知为何重新燃起了对物理学的兴趣. 他从研究所借了些实验仪器,整天研究各种微观粒子.这一天, 小诚刚从研究所得到了一块奇异的陨石样本, ...

  2. [luogu P1962] 斐波那契数列（带快速幂矩阵乘法模板）

    题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f(n) = f(n-1) + f(n-2) (n ≥ 2 且 n 为整数) 题目描述 请 ...

  3. Hibernate之HQL基本用法

    关于HQL HQL与SQL非常类似,只不过SQL的操作对象是数据表,列等对象,而HQL操作的是持久化类,实例,属性等. HQL是完全面向对象的查询语言,因此也具有面向对象的继承,多态等特性. 使用HQ ...

  4. 0108MySQL集群搭建详解（三种结点分离）

    转自http://blog.csdn.net/yang1982_0907/article/details/20716845,感谢博主 本文将搭建一个最简化的MySQL Cluster系统,配置方法中的 ...

  5. 数据库-mongodb-高级查询表达式

    不等于  $nq 1 2 SQL : select * where != 3 NOSQL : db.goods.find({cat_id:{$ne:3 }},{cat_id:1,id:0}); NOS ...

  6. Hadoop(2)_机器信息分布表

    1.分布式环境搭建 采用4台安装Linux环境的机器来构建一个小规模的分布式集群. 图1 集群的架构 其中有一台机器是Master节点,即名称节点,另外三台是Slaver节点,即数据节点.这四台机器彼 ...

  7. JAVA循环迭代中删除或添加集合数据报java.util.ConcurrentModificationException错误

    1.写出下面的输出结果 public class test{ public static void main(String [] args) List<String> list = new ...

  8. 用Python实现简单的服务器

    socket接口是实际上是操作系统提供的系统调用.socket的使用并不局限于Python语言,你可以用C或者JAVA来写出同样的socket服务器,而所有语言使用socket的方式都类似(Apach ...

  9. 有关文档碎片（document fragment）的使用方法

    通常情况下改动.删除或者添加DOM元素. 更新DOM会导致浏览器又一次绘制屏幕,也会导 致reflow,这样会带来巨大的开销.我们通常解决这的办法尽量降低更新DOM.这也就意 味着将DOM的改变分批处 ...

  10. gitlab一键安装 笔记

    0 简单介绍bitnami和gitlab bitnami BitNami是一个开源项目,该项目产生的开源软件包安装 Web应用程序和解决方式堆栈.以及虚拟设备. bitnami主办Bitrock公司成 ...