大家好,我是前端菜鸟,大家可以叫我惊蛰,今天给大家分享一下在微信小程序中对weui的引入和使用,其他的也不再赘述,文中有不对的还请指正,谢谢. 直入主题: 1.下载weui 进入GitHub https://github.com/weui/weui-wxss/ 进入如下页面,点击红色框选下载程序代码 解压后进入文件夹,图示路径下的weui.wxss就是我们所需要的weui库  2.引入weui 打开微信开发者工具创建项目(这个就不在介绍了),目录如下 创建好项目,接下来要做的就是将刚才下载解压的

最近在做微信小程序,引入weui的时候踩坑了好久,这里记录一下遇到的问题. 微信官方文档给了两种weui引入方式: 通过 useExtendedLib 扩展库 的方式引入,这种方式引入的组件将不会计入代码包大小. 可以通过npm方式下载构建,npm包名为weui-miniprogram 但是注意!!!如果使用扩展组件的话必须使用npm的安装方式安装weui 以使用tabs选项卡组件为例子 第一步 进入你的小程序根目录下(带app.json的目录)初始化npm   这步的意思是让当前文件夹以nod

1.git下载,找到dist文件: https://github.com/wechat-miniprogram/weui-miniprogram 2.把dist文件中的style复制到根目录 app.wxss引入这个文件 @import '/style/weui.wxss'; 3.dist文件中example目录复制到根文件,(里面是设置相关的代码,直接复制出来使用) 4.app.json把需要引用的文件引到里面 "pages": [ //比如使用button,把他引入 "e

首先需要在lib目录中添加weui.wxss.searchbar和navbar结合主要解决两者的层次问题,即搜索框输入时,下方的检索结果能够覆盖住navbar.下面就开始发码啦: (1)wxml部分: <view class="page"> <view> <view class="page__bd"> <view class="weui-search-bar"> <view class=&qu

前言 经过将近一个多月的开发,我们团队开发的微信小程序 "出发吧一起" 终于开发完成,现在的线上版本为 2.2.4-beta 版 本文档主要介绍该小程序在开发中所用到的技术,已经在开发中遇到问题的采取的解决方法 原文链接(转载请注明出处):微信小程序:出发吧一起 开源地址 小程序简介 "让兴趣不再孤单,让爱好不再流浪" 是微信小程序<出发吧一起>的主题,这款小程序旨在解决当代大学生在校园生活中的孤独感,让大家找到志同道合的朋友,在跑步.健身.竞赛等活动中

这篇文章会很长,非常长,特别长,无敌长. 真的是挤牙膏般的项目进度,差不多是8月底有开始这个项目的想法,时至今日都1个多月了,抛去频繁的加班时间,王者时间,羽毛球时间...见缝插针的写这个项目,我竟然写完了,我竟然没有半途放弃,可真把我自己感动坏了. 好吧,主要是这个小程序很简单,本文会讲解一下这个小程序的代码,所有代码几乎是我一个个敲出来的,所有逻辑也是自己构思梳理的,因此很多实现方式并不是很好,冗余代码很多,代码质量堪忧,但我也在学习中,随着技术提升,会不断来重构代码,如果大家有任何建议欢迎

首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用个UI框架,这样可以省去以后很多麻烦. WeUI作为一个开源的移动端UI框架,由于它是微信官方提供的对微信的兼容性没有太大问题,而且和各组件的样式和微信一样,能够很好地和微信融合在一起,给用户较好的体验. 使用步骤 1.在GitHub上https://github.c

首先来看下WeUI的官方介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.在微信小程序的开发过程中,涉及到的前端复杂的样式界面的问题,就需要使用个UI框架,这样可以省去以后很多麻烦. WeUI作为一个开源的移动端UI框架,由于它是微信官方提供的对微信的兼容性没有太大问题,而且和各组件的样式和微信一样,能够很好地和微信融合在一起,给用户较好的体验. 使用步骤 1.在GitHub上https://github.c

一.使用weui 学习一个新的技术,想要最短时间掌握并熟练使用它,那就是直接做项目了.把技术直接应用到项目中来,直接做出东西,这是我的方法,因为我很懒不太喜欢看一步一步看文档,看理论. 那怎么使用weui,应用到项目中来呢? 1.因为小程序不使用npm,所以直接去github把weui下载下来: https://github.com/Tencent/weui-wxss/ 2.用微信开发者工具打开刚下载下来的weui项目:weui-wxss-master,看看这里面都有些什么,要用到什么就直接取他

微信小程序  PK  APP: 1.微信有海量⽤⼾,⽽且粘性很⾼,在微信⾥开发产品更容易触达⽤⼾:而推⼴app的成本太⾼. 2.微信小程序也可以跨平台(Android和IOS). 一.project.config.json中只需要修改appid 二.app.json中通过使用扩展库userExtendedLib的方式,引入并使用weui, WeUI 是由微信官方设计团队专为微信移动 Web 应用设计的 UI 库. 1.先在全局配置文件app.json中引入 "useExtendedLib&quo

一.前言 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库.有的,它就是WeUI. WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.actionsheet.icon等各式元素. 它的界面如图: 二.

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_116 之前的一篇文章详细阐述了微信小程序开发的准备和入门以及环境搭建,这一次我们介绍如何将微信小程序如何上线,同时配合weui美化界面. 本次做的微信小程序项目是一个类似在线题库的功能,面试者可以通过小程序来检索笔试题,同时用户输入关键词时同步监听输入行为,不需要点击就可以获取知识要点,后台采用tornado+mongodb+mortor的组合实现异步非阻塞的接口. 首先weui是腾讯团队为微信小程序设计的一款皮肤,可以提高用

ps:微信APP Store.微信小程序.微信应用号都是指同一个事情. 苦逼程序猿刚下班到家,还没来得及洗漱,收到条小道消息的推送.于是我有气无力的拿着手机点开了这条推送消息,映入眼帘的就是这张封面图片. 首先,已经有不少人拿到微信小程序的内测: 很荣幸,劳资连需要啥资格都不太了解. 微信小程序是个什么鬼呢?下面这段引用是从微博抄来的. 什么是小程序:小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走

前言 更好的阅读体验请:我的微信小程序入门踩坑之旅 小程序出来也有一段日子了,刚出来时也留意了一下.不过赶上生病,加上公司里也有别的事,主要是自己犯懒,就一直没做.这星期一,赶紧趁着这股热乎劲,也不是很忙,终于磨磨唧唧的写了个小demo,(当然还有好多接口没有使用). 预计阅读时间:5min 正文 介绍 小程序的框架,挺像Vue的. wxml <view> Hello {{name}}! </view> <button bindtap="changeName&quo

TODO:小程序集成WeUI WeUI 为微信 Web 服务量身设计.WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一.包含button.cell.dialog. progress. toast.article.actionsheet.icon等各式元素. 1.使用微信开发者工具添加新项目MWL 2.下载WeUI的源码,把style文件拷贝到MWL根目录,与pages文件夹同一级 3.WXSS(WeiXin Styl

微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp-gank - 微信小程序版Gank客户端 wechat-dribbble - 微信小程序-Dribbble wechatApp-demo - 微信小程序 DEMO weapp-ide-crack - 微信小应用资源破解 API - API 文档 weapp-quick - 微信小应用示例代码 wea

以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. Invoking Page() in async task. 截图如下: 解决办法:需要在每个XXX.js文件中加入page(),以用来生成一个页面实例对象. Page({ }); 有时就算你在每个js文件中都写了基本的page()代码,还是会保这个错误

作为前端工程师,从前端的视角,为大家分析下微信小程序和HTML5与之间的主要区别 第一条是运行环境的不同. 传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,大家注意,我这里写的是"非完整的浏览器",有以下几个原因 小程序的开发过程中会用到HTML5相关的技术(并非全部) 小程序最后的发布上线需要微信审核,微信在不更新自身软件的情况下可以将小程序更新到自身软件内,这就联想到了React Native框架,并且已经有开发者在微信小程序的开发工

新公司上手小程序.30天,从入门到现在,还没放弃... 虽然小程序发布出来快一年了,爬坑的兄弟们大多把坑都踩平了.而我一直停留在"Hello World"的学习阶段.一来没项目,只有项目才是实践学习的根本:二来刚出来,总是有很多坑.爬坑总是痛并快乐着. 再多的借口,产品项目需求拍在桌前,都得缴械投降.不要怂撸起袖子,就是干. 初识小程序 微信推出小程序,想要实现即开即用,用完即走的用户体验.免去APP下载安装繁琐的流程.听起来像谷歌推出的PWA,不过PWA普及到国内还有段时间.而小程序

不负众望,小程序终于在昨天1月9日正式上线,从凌晨微信公开课发布了微信<一月九日,一年之约>到现在,整整一天的时间,朋友圈.自媒体平台都在不断的发着关于小程序的各种文章,"APP杀手"."千亿级市场"."颠覆"."超级应用"等等各种词汇都用在了小程序身上,连人民日报公众后都转载了微信公开课的文章<[提醒]微信小程序上线了,关于它的解答都在这里>,一个小程序能有这么大魅力? 1.小程序访问渠道 在小程序还