微信小程序 开发 “婚礼邀请函” 微信小程序入门可看

 

 成品展示：

 

 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.宾客信息开发（表单和通知）

这里用到了表单发送服务器 然后服务器通知用户，一次表单请求 只能 返回给微信用户一次信息，而且信息是要用到模板

这里的内容要去后台配置什么什么的，所以这里有空会写一篇专门通知的博客记录一下。

 

记录学习 谢谢各位观看！

 

 

 

 本案例来自 “微信小程序 开发实战”  的书。