今天项目上涉及到了微信小程序播放音频功能,所以今天跟着一些教程做了个简单的播放器 1.实现思路 刚开始想着有没有现成的组件可以直接用,找到了微信的媒体组件 audio,奈何看着 1.6.0版本开始,该组件不再维护.就百度了一下,还好有另一种方式,使用 InnerAudioContext 来实现音频播放 2.界面预览    点击播放,播放按钮改变为暂停,播放后展示进度条,可 拖动/点击 进度条实现进度控制,可设置倍速 没有UI设计,所以界面很丑,界面后续完善,功能实现就行啦 3.界面代码 WXML

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了.效果就是能把该小程序的体验版以二维码的方式发送给其他朋友使用. 这个系列接下来的文章我们就来研究使用微信开发者工具自动生成的这个小程序的实现文件.本文以小程序的视图设计为主,就是下图所示pages/index目录里的index.wxml文件. 我的日常工作是用一个叫做UI5的前端框架做前端开发,刚好这个框架也支持创建xml格式的视图(UI), 和微信小程序的wxml非常

前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路由方式,相信看了本文你能更深入的了解小程序的页面路由的. 模拟场景: 小程序的页面路径基本上都可以用PC端浏览器来模拟,如: 小程序页面栈 类似于 浏览器页面栈 小程序的初始化(新页面入栈) ——— 打开浏览器默认加载首页 小程序打开新页面(新页面入栈) ——— 浏览器在新标签中访问网址或者点击当前

原文:微信小程序把玩(五)页面生命周期 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写. 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事,具体怎么掌握只有慢慢尝试和摸索 代码处理: 这里的代码主需要对使用创建项目时index目录下文件处理下就行,至于跳转后的页面用的还是logs不需要更改!下面贴下代码注释也比较详细 index.wxml <!--index.wxml--> <view class=&

小程序 webview 自动打开新页面 iframe 效果 https://nervjs.github.io/taro/docs/components/open/web-view.html 怎么阻止小程序的 webview 自动打开新页面 iframe bug dangerouslySetInnerHTML dangerouslySetInnerHTML 这个怎么不好使 <View className='react-render-html' dangerouslySetInnerHTML={{_

技术博客--微信小程序UI的设计与美化 在alpha阶段的开发过后,我们的小程序也上线了.看到自己努力之后的成果大家都很开心,但对比已有的表情包小程序,我们的界面还有很大的提升空间,许多的界面都是各个开发者分小组开发的,有很多界面的UI格式是不统一的.所以在beta阶段,我们展开了对UI界面美化的探讨与实现. 微信小程序的UI设计与网页端有很多相似的地方,但也有他自己的独特之处,例如导航栏,文字格式等等.要想设计出好看又简洁的UI,需要不断的收集资料,测试,改进,我们才能最终使用,由于我们都是第

微信小程序公测后,开发者非常热情,都有很高的期待,都想抓住这一波红利.但是热情背后需要冷静,我们需要搞清楚两个问题: 微信想要我们做什么?微信小程序可以做什么? 微信想要我们做什么? 首先来弄清楚微信的意图.之前张小龙曾公开过对微信应用号的一些看法,再联系到他总结的微信产品观,大概可以总结出如下重点: (1)服务用户,不打扰用户,用完即走 张小龙这种朴素浪漫主义情节一直反映在他的微信产品观中,小程序也不例外.从人性出发,用户被任何APP每天占据大量时间都是不合理的,微信也是--虽然它已经实现了.

前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从近期的使用上来说,小程序可以作为底层,但是缺少一个框架层,这个框架层需要提供: ① 组件库 ② 更好的代码组织方式,也就是让我们可以做到轻松的组件化开发 我们从最开始到现在,都在沿着这个方向去分解小程序学习,其实小程序本身的东西差不多了,但是我们代码过程中有时候却越高越复杂,多了很多封装,其实这所有

今天在做砍价页面的时候需要将一个按钮动起来,效果图如下: 其实它实现的原理很简单,就是循环的缩小放大. css3中的animate 有个属性是 animation-iteration-count 可以控制动画的循环播放,但是小程序里面没有.该怎么实现呢? 无非就是2种状态的切换. wxml: <button class='cut-btn' open-type='share' animation="{{animationData}}">喊好友砍一刀</button>

音阶练耳是什么? 音阶练耳小程序是一款听音练习音阶,拥有简介界面的交互式小程序,以虚拟钢琴为辅助乐器,应用于日常练习,涵盖了五个八度内26种调式.以及下行中的所有调式与和声小调式的衍生,提高辨认音阶的听力. 功能 -快速练习 -可选择练习音阶的种类 小程序码 音阶练耳小程序展示 -用户进入小程序的主页面: -任选一节(小调音阶)作为子页面展示: 1.进入选择的小节,准备答题: 2.点击按钮[播放],播放题目: 3.选择选项,回答错误: 4.点击按钮[查看答案]: 5.点击按钮[播放],播放题目:

转自:https://idig8.com/2018/09/05/xiaochengxujavashizhanxiaochengxuwodegerenxinxiyemiankaifa40/ 已经完成了登录和注册页面已经开发完毕,当用户注册和登录完毕后,让用户登录到我们的个人信息页面,就是我的页面.源码:https://github.com/limingios/wxProgram.git 中No.15 我的页面的功能 当其他人查看我的信息,可以看到关注我,粉丝数量,关注数量,获赞数量. 当用户自己点

基于微信小程序轻快的特点,我们(微信官方)拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体验,同时最大程度适应和支持不同需求,实现用户与小程序服务方的共赢. 说到设计规范,这里有一篇绝对不能错过的:<内部教程!超实用6步透视网易设计规范(附完整PDF下载)> 一.友好礼貌 为了避免用户在微信中使用小程序服务时,注意力被周围复杂环境干扰,小程序在设计时应该注意减少无关的设计元素对用户目标的干扰,礼貌地向用户展示

1.在pages创建一个main文件夹2.在main文件夹下创建一个miain.js文件.添加代码: const constant = require('../../utils/constant.js') const app = getApp() const recorderManager = wx.getRecorderManager() const innerAudioContext = wx.createInnerAudioContext() Page({ data:{ money:"0.

回顾/:我们已经实现了显示附近的人的功能了,可以多个人看到附近的人页面了 但是还是要进行优化有几个问题:1.我们用户选择了其他的自定义头像之后,在首页可以看到头像的变化,但是在附近的人中头像会变成报错的样式:如: 也就是500了,也就是找不到这个图片了,解决方法:看开发文档->云开发 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage/api.html 其中有一个 “换取临时链接”的功能(通过这个方法可以临

audio audio为音频组件,我们可以轻松的在小程序中播放音频. audio组件属性如下: 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name Str

网上找的帖子大多是直接在onload中请求数据.而我想实现的是点击按钮,然后请求服务器,接着返回数据,前端页面渲染.所以搞了挺久的,在此记录一下. 请求是按照微信官方给出的,wx.request 在这里,我的逻辑是:点击按钮--->根据绑定的事情注册函数-->发起微信请求-->判断是否返回数据,成功返回数据则显示请求成功.-->返回数据到前端页面进行渲染 废话不多说,直接上代码: 一.前端页面代码: <view class="container2">

我们都知道小程序是不能直接操作dom的,所以做即时通讯聊天功能的时候也就不能像之前做的一样:点击发送的时候,拼接一个节点到页面上.话不多说,以下是效果和代码: -----------------------chat.js------------------------------ // pages/chat/chat.js Page({ /** * 页面的初始数据 */ data: { lists: [ //所有发送的信息 ], scrollTop: 100,//设置滚动条到顶部的距离 cent

如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',})  不起作用,需要使用 wx.switchTab({url: '...',}) 来实现. 那么,我们反过来,如何从含有tabbar的页面跳转到一个不含有/隐藏了tabbar的页面呢? 在尝试了上述的两个API后发现不起作用,wx.switchTab({url: '...',}) 倒是可以在有tabbar的页面之间跳转,但无法

   页面配置文件—— pageName.json 每一个小程序页面可以使用.json文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.json 的 window 中相同的配置项. 页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现: 属性 类型 默认值 描述 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,如"#000000" navigationBarTextStyle String

  视图层:Pages主要有 wxml页面文件和模板文件.wxs脚本文件.wxss样式文件:component是抽取出来的业务单元,同样拥有wxml页面文件和模板文件.wxs脚本文件.wxss样式文件. WXML(WeiXin Markup language) 用于描述页面的结构. WXS(WeiXin Script) 是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构. WXSS(WeiXin Style Sheet) 用于描述页面的样式. 组件(Component)是视图的基本组成

这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1  wx.navigateTo(object) 功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到当前页面. wx.navigateTo({ //当前页面对应的JS文件内 控制模板 url: 'test?id=1' //需要切换到的页面路劲,此处为