整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          全平臺大前端同步開發小程序H5及APP實例

          前端

          場景

          前兩天在福建,朋友打麻將要求我提供可以麻將上使用的搖骰子小程序(PS:之前開發了喝酒搖骰子的小程序),于是決定將之前的小程序功能迭代一下。

          之前的微信小程序《搖骰子輔助工具》,使用過的人數16萬+,每月收益約1000元的廣告費……關于這個小程序的功能就不細說了,真的有興趣的小伙伴請自行點擊看下,GitHub 也是開源的 https://github.com/ZweiZhao/DicePlay。

          DicePlay


          Uni

          Uni-App 是數字天堂公司維護開發的多端整合大前端框架,不做廣告,自行查閱,只是我用到這個技術棧而已。


          之前技術

          《搖骰子輔助工具》最早使用原生小程序開發,后面轉了 mpvue + coffeescript + pug + sass 開發,所以從 mpvue 轉到 uni 很簡單,因為 uni 官網有相關教程,按照方法走就行了。我這里遇到點惡心的事情,就是 cs、pug 與 sass 的抉擇問題。最終結論就是手動(肯定用工具啦)把 cs、pug 與 sass 轉換回了 js、html 與 css,原因很簡單,那三個用著爽但是在新工具或框架下,未必完美支持,換回基礎語言就可以保證換平臺的便捷性

          mpvue

          之前 mpvue 的一個頁面或組件的結構是這樣的,因為那時候 mpvue 對 cs 的支持很差,只能這樣丑陋的外部引入了(現在 mpvue 好像涼了)。


          Uni Ver

          uni ver

          uni 版本的結構會相對簡單一點,官網也限制了你想不簡單的路子……


          條件編譯

          這個是真填坑神器……

          總之這個簡單的修改項目,我要做到全平臺(APP,H5,微信小程序),目前唯一遇到的坑,就是文件引用路徑問題。

          1. 小程序引用 mp3 文件,使用本地路徑不播放
          2. h5 打包發布使用 GitHub Pages 時候,換相對路徑
          3. APP 使用絕對根路徑

          上面三點把我坑慘了,換代碼半小時,搞路徑,快兩小時。有想玩這個 uni 的,這一塊務必注意啊!


          上面問題的解決方案如下:

          mp3 文件直接掛在小程序云開發的騰訊云上面

          點擊上面的云開發,進去授權,并上傳到儲存管理即可。

          云開發位置

          存儲管理

          獲取存儲后的地址然后小程序調用即可。

          注意,注意!這個鏈接是 cloud:// 協議,所以其他平臺不能用!!!

          因此要用到條件編譯來區分這個地址是小程序專用的,具體條件編譯下面統一貼圖。


          H5 打包引用路徑處理

          比如我放在 GitHub Pages,依賴項目是 DicePlay,那么 Pages 給的地址就是(我綁定了域名):http://www.zweizhao.com/DicePlay/,結合這邊打包后,生成的最后路徑就是:http://www.zweizhao.com/DicePlay/unpackage/dist/build/h5/。

          可是,uni 默認是打包靜態文件引用路徑是:/static,那么這樣引用就炸了,肯定獲取不到。

          所以要去 manifest.json 里面源碼修改添加這樣:

          manifest

          把文件包指定到這個地方。

          呵呵,你以為這就完了?

          js 文件里面引用的文件也要修改是相對路徑,比如:"./"。

          所以……又要條件編譯,同樣等下面統一。

          這個問題,如果你項目丟在鏈接根目錄就不用操心。


          APP 根路徑

          這個我是試出來的,起碼 iOS 是設置根路徑獲取,安卓就不是很清楚了,如果不是,那就再加一個條件變編譯吧。

          于是當前就有了三個條件編譯(APP,H5,微信小程序),如下:

          條件編譯

          為什么我寫的這么不優雅?

          還不是因為 uni 只提供了條件編譯 || 判斷,沒有提供 && 判斷……


          成果

          其他的暫時也不知道說啥,直接看成果吧,從左到右依次:H5,小程序,APP。

          成果

          恩,看到這里,我覺得坑一點還是值得的……撒花。

          希望大家能夠從文章里學到一點東西,謝謝。

          輯導語:通過廣告案例展示,企業可以更高效地打造口碑,吸引新客戶的到來。那么,如何做好廣告案例分析呢?本篇文章中作者結合實際經驗對此展開了一系列講述,感興趣的小伙伴們快來一起看看吧。

          一說到學習方法,其中必有「看案例」。

          但很多人看案例,只是積累了案例數量,獲得了見識,并沒有增加見解。

          看完覺得都會了,等到自己做項目時毫無頭緒,不知從哪兒開始。

          那么,看再多案例也無濟于事,因為只是「知其然,不知其所以然」。

          《如何做好廣告案例分析?簡單三步告訴你》那篇在知乎有200+贊同,是發布文章中反饋較高的,我想仍有很多人對此有需求。

          恰好前段時間在數英看了很多廣告案例,有些新想法,說給你聽。跟你聊聊,如何通過廣告洞察背后的品牌策略,即這條廣告是怎么從0到1誕生的,讓案例的思路為你所用。

          一個廣告傳播活動,并非空穴來風,一定是符合公司戰略方向的,怎么找到這種方向呢?

          通過這篇文章,帶你略窺一二。

          一、舉個例子,你怎么分析這條廣告?

          https://v.qq.com/x/page/o3225xpbk46.html

          這是小紅書2021年春節前的一條廣告片,如果你看過之前那篇文章,照著順序大概也能做個總結:

          短片趕在年前上線,借助家庭做飯高峰節點,塑造了八個做飯場景,表達對父母、對子女、對伴侶、對寵物的愛,通過極具感染力的文案和鏡頭,打動人心,號召大家在新年為愛的人做頓飯,從而增加小紅書的用戶活躍度和內容豐富度。

          從網友反饋和社媒數據來看,實現了很好的傳播效果。算是一條很好的廣告片了。

          你的下一步動作,可能是把它放到收藏夾中,當下次有關于愛和做飯的項目主題時再翻出來,便可以從中借鑒相應的文案、場景和表達手法,為我所用,這就算學了一個案例。一般的常規操作,就是如此。

          但是,這樣就足夠了嗎?

          這還不夠,因為你只知道小紅書怎么做的,仍然停留在技術分析層面,知道用了什么文案、場景、畫面內容,抓住了用戶哪些情緒等。但你不知道它為什么要做這條廣告。

          這就無法解答深一層的疑惑:為什么小紅書做美食了?不是美妝穿搭一類的凡學工具書嗎?

          如此說來,片子雖好,但不符合產品定位,這樣的廣告就是無效的——就會得出另一種結論吧?那是否還值得借鑒?

          下面來為你逐一解答,告訴你怎么從三個層面分析一條廣告。

          二、廣告分析的三個層次

          1. 第一層:戰術層

          著重用戶溝通角度,就是執行層。

          如上所述,從哪個洞察點切入,用了什么表現形式,視頻、平面還是事件活動,用了哪些人物、畫面、場景,選了什么媒介,傳播鏈路是否完整流暢等。即用戶可感知的層面。

          2. 第二層:策略層

          策略一般指:

          • 可以實現目標的方案集合
          • 根據形勢發展而制定的行動方針和斗爭方法
          • 有斗爭藝術,能注意方式方法

          在廣告策略中,可以理解為為實現廣告戰略目標所采取的對策和應用的方法、手段。

          我們嘗試分析小紅書的廣告策略:通過廣告,引導多年齡層用戶的多類型內容分享,豐富平臺內容資源,改變「小紅書=曬美妝」的印象,塑造小紅書多面精彩生活記錄的平臺形象。

          疫情加速了線上社區發展,小紅書是很好的內容平臺,可以通過線上做飯記錄和做飯教程,拉動新用戶,同時豐富內容類型。

          在上述廣告策略下,能看到小紅書最近還做了許多其他廣告:潮流穿搭、游戲跨界、價值主張、熟人社區……多種多樣,也已經脫離美妝的范疇。

          而且更重要的一點時,大部分短片結尾,都號召用視頻的方式發現生活、記錄生活。

          到這里就有兩個問題:

          1. 小紅書為什么要做多元內容社區,面向更廣泛受眾?
          2. 為什么要做視頻?

          這就深入到企業戰略層面,我們嘗試做個分析。

          3. 第三層:戰略層

          戰略可以理解為對所處環境的整體要素分析后,制定的一系列戰爭策略和指導。

          有兩個關鍵點:

          分別來看。

          小紅書面對什么樣的環境呢?

          用波特五力模型做個分析(小紅書兼具內容社區和電商功能,這里只從內容角度分析):

          供應商:內容生產方,比如KOL、領域達人、以及普通人等。

          達人的需求是流量變現,現在視頻類內容有流量紅利,且很多短視頻平臺有補貼和變現渠道,優質內容會傾向這類平臺。而優質內容生產者一直是內容平臺爭取的關鍵資源。

          同行業競爭者:如果從美妝、女性定位出發,她的競對是美拍、蘑菇街等;從內容消費角度看,則競對更廣,如抖音、快手、視頻號、B站、公眾號等。因為不是看你就是看他,他們都屬于內容消費。

          潛在進入者:無論是美妝或是其他垂直領域內容平臺,甚至電商平臺,都有轉為大眾內容消費的可能。比如即刻、知乎可以開始做短視頻;淘寶等電商平臺已經開始做直播、短視頻;甚至閑魚這類二手交易平臺也有自己的內容社區,視頻瀏覽體驗無異于抖音、快手,而且似乎也掌握了流量密碼。

          閑魚的視頻板塊

          替代產品:線上內容消費的替代產品,就是不把時間花在看視頻上,可以去打游戲、看書、運動健身、旅游、逛街等。

          而這些場景仍然有內容屬性:打游戲想看下直播、教程;看書想找下推薦、讀后感、一分鐘看完X書講解;健身想看瑜珈教程、私教講課等。

          每一項都與線上內容強綁定,而視頻又是最好的載體。

          客戶談判能力:普通用戶,很明顯的趨勢是看視頻的用戶量和增長趨勢,遠高于圖文內容消費,那么他們的選擇邏輯就是——哪家有視頻看哪家。

          綜上,小紅書若想保留現有用戶,持續吸引新用戶,必然面臨的轉型就是視頻化。靠流量補貼和變現渠道吸引創作者,通過廣告號召普通用戶在平臺曬視頻,以建立自己的視頻資源供給。

          你可能還有疑問:做視頻是大勢所趨,小紅書為什么不做美妝、女性垂直內容,反而做大眾內容呢?

          這里我用一個工具分析:

          銷售收入=人數x客單價x購買頻次

          對內容平臺來說,他們搶占的是用戶注意力,衡量數據就不是總交易額,而是用戶在平臺的總消費時間。那么:

          總消費時間=人數x單次使用時間x打開頻次

          要想提高總消費時間,就要提高每個要素的數額:

          (1)提高人數

          擴大用戶基數,用多類型、大眾化內容吸引不同年齡段和不同興趣愛好用戶,不難理解。

          (2)提高單次使用時間

          即便視頻做得再精美,只看美妝內容也會審美疲勞,就要美食、音樂、段子、美女、運動、旅游等內容來中和。

          字節系的智能算法、個性推薦已驗證,通過數據標簽給用戶推薦喜歡的不同內容,讓用戶拿起來就放不下,使用時間越長,對平臺的依賴也越強。

          (3)提高打開頻次

          除評論點贊互動、消息通知、積分、活動等運營手段能讓你時不時打開APP外,豐富內容類型也可以。

          比如做飯想找美食參考、看環球影城攻略、周末逛街去處推薦、或者單純排隊想打發時間,每一個線下場景,也都能讓你打開APP,找到自己所需。

          馬老師講過,每一家互聯網公司,做到最后都是數據公司。當你掌握的用戶數據量越多,數據越精準、多維,那么公司的價值也越高。

          電商平臺通過交易數據給用戶設定標簽,能做到精準廣告投放,提高交易效率。內容平臺則通過瀏覽記錄給用戶打標簽,要想標簽越精準,就需要更多的用戶數據和瀏覽時長,那么泛大眾內容就是必經之路。

          至于何時推出什么主題吸引什么人群,那就是運營策略上要考慮的了。

          三、回過頭再來看看

          現在再看這條廣告,你是不是能理解得更多?

          https://v.qq.com/x/page/o3225xpbk46.html

          除了看到小紅書在宣傳曬做飯的視頻,也看到了小紅書美妝之外多種多樣的內容,以及背后是各大內容平臺的領地爭奪、廝殺與號角。

          最后我想說,視頻廣告、平面廣告或者活動事件,只是企業的戰術行為,它必須符合企業的戰略。

          我們在分析一個營銷動作時,如果不明白背后的戰略意圖,那就無法看到全貌。你所做的「案例學習」,也不過是蜻蜓點水,收效甚微。

          比如有文章分析谷愛凌代言某些品牌不合適,原因是品牌調性與谷愛凌關聯弱。這就是只從戰術層面看,沒有看到背后的戰略設計。

          三棵樹、科勒可能冬奧期間線上投放少,但在線下門店時,代言人的作用很大的,哪怕只有一張照片,也能促進消費者購買決策。

          而且,這些品牌找代言人,還有個目的是為了增加經銷商信心,為了讓渠道看見品牌實力。

          半天妖是山東區域品牌,自從有張一山代言后,進入一線城市mall店的阻力小了很多。

          當你明白企業的這一層意圖,再來看代言人,才能理解這么做的真正原因。

          那么再做案例分析,或者下一次做類似項目,才有借鑒的意義。

          戰略、策略不像平面、視頻能用肉眼看到,但肉眼看不到的東西,往往才是關鍵所在。

          #專欄作家#

          蘇佬師,微信公眾號:蘇佬師,人人都是產品經理專欄作家。專注廣告營銷領域,有趣有料,深受讀者喜歡,行業文章被全網幾十萬人閱讀。

          本文原創發布于人人都是產品經理,未經作者許可,禁止轉載

          題圖來自 Unsplash,基于CC0協議

          Web 開發中,解析 HTML 是一個常見的任務,特別是當我們需要從網頁中提取數據或操作 DOM 時。掌握 Node.js 中解析 HTML 的各種方式,可以大大提高我們提取和處理網頁數據的效率。本文將介紹如何在 Node.js 中解析 HTML。

          • Node.js 是什么?Node.js 如何安裝及如何配置環境?一文講解

          基本概念

          HTML 解析是指將 HTML 文本轉換為可操作的數據結構,通常是 DOM(文檔對象模型)。DOM 是一個樹狀結構,表示了網頁的結構和內容,允許我們使用 JavaScript 操作和修改網頁。

          常用的 HTML 解析方法

          以下是在 Node.js 中常用的幾種 HTML 解析方法:

          1.Cheerio:Cheerio 是一個類似于 jQuery 的庫,它可以在服務器端使用 CSS 選擇器來解析 HTML 并操作 DOM。它適用于解析靜態 HTML 頁面。

          2.jsdom:jsdom 是一個在 Node.js 中模擬 DOM 環境的庫。它能夠解析和操作 HTML,同時還支持模擬瀏覽器環境中的許多特性,如事件處理和異步請求。

          3.htmlparser2:htmlparser2 是一個快速的 HTML 解析器,它能夠將 HTML 文檔解析成 DOM 節點流。它通常用于處理大型 HTML 文檔或流式數據。

          實踐案例:使用 Cheerio 解析 HTML

          以下是一個使用 Cheerio 解析 HTML 的實際案例,其中包含基本的路由與請求處理。確保你的開發環境中已經安裝了 Node.js 和 npm。

          1、首先,創建一個新的文件夾,并在該文件夾中運行以下命令初始化項目:

          npm init -y

          2、安裝所需的依賴庫:

          npm install express cheerio axios

          3、創建一個名為 index.js 的文件,然后編寫以下代碼:

          const express = require('express');
          const axios = require('axios');
          const cheerio = require('cheerio');  // 引入 cheerio 庫,用于解析 HTML
          
          const app = express();
          const PORT = 3000;
          
          app.get('/', async (req, res) => {
            try {
              // 使用 Axios 發起 GET 請求獲取網頁的 HTML 內容
              const response = await axios.get('https://apifox.com/blog/mock-manual/'); // 替換為你想要解析的網頁 URL
              const html = response.data;  // 獲取響應中的 HTML 內容
              
              const $ = cheerio.load(html);  // 將 HTML 文本傳遞給 cheerio,創建一個類似于 jQuery 的對象
              
              // 使用 cheerio 對象的選擇器來獲取網頁標題,并提取文本內容
              const title = $('title').text();  
              
              res.send(`Title: ${title}`);  // 將標題作為響應發送給客戶端
            } catch (error) {
              console.error(error);
              res.status(500).send('An error occurred');  // 發生錯誤時發送錯誤響應
            }
          });
          
          app.listen(PORT, () => {
            console.log(`Server is running on port ${PORT}`);  // 啟動服務器并監聽指定端口
          });

          在上述代碼中,注釋解釋了每個關鍵步驟的作用:

          • 通過 axios.get() 發起 GET 請求,獲取網頁的 HTML 內容。
          • 使用 Cheerio 的 $ = cheerio.load(html) 創建了一個可用于選擇 DOM 元素的 Cheerio 對象。
          • 通過 $() 使用類似于 jQuery 的選擇器,獲取 <title> 元素的文本內容。
          • 最后,將提取的標題作為響應發送給客戶端。在這個案例中,我們使用 Express 來創建一個簡單的服務器,當訪問根路由時,我們使用 Axios 獲取網頁的 HTML 內容,然后使用 Cheerio 解析并提取網頁標題。在瀏覽器或 API 工具中訪問 http://localhost:3000/,你將看到響應。
            • 什么是 axios?如何使用 axios?一文快速入門

          提示、技巧與注意事項

          • 在使用 Cheerio、jsdom 或 htmlparser2 時,務必了解它們的文檔和用法,以充分利用其功能。
          • 當解析復雜的動態頁面時,考慮使用模擬瀏覽器行為的庫,如 Puppeteer。

          使用接口工具調試后端接口

          Apifox 為例,Apifox = Postman + Swagger + Mock + JMeter,Apifox 支持調試 http(s)、WebSocket、Socket、gRPC、Dubbo 等協議的接口,并且集成了 IDEA 插件。在后端人員寫完服務接口時,測試階段可以通過 Apifox 來校驗接口的正確性,圖形化界面極大的方便了項目的上線效率。

          在本文的例子中,就可以通過 Apifox 來測試接口。新建一個項目后,在項目中選擇 “調試模式” ,填寫請求地址后即可快速發送請求,并獲得響應結果,上文的實踐案例如圖所示:

          總結

          Node.js 提供了多種方法來解析 HTML,包括 Cheerio、jsdom 和 htmlparser2。選擇適合你需求的庫,可以輕松地操作和提取網頁內容。

          知識擴展:

          • Node.js 中怎么拷貝文件?nodejs 拷貝文件的方法
          • 如何在線建一個 JAVA 的 Spring Boot 項目?Spring Boot 快速入門 Helloworld 示例

          參考鏈接:

          • Cheerio 官方文檔:https://cheerio.js.org/
          • jsdom GitHub 倉庫:https://github.com/jsdom/jsdom
          • htmlparser2 GitHub 倉庫:https://github.com/fb55/htmlparser2

          主站蜘蛛池模板: 亚洲国产美国国产综合一区二区| 91久久精品无码一区二区毛片| 日本精品一区二区三区在线视频| 美女福利视频一区| 日韩在线一区二区| 精品在线视频一区| 国产精品亚洲一区二区麻豆 | 日韩一区二区三区在线观看| 亚洲国产精品一区二区三区久久| 亚洲午夜福利AV一区二区无码| 日韩免费无码视频一区二区三区 | 欧洲精品码一区二区三区| 国模少妇一区二区三区| 人妻体内射精一区二区三四| 日韩人妻不卡一区二区三区| 国产高清在线精品一区二区| 亚洲国产日韩一区高清在线| 中文字幕一区二区在线播放| 日韩在线视频一区二区三区| 国产成人精品第一区二区| 搡老熟女老女人一区二区| 亚洲一区二区三区AV无码| 中文字幕日韩欧美一区二区三区 | 91精品乱码一区二区三区| 久久精品一区二区国产| 国产丝袜无码一区二区三区视频| 成人一区专区在线观看| 国产在线一区二区三区在线| 无码视频免费一区二三区| 日本一区二区三区中文字幕| 精品国产一区二区麻豆| 亚洲一区在线视频观看| 91精品国产一区| 国产精品电影一区二区三区| 精品综合一区二区三区| 国产激情视频一区二区三区| 无码日韩精品一区二区三区免费 | 一区二区三区免费高清视频| 国产乱子伦一区二区三区| 国产激情з∠视频一区二区| 亚洲AV无码片一区二区三区|