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


 

 成品展示:

 

 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.賓客信息開發(表單和通知)

這里用到了表單發送服務器 然后服務器通知用戶,一次表單請求 只能 返回給微信用戶一次信息,而且信息是要用到模板

這里的內容要去后台配置什么什么的,所以這里有空會寫一篇專門通知的博客記錄一下。

 

記錄學習 謝謝各位觀看!

 

 

 

 本案例來自 “微信小程序 開發實戰”  的書。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM