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

道术相依 發表於 2021-10-14 09:01:00

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

<h1> 成品展示：</h1>
<h1><img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014085857045-874426817.png" alt="" loading="lazy"></h1>
 
<h1> 5个页面我们来讲解哈（上面地图位置随便定的点）</h1>
 
<h2>1.首页开发</h2>
一开始进来显示首页  然后默认开始播放背景音乐，这个背景音乐点击右上角图标可以暂停（有动画），然后点击新郎和新娘文字可以调到拨号页面拨打电话给新娘或新郎。
　　背景音乐开发：背景音乐的开发主要用到背景音乐API ： wx.getBackgroundAudioManager()，然后他一旦获取到连接src 就会自动播放，你且后台后他也在播放，具体自己测试。背景音乐需要在APP .json中添加配置：
<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014102051333-1229993150.png" alt="" loading="lazy">　　　　"requiredBackgroundModes": ["audio"] 
　　API 文档：   https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html
<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014091055127-115396997.png" alt="" width="534" height="233" loading="lazy">　　如图背景音乐就是这样实现的。
 
　　拨打电话功能实现：   主要是这句： wx.makePhoneCall()  里面传值包含电话号码即可【还有很多具体自己去官网看】
<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014091414673-1801798490.png" alt="" loading="lazy">　　API 文档：https://developers.weixin.qq.com/miniprogram/dev/api/device/phone/wx.makePhoneCall.html
 
 
<h2>2.“醉美一刻”轮播开发</h2>
这个没什么技术含量  一个轮播图 swiper  然后设置竖着即可，这里设置了显示标点  衔接轮播自动切换等  ，，这个不多说。
 
<h2>3.视频API[这里使用] or 腾讯视频  和 “发送弹幕”  和 “选择视频播放” 功能的实现</h2>
视频的话可以选择腾讯视频  但是要申请所以这里不说。
　　原生视频实现：首先是个 <video>  标签，一定要带个ID属性因为后面需要获取它才能操作：
<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014092203224-741159996.png" alt="" width="951" height="135" loading="lazy">
 
 <img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014092329066-1031012295.png" alt="" loading="lazy">　　可以看到这里的内置弹幕弹出时间必须必须得秒的整数
 
　　
　　发送弹幕实现，首先弹幕框失去焦点的时候把值给了  inputValue  ，  然后通过实现 “ videoContext.sendDanmu ” 弹幕功能：
 <img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014093506463-181713035.png" alt="" loading="lazy">　　　　所以为什么 video 标签为什么要设置 ID  的原因了。
 
 
　　选择视频播放实现: 
 这个大概的意思是  我可以拍摄或  选择本地视频去替换掉我原生视频框中的内容，但是注意弹幕列表是不变的【如果已设置】，主要通过： wx.chooseVideo :
 主要API ： https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014095323977-1509128937.png" alt="" loading="lazy">
 
 
<h2>4. 地图的实现 map 标签</h2>
　　map 标签是内置的一个地图（腾讯地图），然后里面最基本的参数就是经纬度：
　　获取经纬度的方法：  因为这里是腾讯地图所以用 “腾讯地图经纬度获取器”  　　URL：    https://lbs.qq.com/getPoint/
　　<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014100029411-1495719743.png" alt="" loading="lazy">
 
 
 关于markers  这个是哪个红标点，你也可以设置哪个标点为其他图标默认就是红色的指针嘛，即：
<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014100947107-778607785.png" alt="" loading="lazy">　　里面定义了id  经度纬度  ，其实还有 iconPath  图标、和层级 zIndex 可定义的这里没用到所以详见API 
所以这里的功能就是那么简单，主要还是获取经纬度。
　　打开地图的操作：  主要通过 wx.openLocation 来设置，打开后会显示自己的位置和目标地址（目标地址在里面定义的经度  和纬度）
 <img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014100232871-1244140736.png" alt="" loading="lazy">
 
即：<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014100652738-642627201.png" alt="" loading="lazy">
 
<h2>　　　　4.1获取用户现在的位置实现：（这里没用到但是要讲）</h2>
　　 通过用    wx.getLocation API 可以获取，成功获取后会返回用户的位置给后台（用户位置看 “type ”类型）：
<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014103643418-1653921776.png" alt="" loading="lazy">
 
 
但是获取用户要授权  授权要在APP.json 中定义，即（下面）：
<img src="https://img2020.cnblogs.com/blog/2050874/202110/2050874-20211014103555909-1397009122.png" alt="" loading="lazy">
 
 
 
获取用户位置 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里面很多参数和功能  很强大慢慢学习。
 
<h2>5.宾客信息开发（表单和通知）</h2>
这里用到了表单发送服务器然后服务器通知用户，一次表单请求只能返回给微信用户一次信息，而且信息是要用到模板
<h2>这里的内容要去后台配置什么什么的，所以这里有空会写一篇专门通知的博客记录一下。</h2>
 
<h1 style="text-align: center">记录学习谢谢各位观看！</h1>
 
 
 
 本案例来自 “微信小程序开发实战”  的书。
 

</div>
<div id="MySignature" role="contentinfo">
本文来自博客园，作者：咸瑜，转载请注明原文链接：https://www.cnblogs.com/bi-hu/p/15405135.html 
来源：https://www.cnblogs.com/bi-hu/p/15405135.html

頁: [1]

琼殿技术论坛's Archiver

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

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