因为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. Python笔记13------pandas作图

    1.pandas可以用来画DataFrame和Series的图 如: import numpy as npimport matplotlib.pyplot as pltimport pandas as ...

  2. swap空间可以有效缓解内存压力

    不太了解底层的人对swap空间的概念也很模糊,这里我简单举例,看看swap空间的作用 查看当前swap空间:3个方式 [root@localhost /home/xxx/kirin/os_diagno ...

  3. Project Euler 13 Large sum

    题意:计算出以下一百个50位数的和的前十位数字. /************************************************************************* ...

  4. JavaScript链式编程模拟Jquery函数

    <span>Hello,World!</span> <script type="text/javascript"> Jq = function ...

  5. Servlet 3.1 标准（一）

    概述 什么是Servlet Servlet 是一个基于Java 的Web组件,由容器管理生成的动态内容.就像其他的Java组件一样,Servlet是平台无关的Java类所编译成的字节码,可以被动态加载 ...

  6. BA-siemens-PXM液晶面板

    PXM面板作用:可以查看模块内部的信息,可以触发控制点来近程控制模块上的点位(非常便于现场调试). 优点:1.便于现场紧急控制,有些地方是必须要加上的,如工厂控制等项目,假如机器死机,可以通过面板切换 ...

  7. HDU 4365

    把涂色的格子按对称旋转至左上角. 当未涂色时,若要符合要求,则必须要求每一圈矩形都是上下左右对称的.注意是一圈的小矩形.对于N*N的阵,若最外层一圈的小矩形要符合要求,则(假设N%2==0)可以涂色的 ...

  8. Java多线程演示样例（模拟通话,sleep,join,yield,wait,notify,Semaphore)

    主线程等待子线程的多种方法 synchronized浅析 sleep 是静态方法,Thread.sleep(xx)谁调用谁睡眠. join 是合并方法.当前线程调用其它线程xx.join()则等到xx ...

  9. Android中的WiFi P2P

    Android中的WiFi P2P可以同意一定范围内的设备通过Wifi直接互连而不必通过热点或互联网. 使用WiFi P2P须要Android API Level >= 14才干够,并且不要忘记 ...

  10. 在C 函数中保存状态：registry、reference和upvalues

    在C函数中保存状态:registry.reference和upvalues      C函数能够通过堆栈来和Lua交换数据,但有时候C函数须要在函数体的作用域之外保存某些Lua数据.那么我们想到全局变 ...