教程请查看小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 自定义组件:自定义组件可以将不同页面具有共同样式的布局独立开来,减少代码的重复冗余,也能更好的维护组件. 例:自定义弹框,自定义加载,自定义列表等等,自定义弹框网上教程很多,此处就讲讲自定义列表,原理大同小异,细节需要多加注意. 最终效果: 1.建立component文件夹,专门存放自定义组件  如:goodsList

首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class

概述 自己封装的一个比较简单微信弹窗小组件,主要就是教会大家对微信小组件的用法和理解,因为微信小程序对组件介绍特别少,所以我就把自己的理解分享给大家 详细 代码下载:http://www.demodashi.com/demo/13177.html 一.前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现呢.可能你会去看官方文档,但是微信的官方文档也是

概述 今天在网上突然看到iView新出了一个微信小程序的组件库iView Weapp,自己就上手试了一下,发现用起来还是不错的,把自己使用的过程与大家分享下. 一 预览iView组件 1.可以在手机上扫码查看这个组件,但是我们想使用哪一个组件是什么样的,就需要在手机上看这个组件是什么样的,其实这样挺麻烦的,不过我还是把二维码给放过来吧. 2.就是在web微信开发者工具中查看,首先去github上下载,下载地址:https://github.com/TalkingData/iview-weapp,

官方文档  binderror HandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 在微信小程序开发中,我们使用列表包含图片,如果这个图片链接404错误,那么我们应该给它提供一个默认的友好URL地址.html和js中使用onerror事件就可以了 <img src="image.gif" onerror="this.src='https:w.chesu

不久前微信小程序发布了web-view组件,这个消息在各个圈里引起不小的涟漪.近期正好在做小程序的项目,便研究了一下这个让大家充满期待的组件.   1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.简单来说,这个组件是一个和当前页面一样大小的容器,容器里显示的是属性src引用的url的内容.类似于html中的iframe框架.不同的是iframe可以自定义大小边框等样式,webview自动铺满整个小程序页面.   2

这个问题是小程序input组件的bug,目前的解决办法可以,在input标签上加一个其他标签,显示placeholder内容,获得焦点时消失,失去焦点时候再让其显示 <view class='input-box'> <input placeholder='' class='inputtext' maxlength='11' type="number" bindinput="bindKeyInput" bindblur="blurinput

使用小程序的组件map时 在开发者工具上一切顺利 但是在真机预览时 发现地图的层级是最高的 任何标签都覆盖不了它 调整z-index值并没有什么效果 原因是 微信小程序的map.video.canvas.camera等组件都是原生组件,层级是最高的,并不能像原生开发那样使用z-index来控制层级. 从1.4.0基础库中增加了一个组件cover-view,用于在map.video.canvas.camera等原生组件上显示基础原生视图. 但是用了cover-view这个组件之后 我又发现了一个问

今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) {  var second = that.data.seco

本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html 1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.简单来说,这个组件是一个和当前页面一样大小的容器,容器里显示的是属性src引用的url的内容.类似于html中的iframe框架.不同的是iframe可以自定义大小边框等样式,webview自动铺满整个小程序页面.   2,这个组件能给我们带来什么? 小程序的页

问题一: 使用微信小程序input组件时,在移动端唤起focus或blur事件时,因光标占位导致内容出现叠影及抖动现象. 解决方案: 用<textarea>组件代替了<input/>组件,并给textarea设置了宽度值 问题二: 使用textarea组件时,当在移动端初次focus,原本应在内容末尾的光标,向左移动了一个位置 解决方案: 在设置textarea自带光标相关属性cursor.selection-start.selection-end无效后,在textarea属性中添

小程序 video 组件同层渲染公测   各位开发者: 大家好. 小程序原生组件因脱离 WebView 渲染而存在一些使用上的限制,为了方便开发者更好地使用原生组件进行开发,我们对小程序原生组件引入了 同层渲染 模式.通过同层渲染,小程序原生组件可与其他内置组件处于相同层级,不再有特殊的使用限制. 现阶段,小程序 video 组件 已切换至同层渲染模式.在该模式下,video 组件可以做到: 1.直接通过 z-index 属性对 video 组件进行层级控制: 2.无需使用 cover-view

推荐3个小程序开源组件库 在进行小程序开发时,经常会遇到编写组件方面的阻碍,这让我们花费大量的时间在页面以及 CSS 样式编写上.因此可以使用开源组件库,有些复杂的组件可以直接拿来使用,节省开发时间,避免重复造轮子. Vant 由「有赞」团队维护的开源项目,目前 GitHub 上有 8057 颗 ⭐.Vant 提供了一整套 UI 基础组件和业务组件,通过 Vant 可以快速搭建出风格统一的页面,提升开发效率.除了一些常用的 UI 组件,Vant 还提供了一些适用于商城小程序的业务组件,例如省市区

开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面5款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它们的你,可以关注和了解一下哦! WeUI WXSS WeUI WXSS是腾讯官方UI组件库WeUI的小程序版,提供了跟微信界面风格一致的用户体验. GitHub地址:https://github.com/Tencent/weui-wxss npm下载:npm i weui-wxss     iVie

小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap

转自:https://idig8.com/2018/08/11/xiaochengxu-chuji-23/ 开始了解下小程序的组件.源码:https://github.com/limingios/wxProgram.git 中的No.10 组件 多个组件构成一张视图页面>经过样式和布局,页面其实理解成html 组件包含<开始标签></结束标签> 每个组件都包含一些公用属性 官方的阐述 https://developers.weixin.qq.com/miniprogram/d

本文介绍微信小程序的组件 视图容器 基础内容 表单组件 导航组件 媒体组件 视图容器 view 布局容器 <view hover-class='bg'>222</view> 可以添加的属性如下 hover-class 点击展示的类名 hover-stop-propagation 是否阻止冒泡 hover-start-time 点击多久出现hover效果 hover-stay-time 点击取消hover效果持续时间 scroll-view 可滚动容器 <scroll-view

Wuss Weapp 一款高质量,组件齐全,高自定义的微信小程序 UI 组件库 文档 https://phonycode.github.io/wuss-weapp 扫码体验 使用微信扫一扫体验小程序组件示例 演示图片 快速上手 在开始使用 Wuss Weapp 之前,你需要先阅读 微信小程序自定义组件 的相关文档. 如何使用 方法一 [推荐] (通过npm安装依赖并在小程序构建npm模块) 通过使用shell命令或git定位到当前小程序开发目录,然后使用npm或者yarn安装依赖. npm in

wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e5%8c%96%e5%bc%80%e5%8f%91%e6%a1%86%e6%9e%b6wepy%e5%ae%98%e6%96%b9%e6%96%87%e6%a1%a3 组件 原生小程序支持js模块化,但彼此独立,业务代码与交互事件

经过了两个月不到的开发时间,我们phonycode团队顺利的发布了小程序的UI组件库 wuss-ui 的第一个版本.目前大体预览如下 介绍 wussUI 现在有大概27个组件左右, 目前基础组件都有了,布局组件比较少.我们将会在wuss 第二期开发的时候添加更多关于布局的组件. 目前我们也在npm上发布了wussUI的第一个版本,欢迎直接下载使用. npm install wuss-weapp -s --production 目前,小程序也有大部分开源的组件库了,比如taroUI.vant-ui

写在前面:有开发过小程序的朋友肯定知道组件化开发的特性,高内聚与低耦合.使用已有的UI组件库,诸如:vantUI-weapp.minUI-weapp等UI组件库的诞生使我们的开发速度大大的加快,丰富的组件拿来即用[更多的UI组件库.框架可查看我的另一篇博客移动端.PC端(前后台).小程序常用的UI框架.],但是大家有没有遇到过只想使用某个组件库的某个单一功能.或者想把组件库中优秀的组件集合到自己的组件库中,或者说想开发自己的UI组件库看了官网文档却无从下手呢,接下来,请跟随我,从零开发一款自己的