因为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. C语言提高 (2) 第二天 用指针对字符串进行操作

    2 昨日回顾 p++: (把地址转换成整型 加上它所指向的数据的大小 3指针成立条件和间接赋值 条件一:有两个变量 其中至少一个是指针 条件二:建立关联 条件三:间接操作 4间接操作的例子 5间接操作 ...

  2. PHP中调用Soap/WebService

    关于在PHP中如何调用Soap/WebService的描述,网络上有不少帖子.但是主要讲述了如何用PHP开发服务器端.客户端并加以关联,而很少触及在PHP中调用现成的WebService的情况.在本文 ...

  3. JavaScript进阶【三】JavaScript面向对象的基础知识复习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. POJ 2395 Out of Hay（ 最小生成树 ）

    链接:传送门 题意:求最小生成树中的权值最大边 /************************************************************************* & ...

  5. python简单post信息

    最近学了点关于python的网络爬虫的知识,简单记录一下,这里主要用到了requests库和BeautifulSoup库 Requests is an elegant and simple HTTP ...

  6. 提高生产力：Web开发基础平台WebCommon的设计和实现

    Web开发中,存在着各种各样的重复性的工作.为了提高开发效率,不在当码农,我在思考和实践如何搭建一个Web开发的基础平台. Web开发基础平台的目标和功能 1.提供一套基础的开发环境,整合了常用的框架 ...

  7. JavaScript 事件对内存和性能的影响

    程序代码: <%-- Created by IntelliJ IDEA. User: 乔克叔叔 Date: 2017/12/26 Time: 16:45 To change this templ ...

  8. DOM中元素节点，属性节点，文本节点的理解

    节点信息 每个节点都拥有包含着关于节点某些信息的属性.这些属性是: nodeName(节点名称) nodeValue(节点值) nodeType(节点类型) nodeType nodeType 属性可 ...

  9. poj 2377 最大生成树

    #include<stdio.h> #include<stdlib.h> #define N 1100 struct node { int u,v,w; }bian[11000 ...

  10. oracle自定义判断是否数字函数isNumber（）

    右击function选择新增 如果是数字返回本身,如果不是数字返回0: create or replace function isNumber(p in varchar2) return number ...