天天看點

微信小程式 開發 “婚禮邀請函” 微信小程式入門可看

 成品展示:

微信小程式 開發 “婚禮邀請函” 微信小程式入門可看
 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.賓客資訊開發(表單和通知)

這裡用到了表單發送伺服器 然後伺服器通知使用者,一次表單請求 隻能 傳回給微信使用者一次資訊,而且資訊是要用到模闆

這裡的内容要去背景配置什麼什麼的,是以這裡有空會寫一篇專門通知的部落格記錄一下。

記錄學習 謝謝各位觀看!

作者:鹹瑜​