uni-app高分開源電影專案原始碼案例分析,支援一套程式碼釋出小程式、APP平臺多個平臺(前端入門必看)

TZ張無忌發表於2020-05-15

uni-app-Video

GitHub地址:https://github.com/Tzlibai/uni-app-video

一個優秀的uni-app案例,旨在幫助大家更快的上手uni-app,共同進步!

Features

  • 程式碼編寫簡潔,註釋清晰,快速入門必備;
  • 支援線上模糊搜尋;
  • 程式類目懶載入,支援線上播放預告片;
  • 更好的App跨平臺框架、更方便的H5開發框架,載入新頁面速度更快;
  • 一套程式碼,可釋出到iOS、Android、H5、以及各種小程式(微信/支付寶/百度/頭條/QQ/釘釘/淘寶)、快應用等多個平臺。

掃碼體驗

H5

使用手冊

本倉庫為了幫助更多初學者或是愛好者,僅供學習交流,嚴禁用於商業用途,倉庫中使用Api均來自於網路,如涉及侵犯個人或者團體利益,請與我取得聯絡,我將主動刪除一切相關資料,謝謝

啟動準備

​ 小程式賬號及微信開發者工具: https://mp.weixin.qq.com

​ 建議編輯器:HBuilderX

手摸手啟動專案 ( 以小程式為例 ):

1.開啟 HBuilderX匯入專案:

H5

2.進入manifest.json檔案中修改成自己的相關ID(如遇無法載入配置檔案,重啟編輯器即可);

H5

接下來就可以正常使用啦~

小程式啟動可能會遇到問題:

  • HBuilderX報錯:微信開發者工具拒絕HBuilderX訪問埠

    答:微信開發者工具 -- 設定 -- 安全設定,點選開啟服務埠即可解決。

  • 小程式報錯:不在以下 request 合法域名列表中

    答:這是因為在小程式中發起了wx.request請求,但是請求的域名沒有在微信公眾平臺後臺設定,管理員將需要使用的域名新增到小程式後臺,(除錯時可以點選微信開發者工具右上角 **詳情 -- 本地設定 -- 勾選不校驗合法域名 **,可暫時取消報錯)。

  • 小程式報錯:Failed to load media http://xxx.xx server responded with a status of 403

    答:這是小程式電影詳情頁面的預告片視訊報錯(不影響可忽略此錯誤),並不是載入視訊錯誤,而是微信開發者工具中載入視訊會提示這個錯誤,所以在除錯帶有視訊的控制元件時,可以點選真機預覽小程式。


什麼是uni-app?

​ uni-app 是一個使用 Vue.js 開發所有前端應用的框架,開發者編寫一套程式碼,可釋出到iOS、Android、H5、以及各種小程式(微信/支付寶/百度/頭條/QQ/釘釘/淘寶)、快應用等多個平臺。

uni,讀 you ni,是統一的意思。
很多人以為小程式是微信先推出的,其實,DCloud才是這個行業的開創者。

相關文章