微信小程序 开发 “婚礼邀请函”
成品展示:
5个页面 我们来讲解哈(上面地图位置随便定的点)
1.首页开发
一开始进来显示首页 然后默认开始播放背景音乐,这个背景音乐点击右上角图标可以暂停(有动画),然后点击新郎和新娘文字可以调到拨号页面拨打电话给新娘 或 新郎。
背景音乐开发: 背景音乐的开发主要用到 背景音乐API : wx.getBackgroundAudioManager(),然后他一旦获取到连接src 就会自动播放 ,你且后台后他也在播放,具体自己测试。
API 文档: https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html
如图 背景音乐就是这样实现的。
拨打电话功能实现 : 主要是这句: wx.makePhoneCall() 里面传值包含电话号码即可【还有很多 具体自己去官网看】
API 文档:https://developers.weixin.qq.com/miniprogram/dev/api/device/phone/wx.makePhoneCall.html
2.“醉美一刻”轮播开发
这个没什么技术含量 一个轮播图 swiper 然后设置竖着即可,这里设置了显示标点 衔接轮播 自动切换等 ,,这个不多说。
3.视频API[这里使用] or 腾讯视频 和 “发送弹幕” 和 “选择视频播放” 功能的实现
视频的话可以选择腾讯视频 但是要申请 所以这里不说。
原生视频实现: 首先是个 <video> 标签 ,一定要带个ID属性 因为后面需要获取它才能操作:

可以看到这里的内置弹幕 弹出时间必须必须得秒的整数
发送弹幕实现,首先弹幕框失去焦点的时候 把值给了 inputValue , 然后通过实现 “ videoContext.sendDanmu ” 弹幕功能:
所以为什么 video 标签为什么要设置 ID 的原因了。
选择视频播放实现:
微信小程序 开发 “婚礼邀请函”的更多相关文章
- 微信小程序开发心得
微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...
- 【微信小程序开发•系列文章六】生命周期和路由
这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...
- 微信小程序开发日记——高仿知乎日报(下)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发日记——高仿知乎日报(中)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...
- 微信小程序开发日记——高仿知乎日报(上)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 微信小程序开发工具测评
1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...
- 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?
原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复 ...
- 微信小程序开发工具使用与设计规范(二)
[未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...
- 微信小程序开发视频教程新鲜出炉
微信小程序开发公测了,可是对于新手来说,不同的框架不同的开发机制,如何快速适应呢?微信小程序开发视频教程新鲜出炉了,从零开始一步一步搭建微信小程序,每个章节都会涉及到不同的知识点,等教程学习完你不但掌 ...
随机推荐
- SprngCloud微服务框架搭建(一)
参照来源 :https://blog.csdn.net/forezp/article/details/70148833 1.简介 目前来说,SpringCloud是比较完整的微服务解决方案框架.不像其 ...
- ES6扩展——模板字符串
${ } 模板字符串占位符 需要用反引号` ` 1.模板字符串 `${变量}` const xiaoming = { name:'xiaoming', age:14, say1:function(){ ...
- Windows-MacOSX-Ubuntu·不同平台文件互传文件共享
时间:2018-11-23 整理:byzqy 标题:Mac下的virtual box 安装的Ubuntu虚拟机互传文件问题 地址:https://blog.csdn.net/qq_20044689/a ...
- 初步测试VS2017+Win10IoT,基于World Map of Makers
测试World Map of Makers Demo,创建一个简单的internet连接应用程序来查询web API的状态(目测是一个延时时间),并使用该信息切换LED. 官方仓库的Solution是 ...
- a、b、n为正整数且a>b,证明:若n|(a^n-b^n),则n|(a^n-b^n)/(a-b).
- Redis-技术专区-帮从底层彻底吃透RDB技术原理
每日一句 低头是一种能力,它不是自卑,也不是怯弱,它是清醒中的嬗变.有时,稍微低一下头,或者我们的人生路会更精彩. 前提概要 Redis是一个的键-值(K-V)对的内存数据库服务,通常包含了任意个非空 ...
- java 线程基础篇,看这一篇就够了。
前言: Java三大基础框架:集合,线程,io基本是开发必用,面试必问的核心内容,今天我们讲讲线程. 想要把线程理解透彻,这需要具备很多方面的知识和经验,本篇主要是关于线程基础包括线程状态和常用方法. ...
- Python - pip 批量更新
pip 常用命令 https://www.cnblogs.com/poloyy/p/15170968.html pip list 结合 Linux 命令 pip list 命令可以查询已安装的库,结合 ...
- FileWriter文件文件字符输出流写入存储数据
1.FileWriter文件字符输出流-写入-存储数据 其中,流关闭之后再调用会报IOException; 其中,与文件字符输入流-写出-读取数据 和 字节输出流-写入-存储数据 不同的是,要先flu ...
- 修改Typora的代码以支持文件夹和文件混合排序
用Markdown文件写笔记,用文件夹做分类,整个笔记文档项目构成了一个树形结构.笔记文章之间.文章与分类之间经常有特定的先后顺序,于是就在文件名前面加上数字前缀来控制排序.但是,Windows的文件 ...
