掘金首頁動態話題小冊活動搜尋掘金搜尋寫文章登入註冊_Hahn_2019年01月08日閱讀 566《蜘蛛俠：平行宇宙》的視覺解析與濾鏡實現早在四年前，索尼想要製作全新風格的“蜘蛛俠”電影這一訊息被洩露時，一個顯眼的詞彙便被反覆提及——“rejuvenate”，譯為“使其恢復年輕”。當時，除去《蜘蛛俠：返校日》之外，由索尼出品的《蜘蛛俠》真人電影已有五部之多（託比·馬圭爾主演《蜘蛛俠》三部曲，以及安德魯·加菲爾德主演的兩部《超凡蜘蛛俠》）。索尼高層希望以一部動畫電影來讓這個系列重新恢復活力。而為了拍攝這部動畫電影，索尼找到了當時因《天降美食》系列以及《樂高大電影》等作品在業界小有名氣的導演搭檔——菲爾·羅德和克里斯托弗·米勒。有著天馬行空的創意以及各種鬼才想法的這兩位導演提出的要求則是：希望這部動畫讓觀眾感到“就像走進了漫畫裡一般”。他們同時也為能夠在這部電影中使用到真人電影無法達成的敘事手段而感到興奮。第一次看到《蜘蛛俠：平行宇宙》這部電影時，就被其中的十足創新的視覺動態效果所驚豔，跟以往 3D 動畫追求自然流暢截然相反，《蜘蛛俠：平行宇宙》反而在往漫畫觀感體驗靠攏，讓 3D 動畫 2D 化，而且不是單純的 2D 化。正如在一篇文章裡看到的評論：混搭上各類平行宇宙間不同的漫畫風格，保留下了對話方塊、漫畫分格、字幕特效，還尤其加強了手繪塗鴉的部分，並刻意打造出這部分的「稚拙感」。當這些再加上神奇到炸裂的分鏡，足以讓人看得目不暇接。接下來我們簡單的解析下這電影的亮點：一、視覺表達的創新點1。一拍二模擬 2D 動畫在進入正題故事沒多久，相信看慣了 3D 動畫的大家都會有種稍稍不適應的感覺。。。「這電影是不是有些卡？」沒錯，它確實就是卡。這是電影第一個讓人感覺有些「異常」的地方，卻也是電影最特別的地方。仔細看你可以發現只有人物角色是有著卡頓感的，而它們的周圍環境卻很流暢，形成了一種微妙的對比。關於這一點，在知乎中有網友給我們作出瞭解答：電影一般採用的是 24 幀每秒的制式，也就是說如果是手繪 2D 動畫片，需要每秒連續畫 24 張畫以使畫面中動畫流暢，這也就是動畫中俗稱的1拍1。但是有人發現我同樣的動作只畫第 1，3，5，7。。。。合計總共只畫 12 幀，然後把每幀停留 2 倍時間，觀眾並不會明顯察覺，而動畫師卻形來表現運動模糊的方式，但卻不是那樣做的。最後，採用了一些解決方案。Imageworks 的線條工具允許藝術家繪製同樣連線形狀的運動線，也有從相機快門啟發的技術。例如，迪米安說，快速相機平底鏡上的背景，無論是合成還是藉助特效，都會被塗上很大的汙點和劃線，但卻會以一種非常塊狀的插圖方式出現。我們基本上儘量避免任何看起來像是平滑的漸變或者因為運動模糊而變得模糊的東西。相反，這是一種非常圖形化的處理。後面我們可以看到，電影裡透過疊影（相機快門啟發的方式）、場景的錯位、速度線等方式來補充畫面的動感，並保證了電影本身的風格語言。4。色散/高光溢色實際上我們可以從電影畫面裡看到一般產生於比較老化或者早期的鏡頭拍攝的照片質感（高光溢色），還有一些鏡頭色散的效果，這其實也是電影工作室有意為之。導演 Peter Ramsey 在接受採訪時是這麼對電影畫面解釋的：某種意義上說，你根本不用花費精力去注意什麼，因為我們做的就是還原漫畫，而我們在看漫畫的時候會發現，有時候漫畫裡都有錯誤，有時候印刷不好，顏色都塗到了線條之外，所以看起來就覺得模糊不清。而且這和真人電影是相通的，比如有時鏡頭中一些東西是沒有對上焦有些模糊，這樣觀眾才會集中注意力在重要而清晰的畫面上。色散/高光溢色的效果在這裡就是起到虛化和模糊的作用。如導演提到的印刷不好的情況，在 20 世紀初中期的印刷行業經常出現，當時的 CMYK 4色印刷會因為有對版的誤差出現導致噴色錯版，這樣的錯版在後面發展中也成為了一種風格化的處理，導演注意到這點，並應用到了電影中，這既把漫畫的質感還原得更到位，讓觀者產生共鳴同時也利用這樣的錯位生成一種視覺景深感，使得電影的層次更強，解決了向 2D 靠近後在電影顯得平的問題。這部電影在視覺表達上有很多的突破，創作團隊很大膽得把多種風格不一的人物混合在一起，使得平行宇宙的概念合理化，並透過平面漫畫的方式把視覺語言和整個電影的題的結合達到了高度的統一。整個電影透露出一種處處不穩定的矛盾感，創作團隊沒有把這種矛盾消弱，而是把他們都展現了出來，這樣的碰撞感受讓人不得不佩服他們對於整體的把控和自信。二、視覺效果與濾鏡實現電影從片頭就迫不及待的展現出了它在表現形式上的創新，但仔細觀察你會發現裡面用到的效果並非從0到1的創新，只不過索尼的動畫團隊把這些視覺元素應用的淋漓盡致。由於工作中涉及了短影片濾鏡和轉場的 OpenGL Shader 程式碼編寫，所以在二刷電影的時候特別留意了電影裡的特效，並思考有哪些是可以透過 Shader 來實現的。當然了，電影裡的效果是動畫設計師反覆調整和多重加工出來的，絕非一段程式碼就能完美模擬。這裡僅僅是從技術角度去探討電影裡一些效果在 Shader 程式碼層面的可行性。1。 HalfTone 半調濾鏡電影高度還原了漫畫應有的觀賞體驗，在畫面的渲染上使用了 Ben-Day dot （本戴點）讓我們感受到了閱讀紙質漫畫書的質感。Ben-Day dot 與 HalfTone 的不同之處在於 Ben-Day dot 在特定區域中的大小和分佈總是相同，而 HalfTone 能根據影象的顏色細節呈現大小和漸變不一定點。我們可以用 HalfTone 半調濾鏡去生成差不多的質感。下面擷取幾張截圖可見一斑：科普下 Ben-Day dot （本戴點），全名是「本戴點狀製版法」，以插圖畫家和印刷商 Benjamin Henry Day， Jr。（19 世紀出版商 Benjamin Henry Day 的兒子）命名，在 1879 年被髮明的印刷製版技術。它根據顏色和視錯覺原理，透過小彩色點的間隔疏密、大小或重疊來生成所需要的效果。例如，洋紅色圓點間隔比較寬就會形成粉紅色。20 世紀 50 年代和 60 年代的彩色漫畫書很受歡迎，但是全綵漫畫的成本很高的故障效果。索尼工作室在製作故障效果的時候使用了手繪圖案+多層效果融合的方式來呈現，當然了，程式碼想要模擬這樣的效果並不容易，如果可以找到一張合適的遮罩圖也許可以大致模擬出來。不過這裡只單純展示常規的基於影象本身的故障效果（程式碼透過基於時間來做畫素和顏色通道偏移來模擬故障效果）：precision highp float； uniform sampler2D inputImageTexture；uniform sampler2D inputImageTexture2；varying vec2 textureCoordinate；uniform float time；float amount gl_FragColor = vec4（finalColor， 1。0）；}複製程式碼同樣的，透過 Demo 右上角的濾鏡開關可以看到前後效果：Demo23。 RGB Shift/Split RGB 分離細心可以發現，上面第二個 Glitch 效果同樣用到了 RGB 顏色分離，在電影中出現了大量的這樣的效果，把色彩變化應用到極致，有些魔性有些虛幻。Shader 實現起來會相比上面兩個濾鏡更簡單一下，透過對影象的 RGB 三個顏色做拆分以及座標偏移就可以實現：precision highp float；uniform sampler2D inputImageTexture；varying vec2 textureCoordinate；uniform float time；float amount = 0。01；float angle = 0。；void main（） { vec2 offset = amount * vec2（cos（time*。001）， sin（time*。001））； vec4 cr = texture2D（inputImageTexture， textureCoordinate + offset）； vec4 cga = texture2D（inputImageTexture， textureCoordinate）； vec4 cb = texture2D（inputImageTexture， textureCoordinate - offset）； gl_FragColor = vec4（cr。r， cga。g， cb。b， cga。a）；}複製程式碼下面兩張圖片對比前後效果：同樣的，透過 Demo 右上角的濾鏡開關可以看到前後效果：Demo3最後，這部電影可以說的太多太多，有太多讓人覺得驚豔的點，沒辦法一一都提到，我們只能從視覺方面和實現的可能性簡單得聊聊，歡迎補充。在快寫完文章的時候，想起開頭 Sony 說到的「rejuvenate（使其恢復年輕）」。我們可以感覺到這個電影從故事和風格無不充斥著現在年輕人會喜歡的元素，可以說這是一部很酷的作品，但是在看到了很多資料後我們不禁有一些感慨，這些很酷炫的效果和元素風格其實在上個世紀就已經存在且有著很深的歷史痕跡，從某種意義上，與其說是更年輕的體現，感覺倒不如說是這是一種復古了。由此我們也延伸出了一些問題：有人說風格是個輪迴，這麼一看，所謂的「更年輕的風格」或者「過氣的風格」都像是個偽命題。也就是說，是不是並不存在什麼年輕或過時的風格，只有時間時間久了，看膩了的風格？又或者說，是不是因為技術的創新才讓產品（電影或者其它）變得年輕了，和風格，實際沒太大關係？感覺挺有意思，可以想想。相關連結：www。gcores。com/articles/10…deadline。com/2018/12/son…www。zhihu。com/question/29…www。douban。com/review/9831…en。wikipedia。org/wiki/Ben-Da…www。bilibili。com/video/av768…wapbaike。baidu。com/tashuo/brow…www。docin。com/p-92574055。…關注下面的標籤，發現更多相似文章OpenGL安裝掘金瀏覽器外掛開啟新標籤頁發現好內容，掘金、GitHub、Dribbble、ProductHunt 等站點內容輕鬆獲取。快來安裝掘金瀏覽器外掛獲取高質量內容吧！評論Lanslord膜拜大佬2小時前F1ashGP6663小時前相關推薦專欄_Hahn_17小時前OpenGL《蜘蛛俠：平行宇宙》的視覺解析與濾鏡實現182專欄Cang_Wang10天前C++OpenGL［OpenGL］未來視覺-MagicCamera3實用開源庫164專欄熊皮皮1月前iOSJavaRust 移動端跨平臺複雜圖形渲染專案開發系列總結（目錄） 2018。12。9227專欄KoonChaoSo1月前iOS程式設計師iOS推流器模組知識點淺談總結244熱專欄已禁用3月前前端Life of a Pixel：前端程式碼如何透過瀏覽器演化為螢幕顯示的畫素1158專欄熊皮皮1月前iOSRustgfx-rs/hal跨平臺圖形抽象庫使用介紹410專欄熊皮皮28天前OpenGL以OpenGL/ES視角介紹gfx-hal（Vulkan） Shader/Program介面使用2熱專欄閒魚技術4月前iOS萬萬沒想到——flutter這樣外接紋理12312熱專欄SimonLeeeeeeeee8月前AndroidAndroid新興掃碼框架：XCodeScanner（最近更新2018-08-17）44740專欄熊皮皮1月前iOSC++Rust圖形庫gfx-hal 逐幀渲染流程介紹62關於作者_Hahn_UI 工程師獲得贊數240獲得閱讀數6，398掘金小冊基於 Python 實現微信公眾號爬蟲新人價 ￥9。95￥19。9Git 原理詳解及實用指南新人價 ￥14。95￥29。9新人專享好禮送你45元買小冊立即領取相關文章寫 Shader 轉場的幾點思考3611Shader 動畫331WebGL Shader 環境搭建384Shader 高斯模糊（Gaussion Blur）220Shader 運動模糊（Motion Blur）223目錄一、視覺表達的創新點1。一拍二模擬 2D 動畫2。 漫畫手法還原3。 不用運動模糊4。色散/高光溢色二、視覺效果與濾鏡實現1。 HalfTone 半調濾鏡2。 Glitch 故障效果3。 RGB Shift/Split RGB 分離掘金瀏覽器外掛 - 下載外掛，送你45元買小冊掘金首頁動態話題小冊活動搜尋掘金搜尋寫文章登入註冊chokcoco2019年01月09日閱讀 1733不可思議的純 CSS 滾動進度條效果問題先行，如何使用 CSS 實現下述捲軸效果？scrollbar就是頂部黃色的滾動進度條，隨著頁面的滾動進度而變化長短。在繼續閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，能否巧妙的實現上述效果。OK，繼續。這個效果是我在業務開發的過程中遇到的一個類似的小問題。其實即便讓我藉助 Javascript ，我的第一反應也是，感覺很麻煩啊。所以我一直在想，有沒有可能只使用 CSS 完成這個效果呢？image分析需求第一眼看到這個效果，感覺這個跟隨滾動動畫，僅靠 CSS 是不可能完成的，因為這裡涉及了頁面滾動距離的計算。如果想只用 CSS 實現，只能另闢蹊徑，使用一些討巧的方法。好，下面就藉助一些奇技淫巧，使用 CSS 一步一步完成這個效果。分析一下難點：如何得知使用者當前滾動頁面的距離並且通知頂部進度條？正常分析應該是這樣的，但是這就陷入了傳統的思維。進度條就只是進度條，接收頁面滾動距離，改變寬度。如果頁面滾動和進度條是一個整體呢？實現需求不賣關子了，下面我們運用線性漸變來實現這個功能。假設我們的頁面被包裹在 中，可以滾動的是整個 body，給它新增這樣一個從左下到到右上角的線性漸變：body { background-image： linear-gradient（to right top， #ffcc00 50%， #eee 50%）； background-repeat： no-repeat；}複製程式碼那麼，我們可以得到一個這樣的效果：scrollbar2Wow，黃色塊的顏色變化其實已經很能表達整體的進度了。其實到這裡，聰明的同學應該已經知道下面該怎麼做了。我們運用一個偽元素，把多出來的部分遮住：body：：after { content： “”； position： fixed； top： 5px； left： 0； bottom： 0； right： 0； background： #fff； z-index： -1；}複製程式碼為了方便演示，我把上面白色底改成了黑色透明底，：scrollbar3實際效果達成了這樣：scrollbar4眼尖的同學可能會發現，這樣之後，滑到底的時候，進度條並沒有到底：image究其原因，是因為 body 的線性漸變高度設定了整個 body 的大小，我們調整一下漸變的高度：body { background-image： linear-gradient（to right top， #ffcc00 50%， #eee 50%）； background-size： 100% calc（100% - 100vh + 5px）； background-repeat： no-repeat；}複製程式碼這裡使用了 calc 進行了運算，減去了 100vh，也就是減去一個螢幕的高度，這樣漸變剛好在滑動到底部的時候與右上角貼合。而 + 5px 則是滾動進度條的高度，預留出 5px 的高度。再看看效果，完美：scrollbar至此，這個需求就完美實現拉，算是一個不錯的小技巧，完整的 Demo：CodePen Demo —— 使用線性漸變實現滾動進度條image最後其實這只是非常牛逼的漸變非常小的一個技巧。更多你想都想不到的有趣的 CSS 你可以來這裡瞧瞧：CSS-Inspiration —— CSS靈感更多精彩 CSS 技術文章彙總在我的 Github —— iCSS ，持續更新，歡迎點個 star 訂閱收藏。好了，本文到此結束，希望對你有幫助 ：）如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。關注下面的標籤，發現更多相似文章CSS前端安裝掘金瀏覽器外掛開啟新標籤頁發現好內容，掘金、GitHub、Dribbble、ProductHunt 等站點內容輕鬆獲取。快來安裝掘金瀏覽器外掛獲取高質量內容吧！評論godbmw前端 @ 騰訊已Star1分鐘前 前端工程師秀18分鐘前chenry優秀22分鐘前阿卡林你們都沒見過這個？http：//youmightnotneedjs。com/網頁連結30分鐘前晟功在望本尊奇思妙想，秀兒31分鐘前T_one進度條是個鋸齒形的怎麼破？36分鐘前相關推薦熱專欄chokcoco2小時前CSS不可思議的純 CSS 滾動進度條效果10743熱專欄亞古5小時前面試【面經】寒冬中的一年半前端跳槽20379專欄CRPER2小時前前端Visual Studio CodeVS Code 折騰記 - （15） 再來推薦一波大前端適用系列的外掛（改善編碼體驗）454專欄Seymoe3小時前前端程式設計師24K 純非科班前端的總結與展望 | 掘金年度徵文1220專欄騰訊IVWEB團隊6小時前前端安全使用 SRI 解決 CDN 劫持4415熱慕晨同學21小時前前端大前端架構思考與選擇18013專欄sunshine小小倩16小時前前端擁抱變化，無限可能（D2 開場總結）461專欄鄧李兒22小時前前端true || false && false2941熱專欄木易楊說2天前JavaScript【進階4-2期】Object。assign 原理及其實現30836ShanaMaid42分鐘前TypeScript前端Archer-svgs： 動態載入svg並快取的方案1關於作者chokcoco切圖仔 @ Tencent聯合編輯獲得贊數6，494獲得閱讀數100，844掘金小冊基於 Python 實現微信公眾號爬蟲新人價 ￥9。95￥19。9Vue。js 元件精講新人價 ￥14。95￥29。9新人專享好禮送你45元買小冊立即領取相關文章不可思議的純CSS導航欄下劃線跟隨效果114893滾動視差？CSS 不在話下104240神奇的選擇器 ：focus-within45841你所不知道的 CSS 陰影技巧與細節43030妙用 scale 與 transfrom-origin，精準控制動畫方向26218目錄分析需求實現需求最後掘金瀏覽器外掛 - 下載外掛，送你45元買小冊掘金首頁動態話題小冊活動搜尋掘金搜尋寫文章登入註冊roberthuang2019年01月08日閱讀 3663mpvue+小程式雲開發，純前端實現婚禮邀請函目錄前言準備工作專案結構介紹頁面介紹雲開發介紹總結前言感謝OnceLove提供的思路，藉助他的小程式的介面UI風格，自己重新用mpvue實現了屬於自己的婚禮邀請函，前前後後花了3天時間。在這之前本人是沒想過要自己實現這樣一個專案，原因是後臺那塊是個麻煩事，所以當媳婦讓我自己實現這個邀請函的時候，起初我是拒絕的。後面由於快要過年了，公司專案沒有重大更新，趁著這段空閒時間，自己研究了下小程式自帶的雲開發，無需後臺支援，前後端都可以自己來實現，下面我將一一介紹本專案的實現過程！本小程式為婚禮正式使用的小程式（由於某些小夥伴的不文明行為，所以只能換一個小程式讓大家體驗），婚期將至，感興趣的可以掃碼體驗本專案，沾沾喜氣，歡迎大家體驗，有什麼問題可以在本文給我留言原始碼地址：https：//gitee。com/roberthuang123/wedding點選並拖拽以移動準備工作mpvue框架 mpvue官方文件小程式·雲開發 小程式·雲開發文件注意：使用mpvue前，首先你得先熟悉vue框架的基本使用專案結構介紹點選並拖拽以移動common目錄：放一些公共資源，如js，css，jsoncomponents目錄：元件相關的。vue檔案都放在這裡pages目錄：所有頁面都放在這個目錄utils目錄：使用mpvue時自動生成，可忽略app。json檔案：{ “pages”： ［ “pages/index/main”， “pages/photo/main”， “pages/map/main”， “pages/greet/main”， “pages/message/main” ］， “window”： { “backgroundTextStyle”： “light”， “navigationBarBackgroundColor”： “#fff”， “ ”pagePath“： ”pages/greet/main“， ”iconPath“： ”static/images/4-1。png“， ”selectedIconPath“： ”static/images/4-2。png“， ”text“： ”好友祝福“ }， { ”pagePath“： ”pages/message/main“， ”iconPath“： ”static/images/5-1。png“， ”selectedIconPath“： ”static/images/5-2。png“， ”text“： ”留言評論“ } ］ }， ”requiredBackgroundModes“： ［”audio“］}複製程式碼點選並拖拽以移動App。vue檔案：本人主要是為了增加專案更新後的提醒，所以在這個檔案加了些相關內容，內容如下，複製程式碼點選並拖拽以移動main。js檔案：import Vue from vue import App from 。/App Vue。config。productionTip = falseApp。mpType = app wx。cloud。init（{ env： 雲開發環境ID }）const app = new Vue（App）app。$mount（）複製程式碼點選並拖拽以移動functions目錄：主要放一些雲函式，這裡不清楚雲函式的文章後面會提及images目錄：主要放一些靜態資源圖片頁面介紹首頁——邀請函首頁著重和大家講解下背景音樂的實現方法const audioCtx = wx。createInnerAudioContext（）首先，wx。createInnerAudioContext 介面獲取例項接著，透過例項的相關方法來實現音樂的播放與暫停功能關於小程式音訊相關文件具體程式碼如下：複製程式碼點選並拖拽以移動以上程式碼中使用到了雲開發相關功能，文章後面會介紹，請大家稍安勿躁相簿頁——就一個輪播圖，這裡就不過多介紹地圖頁——這裡著重講一下地圖標籤mapmap標籤 關於map元件的使用文件這裡講一下標記點markersdata （） { return { // qqSdk： ， markers： ［{ iconPath： 。。/。。/static/images/nav。png ， id： 0， latitude： 30。08059， longitude： 115。93027， width： 50， height： 50 }］ } }複製程式碼點選並拖拽以移動複製程式碼點選並拖拽以移動祝福頁——也是雲開發相關內容，後面會介紹留言頁——也是雲開發相關內容，後面會介紹雲開發介紹小程式雲開發文件project。config。json檔案：”cloudfunctionRoot“： ”static/functions/“複製程式碼點選並拖拽以移動進行雲開發首先我們需要找到上面這個檔案，在上面這個json檔案中加上上面這句cloudfunctionRoot 用於指定存放雲函式的目錄app。json檔案：”window“： { ”backgroundTextStyle“： ”light“， ”navigationBarBackgroundColor“： ”#移動接下來是操作資料庫的相關示例：例：首頁獲取背景音樂資源getMusicUrl （） { const that = this const db = wx。cloud。database（） const music = db。collection（ music ） music。get（）。then（res => { let musicUrl = res。data［0］。musicUrl audioCtx。src = musicUrl audioCtx。loop = true audioCtx。play（） that。getList（） }）}複製程式碼點選並拖拽以移動例：首頁獲取輪播圖陣列getList （） { const that = this const db = wx。cloud。database（） const banner = db。collection（ banner ） banner。get（）。then（res => { that。list = res。data［0］。bannerList }）}複製程式碼點選並拖拽以移動例：祝福頁，使用者送上祝福儲存使用者複製程式碼點選並拖拽以移動進入祝福頁，首先我們需要獲取送祝福的好友列表getUserList （） { const that = this wx。cloud。callFunction（{ name： use點選並拖拽以移動這是留言的評論，如圖：總結在這裡給大家講解幾點細節：雲開發是免費的；資料庫集合名首先必須要建立；雲函式新建後一定要建立並安裝依賴；如果擔心有些評論不太友好希望有刪除功能，可以給自己開放許可權，在每條評論加一個刪除按鈕，僅自己使用的時候透過唯一的openid控制刪除按鈕為可見，其他人不可見，從而來管理留言列表；資料庫建立集合後記得將許可權放開，如下圖：最後總結：除了一些靜態資源放在專案中，其他資源建議一律儲存在雲開發-儲存管理中，這樣的話，方便更換資源而不用再次提交等待小程式稽核，更換後的資源可以立即生效；我知道大家都喜歡拿來就能直接看到同樣效果的東西，本專案因為涉及到後臺資料，不可能完全把本人的環境放出來給大家使用，建議真的要實現相關功能或類似專案的小夥伴對照我的思路重新做一個屬於自己的作品才最有意義。大概的功能就是這麼多，希望可以幫助到大家，覺得寫得不錯的記得給作者點個贊，你們的支援是我不斷更新的最大動力！關注下面的標籤，發現更多相似文章小程式·雲開發安裝掘金瀏覽器外掛開啟新標籤頁發現好內容，掘金、GitHub、Dribbble、ProductHunt 等站點內容輕鬆獲取。快來安裝掘金瀏覽器外掛獲取高質量內容吧！評論上官羽心很棒的小程式2小時前fernandoxu程式碼會寫，就差個未婚妻了。5小時前roberthuang（作者）前端開發關於欄位相關的內容已經補充，不清楚的結合原始碼檢視8小時前FlyingAir前端回覆 roberthuang（作者）： 感謝！祝福！7小時前_lemon小前端很棒棒8小時前重名了前端祝福祝福8小時前程式圜_前端工程師 @ 中公教育留言區左上角有個小bug哦～點選那個顯示一個小角的字型就可以輸入文字進行留言17小時前相關推薦熱專欄roberthuang1天前小程式·雲開發mpvue+小程式雲開發，純前端實現婚禮邀請函12249專欄螞蟻金服科技23小時前小程式·雲開發支付寶工程師創造出了一個可以“複製”支付寶的神器1專欄李CHENGXI28天前微信小程式小程式·雲開發1個開發如何撐起一個過億使用者的小程式405熱專欄騰訊雲加社群4月前小程式·雲開發小程式·雲開發 專案開發經驗分享571專欄stupidWall1月前Node。js前端小程式雲開發初體驗233專欄netwjx曹宇2月前微信微信小程式小程式·雲開發初級FAQ323專欄薄荷前端2月前前端微信小程式雲開發初探202關於作者roberthuang前端開發獲得贊數130獲得閱讀數3，975掘金小冊Vue。js 元件精講新人價 ￥14。95￥29。9React 實戰：設計模式和最佳實踐新人價 ￥14。95￥29。9新人專享好禮送你45元買小冊立即領取相關文章支付寶工程師創造出了一個可以“複製”支付寶的神器101個開發如何撐起一個過億使用者的小程式405小程式·雲開發 專案開發經驗分享571小程式雲開發初體驗233目錄前言準備工作專案結構介紹頁面介紹雲開發介紹總結掘金瀏覽器外掛 - 下載外掛，送你45元買小冊掘金首頁動態話題小冊活動搜尋掘金搜尋寫文章登入註冊roberthuang2019年01月08日閱讀 3663mpvue+小程式雲開發，純前端實現婚禮邀請函目錄前言準備工作專案結構介紹頁面介紹雲開發介紹總結前言感謝OnceLove提供的思路，藉助他的小程式的介面UI風格，自己重新用mpvue實現了屬於自己的婚禮邀請函，前前後後花了3天時間。在這之前本人是沒想過要自己實現這樣一個專案，原因是後臺那塊是個麻煩事，所以當媳婦讓我自己實現這個邀請函的時候，起初我是拒絕的。後面由於快要過年了，公司專案沒有重大更新，趁著這段空閒時間，自己研究了下小程式自帶的雲開發，無需後臺支援，前後端都可以自己來實現，下面我將一一介紹本專案的實現過程！本小程式為婚禮正式使用的小程式（由於某些小夥伴的不文明行為，所以只能換一個小程式讓大家體驗），婚期將至，感興趣的可以掃碼體驗本專案，沾沾喜氣，歡迎大家體驗，有什麼問題可以在本文給我留言原始碼地址：https：//gitee。com/roberthuang123/wedding點選並拖拽以移動準備工作mpvue框架 mpvue官方文件小程式·雲開發 小程式·雲開發文件注意：使用mpvue前，首先你得先熟悉vue框架的基本使用專案結構介紹點選並拖拽以移動common目錄：放一些公共資源，如js，css，jsoncomponents目錄：元件相關的。vue檔案都放在這裡pages目錄：所有頁面都放在這個目錄utils目錄：使用mpvue時自動生成，可忽略app。json檔案：{ “pages”： ［ “pages/index/main”， “pages/photo/main”， “pages/map/main”， “pages/greet/main”， “pages/message/main” ］， “window”： { “backgroundTextStyle”： “light”， “navigationBarBackgroundColor”： “#fff”， “ ”pagePath“： ”pages/greet/main“， ”iconPath“： ”static/images/4-1。png“， ”selectedIconPath“： ”static/images/4-2。png“， ”text“： ”好友祝福“ }， { ”pagePath“： ”pages/message/main“， ”iconPath“： ”static/images/5-1。png“， ”selectedIconPath“： ”static/images/5-2。png“， ”text“： ”留言評論“ } ］ }， ”requiredBackgroundModes“： ［”audio“］}複製程式碼點選並拖拽以移動App。vue檔案：本人主要是為了增加專案更新後的提醒，所以在這個檔案加了些相關內容，內容如下，複製程式碼點選並拖拽以移動main。js檔案：import Vue from vue import App from 。/App Vue。config。productionTip = falseApp。mpType = app wx。cloud。init（{ env： 雲開發環境ID }）const app = new Vue（App）app。$mount（）複製程式碼點選並拖拽以移動functions目錄：主要放一些雲函式，這裡不清楚雲函式的文章後面會提及images目錄：主要放一些靜態資源圖片頁面介紹首頁——邀請函首頁著重和大家講解下背景音樂的實現方法const audioCtx = wx。createInnerAudioContext（）首先，wx。createInnerAudioContext 介面獲取例項接著，透過例項的相關方法來實現音樂的播放與暫停功能關於小程式音訊相關文件具體程式碼如下：複製程式碼點選並拖拽以移動以上程式碼中使用到了雲開發相關功能，文章後面會介紹，請大家稍安勿躁相簿頁——就一個輪播圖，這裡就不過多介紹地圖頁——這裡著重講一下地圖標籤mapmap標籤 關於map元件的使用文件這裡講一下標記點markersdata （） { return { // qqSdk： ， markers： ［{ iconPath： 。。/。。/static/images/nav。png ， id： 0， latitude： 30。08059， longitude： 115。93027， width： 50， height： 50 }］ } }複製程式碼點選並拖拽以移動複製程式碼點選並拖拽以移動祝福頁——也是雲開發相關內容，後面會介紹留言頁——也是雲開發相關內容，後面會介紹雲開發介紹小程式雲開發文件project。config。json檔案：”cloudfunctionRoot“： ”static/functions/“複製程式碼點選並拖拽以移動進行雲開發首先我們需要找到上面這個檔案，在上面這個json檔案中加上上面這句cloudfunctionRoot 用於指定存放雲函式的目錄app。json檔案：”window“： { ”backgroundTextStyle“： ”light“， ”navigationBarBackgroundColor“： ”#移動接下來是操作資料庫的相關示例：例：首頁獲取背景音樂資源getMusicUrl （） { const that = this const db = wx。cloud。database（） const music = db。collection（ music ） music。get（）。then（res => { let musicUrl = res。data［0］。musicUrl audioCtx。src = musicUrl audioCtx。loop = true audioCtx。play（） that。getList（） }）}複製程式碼點選並拖拽以移動例：首頁獲取輪播圖陣列getList （） { const that = this const db = wx。cloud。database（） const banner = db。collection（ banner ） banner。get（）。then（res => { that。list = res。data［0］。bannerList }）}複製程式碼點選並拖拽以移動例：祝福頁，使用者送上祝福儲存使用者複製程式碼點選並拖拽以移動進入祝福頁，首先我們需要獲取送祝福的好友列表getUserList （） { const that = this wx。cloud。callFunction（{ name： use點選並拖拽以移動這是留言的評論，如圖：總結在這裡給大家講解幾點細節：雲開發是免費的；資料庫集合名首先必須要建立；雲函式新建後一定要建立並安裝依賴；如果擔心有些評論不太友好希望有刪除功能，可以給自己開放許可權，在每條評論加一個刪除按鈕，僅自己使用的時候透過唯一的openid控制刪除按鈕為可見，其他人不可見，從而來管理留言列表；資料庫建立集合後記得將許可權放開，如下圖：最後總結：除了一些靜態資源放在專案中，其他資源建議一律儲存在雲開發-儲存管理中，這樣的話，方便更換資源而不用再次提交等待小程式稽核，更換後的資源可以立即生效；我知道大家都喜歡拿來就能直接看到同樣效果的東西，本專案因為涉及到後臺資料，不可能完全把本人的環境放出來給大家使用，建議真的要實現相關功能或類似專案的小夥伴對照我的思路重新做一個屬於自己的作品才最有意義。大概的功能就是這麼多，希望可以幫助到大家，覺得寫得不錯的記得給作者點個贊，你們的支援是我不斷更新的最大動力！關注下面的標籤，發現更多相似文章小程式·雲開發安裝掘金瀏覽器外掛開啟新標籤頁發現好內容，掘金、GitHub、Dribbble、ProductHunt 等站點內容輕鬆獲取。快來安裝掘金瀏覽器外掛獲取高質量內容吧！評論上官羽心很棒的小程式2小時前fernandoxu程式碼會寫，就差個未婚妻了。5小時前roberthuang（作者）前端開發關於欄位相關的內容已經補充，不清楚的結合原始碼檢視8小時前FlyingAir前端回覆 roberthuang（作者）： 感謝！祝福！7小時前_lemon小前端很棒棒8小時前重名了前端祝福祝福8小時前程式圜_前端工程師 @ 中公教育留言區左上角有個小bug哦～點選那個顯示一個小角的字型就可以輸入文字進行留言17小時前相關推薦熱專欄roberthuang1天前小程式·雲開發mpvue+小程式雲開發，純前端實現婚禮邀請函12249專欄螞蟻金服科技23小時前小程式·雲開發支付寶工程師創造出了一個可以“複製”支付寶的神器1專欄李CHENGXI28天前微信小程式小程式·雲開發1個開發如何撐起一個過億使用者的小程式405熱專欄騰訊雲加社群4月前小程式·雲開發小程式·雲開發 專案開發經驗分享571專欄stupidWall1月前Node。js前端小程式雲開發初體驗233專欄netwjx曹宇2月前微信微信小程式小程式·雲開發初級FAQ323專欄薄荷前端2月前前端微信小程式雲開發初探202關於作者roberthuang前端開發獲得贊數130獲得閱讀數3，975掘金小冊Vue。js 元件精講新人價 ￥14。95￥29。9React 實戰：設計模式和最佳實踐新人價 ￥14。95￥29。9新人專享好禮送你45元買小冊立即領取相關文章支付寶工程師創造出了一個可以“複製”支付寶的神器101個開發如何撐起一個過億使用者的小程式405小程式·雲開發 專案開發經驗分享571小程式雲開發初體驗233目錄前言準備工作專案結構介紹頁面介紹雲開發介紹總結掘金瀏覽器外掛 - 下載外掛，送你45元買小冊
呼叫新郎
呼叫新娘
呼叫新郎
呼叫新娘
