我们先来看效果图 像这样的一个带过渡效果的小部件在我们实际开发中的应用几率还是比较大的,但是在开发微信小程序的过程中可能有的小伙伴发现transition这个属性它不好使(下面说明)所以我们这个时候会考虑去使用微信官方提供的wx.createAnimation  API来创建动画. 接下来我带各位小伙伴如何让 transition 属性在这种需求中好使起来,下面上代码 page({ data: { show:false//用于显示或隐藏控件 }, chanMask:function(){ var

WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("

微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后的宽高,如果是适应屏幕宽度的话,就用到 wx.getSystemInfo() 方法设备的信息,并保存到一个数组中,(因为加载的原因不能用push,只能根据索引),切换时监听当前显示的图片,根据其索引找到对应的高度,并赋值给组件即可. wxml: <view class='swiper'> <

不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组件的页面,所以,先在pages文件夹下面新建classic页面,然后在项目根目录下新建component文件用于存放组件,并在该文件夹下面新建like组件:    这里建议在新建页面的时候,先新建存放页面的文件夹,然后编辑器中鼠标右击该文件夹,然后选择新建page.新建组件的时候,也是先新建存放组件

数据流转 先上一张图看清 Westore 怎么解决小程序数据难以管理和维护的问题: 非纯组件的话,可以直接省去 triggerEvent 的过程,直接修改 store.data 并且 update,形成缩减版单向数据流. Github: https://github.com/dntzhang/westore 组件 这里说的组件便是自定义组件,使用原生小程序的开发格式如下: Component({ properties: { }, data: { }, methods: { } }) 使用 Wes

报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/space/space" (using by "pages/code/code");onAppRoute Error: Component is not found in path "component/space/space" (using by "pag

前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于自定义组件这一块有了比较大的变动,首先比较明显的感觉就是文档比以前全多了,有木有!(小程序文档),现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中复用,提高自己代码的可读性,降低自己维护代码的成本! 本篇文章就是手把手教你实现小程序中自定义组件,坐稳啦

小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--components/count/count.wxml--> <view class='count'> <view class='del' bindtap='bindDel'> - </view> <view class='num'> {{num}} </view

小程序自定义音频组件,带滚动条 摘要:首先自定义音频组件,是因为产品有这样的需求,需要如下样式的 而微信小程序API给我们提供的就是这样的 而且产品需要小程序有后台播放功能,所以我们不考虑小程序的 audio 组件,即使官方推荐更强大的  wx.createInnerAudioContext 但是不符合需求,所以这里用到的是 backgroundAudioManager() https://developers.weixin.qq.com/miniprogram/dev/api/getBackg

代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 基于swiper组件的tab切换 2.案例目录结构 二.程序实现具体步骤 1.tab切换index.wxml代码 <view class="continer"> <!--内

转自:https://idig8.com/2018/08/12/xiaochengxu-chuji-24/ 来说下 ,小程序的基础组件.源码:https://github.com/limingios/wxProgram.git 中的No.11 基础组件 icon图标组件 rich-text 富文本组件 text 文本组件 progress 进度条组件 icon图标组件 官方介绍>https://developers.weixin.qq.com/miniprogram/dev/component/

零基础前端自学入门:小程序UI容器组件 这是一节以UI布局.容器组件的使用为主题的live,专注于布局与容器这一个点,努力把这一点讲透.这是继4月22日整体入门live“零基础周末学习小程序开发”之后,从小处着眼.细处学习的尝试. 以下是课堂计划: 最流行的布局之flex布局讲解,附<讲义:flex布局.pdf>分享 flex布局实践,讲解view.scroll-view.swiper.cover-view等组件的使用,附<讲义:小程序容器组件布局实践.pdf>分享,附demo源码

github 地址 https://github.com/iocool/antminDatePicker 最近在做支付宝小程序(以下简称小程序)开发,发现小程序的日期选择组件很不好用,比如安卓和IOS设备上,样式明显不同,因为小程序调用该组件是调用系统原生组件,所以会有一定的差异,另外,小程序提供的日期组件并不满足我当前的业务需求: 该日期为快递上门时间. 用户只可选择的日期范围,当日往后 2 天(即 今天, 明天 )的日期,并且时间选择为早上 9 点至下午 18 点间的 10 个小时整点时间.

关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些例子. 微信小程序画图实例 基本步骤 wxml中代码: <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> js中onLoad()函数 const ctx = wx.createCan

uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponents wxcomponents下新建vant目录 创建完成后的目录结构 2. 项目中引入vant-weapp组件 在vant-weapp的GitHub Releases版块下载最新的zip包 解压下载文件,将dist目录拷贝到刚才创建vant目录中 3. 页面中使用引入的UI组件 在App.Vue文

微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧

前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探讨下这个问题. 使用实例: <web-view src="https://www.baidu.com"></web-view> 上面实例就是微信小程序简单的web-view使用展示. 很多童鞋应该都会遇到这样一个问题,为什么我的h5页面已经更新到线上了,但是在微信小

小程序的基础组件--基础内容 基础内容分为三大组件: 1. icon--图标 index.wxml <view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"/> </block> </view> <view class="group&q

微信小程序--页面与组件之间如何进行信息传递和函数调用 ​ 这篇文章我会以我自己开发经验从如下几个角度来讲解相关的内容 页面如何向组件传数据 组件如何向页面传数据 页面如何调用组件内的函数 组件如何调用页面内的函数 1.页面如何向组件传数据 ​ 最常用,最规范的方式,设置数据监听器observer. ​ 假设在页面内引入了组件sc "usingComponents": { "sc":"" } ​ 想要配置一个监听器用来监听页面中数据list的变化

目录: js业务逻辑层 视图渲染层 css属性设置 效果图 微信小程序展示 内网穿透工具下载 我们在搭建一个小程序或者网站的时候,往往要加载很多的图片,音频和视频文件.如果都从服务器获取静态资源,这样会加大对服务器的负载.使得服务器的运行速度缓慢.这时我们适用nginx反向服务代理来加载这些静态资源,这样可以实现负载均衡,为服务器减压.本文基于鸿蒙多媒体组件和微信小程序的多媒体组件都使用nginx反向代理.(nginx相关文件见附件) js业务逻辑层: export default { data

首先打开ECharts网页 https://echarts.apache.org/zh/tutorial.html#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts 里面有微信小程序引入ECharts组件的教程,下载了官方的项目后,拷贝ec-canvas到我微信小程序的目录下,然后在我的微信小程序文件夹中创建line文件夹,并新建四个文件index.js inde