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

audio:音频组件, api 接口为 wx.createInnerAudioContext audio 组件的属性: id:类型 字符串 audio 组件的唯一标识 src:类型 字符串 要播放音频的资源地址 loop:类型 布尔 是否进行循环播放 controls:类型 布尔 是否显示默认控件 poster:类型 字符串 默认控件上音频封面的图片资源地址,(注意:如果 controls 为 false ,此属性无效) name:类型 字符串 默认控件上音频的名字,(注意:如果 control

引言: audio是微信小程序中的音频组件,可以轻松实现小程序中播放/停止音频等自定义动作. 附上微信小程序audio组件的相关属性说明:https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html 本次将通过小程序audio的 poster.name.author.src.id.controls 属性,以及相关api:wx.createAudioContext 的使用,来制作一个简单的音频播放控制页面 poster属性:默认控件上

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

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

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

首先打开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

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("

代码地址如下: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"> <!--内

关于微信小程序前端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文

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

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

如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放 注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁屏不显示,IOS锁屏会显示 wxml <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio

(一) 常用标签 组件你可以理解为传统页面开发时候的各种标签,例如 div span 等等,我这里只说一些常用的,这样就能能搭建出一个基本的页面了,但是如果想要更加美观以及拥有更好的体验,就需要 XSS 和 别的一些强大的组件了,如果有额外的需求,可以去官方文档查阅一下 (同时不常用的属性,也就不提了) https://developers.weixin.qq.com/miniprogram/dev/component/ (1) view view 可以理解为传统页面开发中的 div 块级元素,

常见组件(标签) https://developers.weixin.qq.com/miniprogram/dev/component/ 1.view 代替以前的div标签 2.text 1.文本标签,类似span标签 2.只能㠌套自已text 3.长按文字可以复制(只有该标签有这个功能) <text selectable>加了就可以复制了<text/> 4.可以对空格回车进行编码<text decode>加了空格就可以显示了<text/>,decode可以

为什么要学习自定义组件? 1.用上我自己的单词abc,我希望在页面中展示椭圆形的图片, 2.打开手机淘宝,假如现在要做一个企业级项目,里面有很多页面,首页存在导航模块,点击天猫,进入第二个页面,而第二个页面中也存在导航模块,再点击天猫国际,进入的新的页面中同样存在导航模块,如果每一个页面导航模块重新写一遍代码,这是可行的,但是很不好维护,同时代码量变得十分的臃肿.当我们做一个企业级项目,当发现某些模块存在共用部分的时候,可以把它抽离出来,变成自己的组件. 创建自定义组件 在vscode中新建一个

前言:最近忙着赶项目,没时间更博:希望和大家一起学习一起进步. 本人遇到的坑,以及爬出坑的方法:在某个微信小程序项目中,有这样一个需求:在滑块swiper组件和swiper-item组件中嵌套video,然后自定义一个播放的按钮替换默认的播放按钮和位置(我开始用的方法是用相对定位,把图片直接定位在视频的中央地方,问题就出现了,由于文档已经给了提示,最好不要在滑块swiper组件和swiper-item组件中嵌套video,所以,最后导致,第一个滑块可以正常看到播放按钮,其他的则不行,会随着滑块滑

在微信小程序中实现视频的播放与暂停 需求: 视频列表中只能有一个视频在播放 点击视频实现播放与暂停功能 加载完成显示图片,点击后变为视频播放 从上次播放的位置进行播放 思路: 定义一个标记变量,控制视频的播放与暂停 true => 本次问播放 false => 本次为暂停 每次点击后,更新data中视频的id值 声明一个数组,用于存放播放视频的id和播放时间 { vid:xxx, currentTime:xxx } 事件的流程图 代码实现: 静态 <!-- 使用scroll-view组件

版权声明:未经博主允许不得转载 前言: 学习微信小程序应该不怎么难吧~下面我来记录一下学习笔记,在学微信小程序的时候,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html 下面一起学一学,微信小程序的框架吧~看文档,别学别理解.在下的讲述如果不正确的话,可以参考官方文档,也可以帮忙改正.具体还得看