成品展示:
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.賓客信息開發(表單和通知)
這里用到了表單發送服務器 然后服務器通知用戶,一次表單請求 只能 返回給微信用戶一次信息,而且信息是要用到模板
這里的內容要去后台配置什么什么的,所以這里有空會寫一篇專門通知的博客記錄一下。
記錄學習 謝謝各位觀看!
本案例來自 “微信小程序 開發實戰” 的書。