讲真的，官网文档这方面写的让我很难下手 1.目标 一个搜索框组件 2.呈现效果 ?...search: function(value){ this.triggerEvent("search",value) } } }) 下面解读代码 1.properties 就是你需要父组件传给这个组件的一些值...自定义组件事件 代码里将input中输入的值，放到事件detail对象中传到外部 ? 输入信息 ?...信息 5.组件点击页面带参跳转 问题：开发的时候遇到了一个问题，当我点击组件，然后向详情页navigateTo的时候，不知道怎么获取当前组件的参数 ?...问题 解决： 通过传入配置再组件里的properties即可，在组件的方法里使用this.properties获取到当前点击组件的properties参数，里面就有当前传入组件的参数，再将其放入自定义触发事件里传到外部即可
前面写到微信小程序开发中每一个页面都对应四个文件，它们就是小程序页面组件index.wxml，index.wxss，index.js，index.json四个文件。...index.js： 小程序中的JavaScript文件。在这里可以连接微信云开发数据库，可发送请求给服务器等动态操作。这里就涉及到微信小程序中的云开发了，后面我也会写到。...Sinput/Sinput" }, "navigationBarTitleText": "页面标题" } 它与全局配置文件属性不同的是"usingComponents"属性，该属性用来声明自定义组件...，自定义组件是我们开发者自定义的标签，就像，我们可以自定义一个标签，给这个标签赋予需要的作用或样式，然后就可以在我们的页面使用它。...这里又涉及到了自定义组件的创建和使用，还是后面会详解。 其他的属性基本与全局配置文件无异，全局配置文件配置过的属性这里无需再次配置，如果重复配置优先显示页面配置文件中的属性值。
微信小程序 WEUL组件之 画廊组件 官方地址：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/gallery.html...组件介绍：用于多张图片展示，类似原生的wx.previewImage的展示。...阅读理解：这个其实就是可以将一组图片全屏放大显示的一个组件，通常可以用在产品多图展示点击看大图，内容中的图片展示，点击看大图。有了这个组件我们就可以省做大图效果的过程了。...虽然做大图效果也不麻烦，不过有现成的组件可以用，还是用组件更好一些。 看一下参数说明： ? 这些个参数里面我个人觉得最值得一提的只有 showDelete这个参数。...这样，一个完美的画廊组件调用案例就完成了。
小程序的宿主环境-组件 不常用： 2.常用的视图容器类组件 3.view 组件的基本使用 实现如图的 flex 横向布局效果: 4.scroll-view 组件的基本使用 实现如图的纵向滚动效果: 5....swiper和swiper-item 组件的基本使用 实现如图的轮播图效果: 6.swiper 组件的常用属性 想要有小圆点则加上indicator-dots 修改未选中的页面小圆点为白色 修改选中页面的小圆点为蓝色...自动切换，默认五秒 改为三秒自动切换 衔接切换，可后最后页面切回初始页面 7.常用的基础内容组件 8.text 组件的基本使用 9.rich-text 组件的基本使用 10.其它常用组件 11....button 按钮的基本使用 12.image 组件的基本使用 13.image 组件的 mode 属性 默认情况下，图片容易失真： 加上mode="aspectFit" 保持了图片本身的比例，但是可能留白
App 基类，小程序入口。...image.png 组件基类 ? image.png ? image.png ? image.png ? image.png ? image.png ? image.png ?
支持自定义组件开发 支持引入NPM包 支持Promise 支持ES2015+特性，如Async Functions 支持多种编译器，Less/Sass/Stylus/PostCSS、Babel/Typescript...、Pug 支持多种插件处理，文件压缩，图片压缩，内容替换等 支持 Sourcemap，ESLint等 小程序细节优化，如请求列队，事件优化等 Demo @...information 切换至项目目录 cd myproject 安装依赖 npm install 开启实时编译 wepy build --watch ├── dist 小程序运行代码目录...（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件） | └── app.wpy 小程序配置项...app.wxss文件） └── package.json 项目的package配置 版本init新生成的代码包会在根目录包含project.config.json文件 如果存在，使用微信开发者工具
导语 Bugly 之前发了一篇关于微信小程序的开发经验分享，小伙伴们在公众账号后台问了很多关于小程序开发方面的问题，精神哥在查阅相关内容的时候，发现了龚澄同学自己写了一个小程序开发框架，真的怒赞，赶紧安利给大家...通过wepy开发的代码经过编译后，能生成一份完美运行在小程序端的代码，而且wepy的目的就是让小程序开发更贴近于传统H5框架开发，让小程序能像开发H5一样支持引入NPM包，支持组件化开发以及支持JS新特性等等...一个是基于wepy开发的开源的仿微信的聊天界面 以上三个demo均在安卓机和IOS机上运行过通。...开发使用说明 使用微信开发者工具新建项目，本地开发选择dist目录。 微信开发者工具 → 项目 → 关闭ES6转ES5。 本地项目根目录运行wepy build --watch，开启实时编译。...在经过与开发小程序的同事求证后得知，确实会通信多次。
...... plugins： plugins为1.1.6版本之后的功能，目前支持js压缩wepy-plugin-ugliyjs、图片压缩wepy-plugin-imagemin，其他plugin持续开发中...properties } /** less **/ import wepy from 'wepy'; // 声明一个App小程序实例...index.wpy index 页面配置、结构、样式、逻辑 | └── log.wpy log 页面配置、结构、样式、逻辑 └──app.wpy 小程序配置项...index.wpy index 页面配置、结构、样式、逻辑 | └── log.wpy log 页面配置、结构、样式、逻辑 └──app.wpy 小程序配置项...目前总共有三种事件后缀： .default: 绑定小程序冒泡型事件，如bindtap，.default后缀可省略不写； .stop: 绑定小程序捕获型事件，如catchtap； .user: 绑定用户自定义组件事件
在几个月的开发历程里，我一直希望能有一套方案更大可能的让小程序开发更贴近于当下开发习惯，因此才会有wepy。...通过wepy开发的代码经过编译后，能生成一份完美运行在小程序端的代码，而且wepy的目的就是让小程序开发更贴近于传统H5框架开发，让小程序能像开发H5一样支持引入NPM包，支持组件化开发以及支持JS新特性等等...一个是基于wepy开发的开源的仿微信的聊天界面 以上三个demo均在安卓机和IOS机上运行过通。...wepy build --watch 项目目录结构 开发使用说明 使用微信开发者工具新建项目，本地开发选择dist目录。 微信开发者工具 --> 项目 --> 关闭ES6转ES5。...自定义组件命名应避开微信原生组件以及功能标签。 不可以使用input, button, view, repeat等命名自定义组件。更多repeat用法，参见循环列表组件引用。
动作表单（ActionSheet） iOS程序员一定对ActionSheet非常熟悉，这是Cocoa Touch很常用的UI组件。...使用ActionSheet会从当前窗口底部往上弹出一个窗口，可以在该窗口放置任何组件，例如，如图1所示的一排按钮。 ?...图1 ActionSheet的效果 图1是小程序ActionSheet的效果，与iOS ActionSheet的效果类似。...在小程序中使用ActionSheet要使用标签，该标签中可以包含任意的组件，因此，可以在ActionSheet上放置任何小程序支持的UI元素。...图3 带图像的ActionSheet 2 对话框 在小程序中，对话框需要使用标签。与Android、iOS不同的是，这些对话框需要实现摆放在布局文件中，默认是隐藏状态。
微信小程序组件化，为什么要有自定义组件呢 每个页面有对应的js(JavaScript)，json(配置config)，wxml(html)，wxss(css)还差什么 不挺好的嘛，为什么需要自定义组件呢...当然这只是最基本的 想想，既然是组件component，那对于pages页面而言，就是一对多的关系。 多个页面织入组件，怎么衔接起来呢。...pages页面可以给component组件传递值，自然组件也会对应的想pages自定义的回调方法。 只要是你能想到，想实现的，都会有对应的提供。...data，组件的数据 method，组件抽取出来的方法 具体用法 首先需要在pages页的json配置一下开启使用组件 ? 说说options吧 你可以在component的wxml中 ?...比如在组件中添加一个bindtap方法。 ? 但是这个组件页面的customevent的方法是绑定的。 ? 对应的pages页 ?
官方apihttps://developers.weixin.qq.com/miniprogram/dev/component/official-account.html 用户扫码打开小程序时，开发者可在小程序内配置公众号关注组件...使用组件前，需前往小程序后台，在“设置”->“接口设置”->“公众号关注组件”中设置要展示的公众号。...(当然公众号得跟小程序先关联起来) 看了后最近刚开始搞小程序，今索性把这功能先搞搞 说下需要注意的 基础库 2.3.0 开始支持，低版本需做兼容处理。...只有对应的场景值才能获取到展示公众号的行为 可以在 App 的 onLaunch 和 onShow 中获取上述场景值，部分场景值下还可以获取来源应用、公众号或小程序的appId 场景值对应的连接https...测试的时候自己不要是公众号的开发用户，要不不好使。 使用方式 ? ? ok，到位！！！
本文主要介绍了滚动视图组件（scroll-view）的各种常用功能，例如，垂直和水平滚动、滚动事件等，并通过例子代码来演示这些功能的使用方法。 1....垂直滚动视图 scroll-view是容器组件，如果该组件的子组件超过scroll-view的高度或宽度，该组件会允许子组件在垂直或水平方向滚动视图，以便显示其他没有显示的子组件。...例如，下面的布局代码，将scroll-view组件的高度设为200px，里面的每一个子view的高度也是200px，而且放了4个子view。...例如，下面的布局代码设置了scroll-into-view属性的值为yellow，也就是说，当系统装载scroll-view组件时，会直接滚动到第3个子组件yellow。...例如，下面的布局代码包含了两个scroll-view组件，上面的是垂直滚动，下面的是水平滚动。
在小程序中可以使用标签嵌入地图，那么可能很多同学会问，嵌入的是哪家的地图呢？这还用问，自然是腾讯的地图了，而且不能换成其他的地图（百度、高德等）。
e.detail.value }) }, changeSlider4(e) { this.setData({ slider4: e.detail.value }) } }) 注意：slider组件的两个事件
效果图 WXML <view class="tui-content"> <checkbox-group bindchange="checkboxChange...
1、引言 微信官方文档网址：媒体组件 / video (qq.com) 2、播新视频旧视频暂停 问题： 多个视频同时播放的问题 需求： 1....item.data.coverUrl}}" object-fit="cover" > ## 1、点击播放时，获取当前 video 组件中的
效果图 WXML <view class="tui-content"> <radio-group class="radio-group" bindchang...
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
文章目录 一、常用的组件地图之-map 1.marker 1.1 marker 1.2 marker 上的气泡 callout 2.control 二、小程序的定位相关api 三、获取设备的基本信息的...api 1、设置全局的变量 app.js 2.获取设备信息 app.js 3.地图页面获取全局的设备信息 四、处理小程序中的html标签 1.rich-text 2.wxparse https://...github.com/icindy/wxParse 五、小程序中的模板语法 六、小程序常用api之拍照 1.预览图片 2.拍照 七、wx.showActionSheet 一、常用的组件地图之-map...app.globalData.deviceinfo const { globalData: { deviceinfo: { screenWidth, screenHeight }}} = app 四、处理小程序中的...item: { index: 0, msg: 'this is a template', time: '2016-09-15' } } }) 六、小程序常用
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
