成品展示:
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.賓客資訊開發(表單和通知)
這裡用到了表單發送伺服器 然後伺服器通知使用者,一次表單請求 隻能 傳回給微信使用者一次資訊,而且資訊是要用到模闆
這裡的内容要去背景配置什麼什麼的,是以這裡有空會寫一篇專門通知的部落格記錄一下。
記錄學習 謝謝各位觀看!
作者:鹹瑜