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

时间:2024-02-26 08:12:57

 

 成品展示:

 

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

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

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

 

记录学习 谢谢各位观看!

 

 

 

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