成品展示:
5个页面 我们来讲解哈(上面地图位置随便定的点)
1.首页开发
一开始进来显示首页 然后默认开始播放背景音乐,这个背景音乐点击右上角图标可以暂停(有动画),然后点击新郎和新娘文字可以调到拨号页面拨打电话给新娘 或 新郎。
背景音乐开发: 背景音乐的开发主要用到 背景音乐API : wx.getBackgroundAudioManager(),然后他一旦获取到连接src 就会自动播放 ,你且后台后他也在播放,具体自己测试。背景音乐需要在APP .json中添加配置:
"requiredBackgroundModes": ["audio"]
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 的原因了。
选择视频播放实现:
这个大概的意思是 我可以拍摄 或 选择本地视频 去替换掉我原生视频框中的内容,但是注意 弹幕列表是不变的【如果已设置】,主要通过: wx.chooseVideo :
主要API : https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
4. 地图的实现 map 标签
map 标签是内置的一个地图(腾讯地图),然后里面最基本的参数就是 经纬度:
获取经纬度的方法: 因为这里是腾讯地图 所以用 “腾讯地图经纬度获取器” URL: https://lbs.qq.com/getPoint/
关于markers 这个是哪个红标点 ,你也可以设置哪个标点为其他图标 默认就是红色的指针嘛,即:
里面定义了id 经度 纬度 ,其实还有 iconPath 图标 、 和 层级 zIndex 可定义的 这里没用到所以详见API
所以这里的功能就是那么简单 ,主要还是获取经纬度。
打开地图的操作: 主要通过 wx.openLocation 来设置 ,打开后会显示自己的位置 和 目标地址(目标地址在里面定义的 经度 和 纬度)
即:
4.1获取用户现在的位置实现:(这里没用到 但是要讲)
通过用 wx.getLocation API 可以获取,成功获取后会返回用户的位置给后台(用户位置看 “type ”类型 ):
但是获取用户要授权 授权要在APP.json 中定义,即(下面):
获取用户位置 API :https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
map 标签的 api :https://developers.weixin.qq.com/miniprogram/dev/component/map.html
API里面很多参数和功能 很强大 慢慢学习。
5.宾客信息开发(表单和通知)
这里用到了表单发送服务器 然后服务器通知用户,一次表单请求 只能 返回给微信用户一次信息,而且信息是要用到模板
这里的内容要去后台配置什么什么的,所以这里有空会写一篇专门通知的博客记录一下。
记录学习 谢谢各位观看!
本案例来自 “微信小程序 开发实战” 的书。