微信小程序 - radio/checkbox自定义组件

前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现呢.可能你会去看官方文档,但是微信的官方文档也是说的不太清楚,所以写起来也是非常痛苦.今天就带大家手摸手开发微信组件,坐稳了,马路杀手要开车了. 具体实现 我们先实现个简单的弹窗组件,详情图如下: 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,

Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件,因此,我们在 components 组件中新建一个 home 文件夹来存放我们的弹窗组件,在 home 下右击新建 Component 并命名为 home 后,会生成对应的 json wxml wxss js 4个文件,也就是一个自定义组件的组成部分,此时你的项目结构应该如下图所示: Step2 组

本博文是通过实际开发中的一个实例来讲解自定义组件的使用. 第一步:新建自定义组件目录,如图,我新建了个componts和tabList目录,然后右键tabList目录选择新建compont取名为tabList,就生成了如下目录结构,组件结构和page一样,包含js json wxml wxss 四个文件 第二步:写好js 写好wxml  写法和page一样 第三步:在要使用的目标页面,配置下 第四步:以标签的形式在页面中使用: 传递数据和vue一样,通过自定义属性,如图红框中的tabData,组

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支付等功能. 组件 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组件,再联想到这些组件会用在哪些产品的哪些功能.对于接口也是一样,整体了解,而不需要细看. 熟悉了文档的结构,

小程序开发现在非常火,但是对于后台来说如何做到自定义tabBar呢?下面就来讲解下,如何实现微信小程序登录后根据用户身份权限不同跳转到不同的页面问题.首先需要解决的是:你要把底部导航做成一个公共模板template.wxml中代码:<template name="tabBar"> <view class="tab-bar" style="color: {{tabBar.color}}; background: {{tarBar.backg

接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是相对复杂的组件了,然后一般的日历组件又会有很多的变化,所以我们这里实现最基本的标签即可: 1 let View = require('behavior-view'); 2 const util = require('../utils/util.js'); 3 4 // const dateUtil

微信小程序checkbox <checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}" wx:key="item"> <checkbox value="{{item.name}}" checked="{{item.checked}}">{

view: view是小程序中的视图容器之一,似于html中的<div>标签 <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class=