uni-app高分開源電影項目源碼案例分析，支援一套程式碼發布小程式、APP平台多個平台(前端入門必看)
uni-app-Video
GitHub地址：//github.com/Tzlibai/uni-app-video
一個優秀的uni-app案例，旨在幫助大家更快的上手uni-app，共同進步！
Features
- 程式碼編寫簡潔，注釋清晰，快速入門必備；
- 支援在線模糊搜索；
- 程式類目懶載入，支援在線播放預告片；
- 更好的App跨平台框架、更方便的H5開發框架，載入新頁面速度更快；
- 一套程式碼，可發布到iOS、Android、H5、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平台。
掃碼體驗
啟動準備
小程式帳號及微信開發者工具： //mp.weixin.qq.com
建議編輯器：HBuilderX
手摸手啟動項目 ( 以小程式為例 )：
1.打開 HBuilderX導入項目：
2.進入manifest.json文件中修改成自己的相關ID（如遇無法載入配置文件，重啟編輯器即可）；
接下來就可以正常使用啦~
小程式啟動可能會遇到問題：
-
HBuilderX報錯：微信開發者工具拒絕HBuilderX訪問埠
答：微信開發者工具 — 設置 — 安全設置，點擊開啟服務埠即可解決。
-
小程式報錯：不在以下 request 合法域名列表中
答：這是因為在小程式中發起了wx.request請求,但是請求的域名沒有在微信公眾平台後台設置，管理員將需要使用的域名添加到小程式後台，（調試時可以點擊微信開發者工具右上角 **詳情 — 本地設置 — 勾選不校驗合法域名 **,可暫時取消報錯）。
-
小程式報錯：Failed to load media //xxx.xx server responded with a status of 403
答：這是小程式電影詳情頁面的預告片影片報錯（不影響可忽略此錯誤），並不是載入影片錯誤，而是微信開發者工具中載入影片會提示這個錯誤，所以在調試帶有影片的控制項時，可以點擊真機預覽小程式。
項目結構
.
├─ colorui/ # 引入的UI文件
├─ components/ # uni-app組件目錄
│ ├─ comp-a.vue # 可復用的a組件
├─ pages/ # 業務頁面文件存放的目錄
│ ├─ home/
│ │ ├─ index.vue # home頁面
│ ├─ detail/
│ │ ├─ index.vue # detail頁面
├─ static # 存放應用引用靜態資源（如圖片、影片等）的目錄，注意：靜態資源只能存放於此
├─ unpackage/ # 打包目錄
├─ App.vue # 應用配置，用來配置App全局樣式以及監聽
├─ main.js # Vue初始化入口文件
├─ manifest.json # 配置應用名稱、appid、logo、版本等打包資訊
├─ package.json # 配置頁面路由、導航條、選項卡等頁面類資訊
複製程式碼Tips:
static 目錄下的 js 文件不會被編譯，如果裡面有 es6 的程式碼，不經過轉換直接運行，在手機設備上會報錯。
css、less/scss 等資源同樣不要放在 static 目錄下，建議這些公用的資源放在 common 目錄下。
uni-app之旅
前言：分享一下遇見過的問題難點和一些注意點，共同進步
像素單位
使用upx/rpx 而不是 px
修改內容（評論區大佬的訂正）： 1px = 2upx是不準確的，upx和rpx是響應式單位，以750px為基準寬度，根據設備螢幕寬度自動調整
路由
uni-app的路由全部配置在page.json這個文件中，問題就在於多人開發的時候，路由無法拆分，如果處理的不好，經常發生衝突。至於其中的一些配置項，就請見官方文檔。
在頁面中沒有專門的 $route 和 $router對象 僅能在頁面的生命周期裡面接受路由傳參，詳情見文檔。
路由傳參方式
let url = `/pages/shopManagement/sonPage/billDetails?StoreID=${StoreID}`
複製程式碼
路由接參方式：
onLoad(route){
this.getData.StoreID=route.StoreID
this.getCurryInfo()
},
onLoad接收到一個參數對象
DOM操作
如果你的項目僅是h5,那可以放心大膽的使用dom操作，但如果要在小程式和app跑，就不要做dom操作了，不生效。
不過ref還是可以用的，一樣可以獲取到這個節點，該幹啥幹啥。
生命周期
說到ref我就要提一下生命周期
具體的生命周期在文檔中可以看詳情
大致上和vue的差不多，分成頁面生命周期和應用生命周期，頁面生命周期就是針對單頁面的，應用生命周期就是針對整個小程式/app的，不過我提出在開發時的一些情況
在組件中，沒有生命周期，對，你沒看錯！比如頁面a引用了組件b 在組件b中，onLoad，onShow，onReady全部失效，不過用created和mounted是生效的，但是我在開發的時候還是沒有用created和mounted，畢竟文檔明確寫到
所以我在組件中規避使用原vue的生命周期，另外，在上面說了ref，如果要在初始化使用ref要注意生命周期，在onload和show的鉤子中，內部如果是同步操作是用不了的，拿不到$refs，我不知道怎麼解釋這個問題，在vue中很好解釋，在created拿不到ref是因為dom還沒有渲染出來，只有在mounted時dom渲染出來了才能拿到ref，但是uniapp中不是沒得dom嘛。。。。。我也沒深究過，如果要用，只能非同步，可以加setTimeout 或者 放在某個請求後用，這個時候是可以拿到ref的
關於請求
我最開始的時候是自己簡單的封裝了一下發送的請求
export const HttpRequest_ = {
config: function(name) {
var info = null;
if (name) {
var name2 = name.split("."); //字元分割
if (name2.length > 1) {
info = configdata[name2[0]][name2[1]] || null;
} else {
info = configdata[name] || null;
}
if (info == null) {
let web_config = cache.get("web_config");
if (web_config) {
if (name2.length > 1) {
info = web_config[name2[0]][name2[1]] || null;
} else {
info = web_config[name] || null;
}
}
}
}
return info;
},
post: function(url, data, header) {
header = header || "application/x-www-form-urlencoded";
//url = this.config("APIHOST")+url;
return new Promise((succ, error) => {
showLoading_()
uni.request({
url: url,
data: data,
method: "POST",
header: {
"content-type": header
},
success: function(result) {
hidLoading_()
succ.call(self, result.data)
},
fail: function(e) {
hidLoading_()
error.call(self, e)
}
})
}).then(res=>{
console.log(res)
return res
},err=>{
console.log('err：',err)
})
},
get: function(url, data, header) {
header = header || "application/x-www-form-urlencoded";
//url = this.config("APIHOST")+url;
return new Promise((succ, error) => {
showLoading_()// 載入中
uni.request({
url: url,
data: data,
method: "GET",
header: {
"content-type": header
},
success: function(result) {
hidLoading_() //關閉載入中
succ.call(self, result.data)
},
fail: function(e) {
hidLoading_() //關閉載入中
error.call(self, e)
}
})
}).then(res=>{
console.log(res)
return res
},err=>{
uni.showToast({
duration:2000,
title:'數據異常，請稍後再試',
icon:'none'
})
console.log('err：',err)
})
}
}
複製程式碼
之前我以為在Uniapp中發送請求只能用他們請求方法，後來同事說也可以用其他的。
我們便引入其他的庫。這是uniapp插件市場別人封裝好的，用起來還是比較舒服
動態的class style
具體的文檔在這裡：
我一開始是沒有注意到這一點，按照我的一些常規習慣寫並且一直在用h5調試，沒有任何問題，後來上真機和小程式開發工具之後才發現全部失效。
打開第三方的網址或app
在app端想要打開第三方的網址或者程式，一定要區分ios和Android端。
首先，ios和Android喚起第三方app的地址是不一樣的。
不管是在調試還是打包，要喚起第三方程式，在ios端要配置白名單
三方登錄
以微信登錄位例：
在app端，uni-app集成的幾個方法，可以很順利的拿到unionId，openid等一些列資訊
uni.getProvider({//獲取uniapp支援的第三方數據
service:'oauth'
}).then(data=>{
var [err,res] = data
var providers=res.provider//類型（微信，新浪，小米，qq）
var flagIndex=providers.indexOf(provider)
if(flagIndex>-1){
return providers[flagIndex] /
}
}).then(res=>{
return uni.login({//登陸介面（可以獲取用戶資訊）
provider:res,
scopes:'auth_base',
timeout:20000,
})
}).then(data=>{//返回一系列登陸資訊
var [err,res] = data
if(res.errMsg==="login:ok"){
self.authResult=res.authResult
return res.authResult
}
}
}).then(res=>{//獲取用戶的資訊 頭像，地址，等等等
return uni.getUserInfo({
provider:provider,
timeout:20000,
withCredentials:true
})
}).then(data=>{//得到一些列用戶資訊
var [err,res] = data
console.log(res)
if(res.errMsg==="getUserInfo:ok"){
return res
}
})
複製程式碼
但是如果在小程式端，很多方法就失效了，因為小程式有一套自己的三方登錄交互策略。
還記得當時剛在app上測成功微信三方登陸後，領導過來看進度，問小程式怎麼樣，我給他放了個體驗版，讓他看看，他問我這個微信登錄也可以嗎？我拍拍胸脯說沒得問題，隨便登，結果。。。。。。。。。。。。。。。臉疼
uni.login({//登陸介面
provider:'weixin',
scopes:'auth_base',
timeout:20000,
}).then(data=>{//返回一系列登陸資訊
let [err,res] = data
if(res.code){
let data ={//這個code很重要，需要拿到code向後台去換unionid等
js_code: res.code
}
return this.$Request.get(this.$store.state.getopenidUrl,data)
}else{
setTimeout(()=>{
this.$api.msg('數據異常')
},500)
uni.switchTab({
url:'/pages/index/index'
})
}
}).then(res=>{
let res_ = JSON.parse(res.Data)
if('unionid' in res_){
this.getIsBindData.openid=res_.unionid
this.getDataWX.openid = res_.unionid
this.getDataWX.unionid = res_.openid
}else{
this.getIsBindData.openid=res_.openid
this.getDataWX.openid = res_.openid
this.getDataWX.unionid = res_.openid
}
return this.WXuserInfo
})
複製程式碼
其他的三方登錄我沒有試過，但是一定要注意各端之間的差異性
另外，支付寶三方登錄uni-app沒有集成，要是自己想做，就用原生來寫，理論上是可以做的。由於我們團隊沒有會原生的，我們試過用webview做支付寶的三方登錄，最後還是卡在了授權這一塊，不得而終，遂閹了該需求。
2019 8.20 更新：
在插件市場已經有了Android端和ios端授權登錄的插件（是付費插件）詳情：
canvas
寫成組件在小程式上失效，僅能在index頁面上使用。在h5生效，封裝成組件也可以，渲染效果也不是太好，app端沒有試過，因為後來看效果不好就暫時擱置這個需求了。
評論區朋友的訂正： canvas在組件中使用時，記得傳遞第二個參數組件實例對象：uni.createCanvasContext(canvasId, this)
我試過了，封裝成組件的情況下，傳入this，在小程式是生效的.之前是沒有傳入的
開屏引導
uni-app沒得開屏這個配置項，只能用一些策略來做。
實質上是是用swiper組件+本地快取做的模擬開屏引導，注意的是，如果產品一開始就定位了要做引導頁，那就考慮好index的怎麼寫，我們是後期才打算加的，如果要把index改掉成本有點大，所以用了另一種策略，但如果在性能不好的手機上會出現尷尬的事情，就不細說怎麼尷尬了，如果用上面的策略，再尷尬也不過是白屏，在上面的demo中，index僅是一個中轉頁面，什麼都沒有寫。所以個人建議還是用以上的策略。
插件市場和生態
總的來講，Uniapp的插件市場還是不錯的，大多數能用到的插件都可以找到，找不到的也可以從個別相似的插件中找到靈感，自己再魔改一下，論壇也還行，基本上自己遇到的問題都能找到答案，但是也有找不到的或者有人提出卻無人回答的,官方qq群也還是比較熱鬧，有些東西自己沒遇見的看看別人的問題和解決方案也算是一種成長，自己遇見過的給別人解答，換來一聲謝謝也是很開心的。
插件市場裡面我看過or用過比較好的組件
先後推薦不分排名順序
colorUI 我們四個項目，都是以colorUI做的基礎樣式，他不是一個組件庫，是個css樣式庫，唯一的缺點就是沒有太詳細的文檔，不過源碼都在，過一遍基本上也都熟悉了。
===================================
uCharts 高性能跨全端圖表,基本上所有類型的圖表都包含了，而且文檔也比較清楚，demo也全面 源碼也可以根據自己的需求做改動，我自己在開發的時候也改動過源碼，用起來很順手。
===================================
手寫簽名組件，方便易操作。
===================================
答題模版，這個答題模板是基於colorUI做的，我當時自己懶得寫了，就直接搬來用。
ext.dcloud.net.cn/plugin?id=4…
===================================
ThorUI組件庫 這個庫是個正兒八經的組件庫，裡面包含了常規的各種組件，我們也買了graceUI，其實對比一下，大體上不相上下的，有不同的需求也可以直接改源碼啥的。
===================================
側邊導航 不過側邊導航也實現起來也比較簡單，這個是我看到的一個組件，看了下源碼，如果是拿來練手實現的話，是個比較好的參照對象。
===================================
O2O本地生活模版 這個模板用來快速開發電商項目很好，作者組件封裝的很完善，有需求的只要自己改一下就可以用了。
===================================
mescroll的uni版本, 是在 uni-app 運行的下拉刷新和上拉載入的組件 第一個項目用到了他 不過後來我自己封裝了一個就沒用了。
===================================
基於flyio介面封裝
===================================
騰訊雲小程式音影片通訊Uniapp版
結尾提示
使用uni-app注意各端的差異性，很多東西，h5對著的，上真機就錯了,真機好著的，換小程式就錯了，不同小程式之間還有差異，總之就是考慮好不同的情況，重點是仔細閱讀文檔。
雖然可能一些原生可以實現的功能uniapp實現不了，不過整體開發下來還是比較愉快，很多的坑還是因為多端不兼容，除了寫起來麻煩一點，基本上都還是有可以解決的策略。
也希望uniapp越做越好，各方面越來越完善，為我這種搬磚碼農增加一份生存的籌碼。
