開發人員如何看待?內嵌網頁應該這麼用

11-06

知曉程序註:

想必大傢都已經知道,微信昨天釋放瞭新的「內嵌網頁」能力。

在知曉雲團隊在第一時間實測(點擊閱讀文章)之後,今天,知曉程序(微信號 zxcx0101)為你帶來這篇有關新能力的深度解讀。

除瞭「跳轉網頁」和小程序關聯上限提升,微信還發佈瞭沒有宣佈的新能力。這個新能力究竟是什麼?看完文章你就知道瞭。

關註「知曉程序」微信公眾號,回復「開發」,獲取小程序開發全套經驗。

文 | 花叔

11 月 2 日,iPhone X 發售的前一晚,微信小程序發佈瞭一個重量級的更新:小程序內嵌網頁能力開發。

這個新能力怎麼用?

這個新能力使用起來也很簡單:登錄公眾平臺 mp.weixin.qq.com,小程序帳戶登錄,並進入「設置」-「開發設置」-「業務域名」進行配置。

然後,在小程序中就可以使用 <web-view> 標簽,實現對網頁的展示

<!-- wxml --> <!-- 指向微信公眾平臺首頁的 web-view --> <web-view src="https://mp.weixin.qq.com/"></web-view>

小程序裡的網頁,能幹啥?

用起來非常簡單,但這影響卻異常的大,具體會影響些什麼呢?

首先,這個 <web-view> 標簽承載的瀏覽器,跟微信內置的瀏覽器類似,核心肯定是一樣的。隻不過,在小程序裡,隻是刪掉或新增瞭某些功能。

花叔測試瞭一下,大部分 JS 內庫均能使用,利用它,你甚至能直接放個 HTML 5 遊戲。可以說,在這個內嵌的網頁裡,能做到事情跟普通網頁沒啥區別。

而網頁最大的技術優勢在於它有標準的編碼規范,成熟的 JS、HTML 和 CSS 框架,這些跟「現有微信 web view」一樣,應該都能用。

值得註意的是,這次改動還讓小程序具備瞭更廣的「熱更新」特性

原本在小程序中,僅僅能通過遠程接口的熱更新,實現前端頁面的固定模式的切換。

有瞭這個 web view 之後,開發者可以基於它,做一些特殊的內頁,可以隨時變換該頁面的外觀、佈局和數據。

新能力好處都有啥?

從開發人力來看,目前小程序的前端開發者綜合能力普遍比純頁面重構者高,因為他們要兼顧很多不同的技術點,這樣會導致部分小程序開發人力資源緊張。

而這個 web view 的出現,會讓部分專註頁網頁重構的同學,參與到小程序開發的工作中來,從而減緩原本小程序開發的總體壓力。

對於運營來說,某些內頁的迭代可以更及時和更可控,內容締造也可以更加快速

對產品來說,小程序現在可以做更多交互功能。例如以原來網頁的開發套路做一個聊天室,又或者以原來網頁的形式拉起第三方 App。

花叔試瞭一下,WeixinJSBridge 的 launch3rdApp 是可以用的,但具備權限控制機制。理論上如果具備權限,那麼能從小程序中間接通過 web view 的方式,拉起第三方 App。

與直接在微信打開網頁,有什麼區別?

從小程序產品邏輯看,小程序 web view 最關鍵的限制有這些:

每個小程序帳號僅支持配置最多 20 個域名。

每個域名僅支持綁定最多 20 個小程序。

每個小程序一年內最多支持修改域名 50 次。

個人開發者和海外開發者暫不開放。

很顯然,微信限制瞭域名數量以及域名和小程序之前的綁定關系,目的在於限制跳轉范圍。意思是:小程序不能像現有微信 web view 中的網頁那樣,能在頁面中隨意跳轉到任意網頁。

但這個限制對於專註於做自身內容和服務的開發團隊來說,並不會產生多大影響,成熟產品的站點一般不會有太多的外鏈,20 個域名已經滿足業務需求。

除此之外,這樣的限制方式能保證認真準備內容和服務的團隊更高效和及時地迭代內容,而又防止瞭生態中混亂的跳轉。

從技術角度看,還有另一個區別是,小程序 web view 提供瞭三類私有的 API:

其一,「小程序的 web view」往普通小程序內頁跳轉接口。列表如下:

wx.miniProgram.navigateTo:切換到某個小程序內頁,帶推進切換效果

wx.miniProgram.navigateBack:返回來源頁,帶推進切換效果

wx.miniProgram.switchTab:切換到小程序的某個頁卡

wx.miniProgram.reLaunch:直接重啟小程序

wx.miniProgram.redirectTo:切換到某個小程序內頁,不帶推進切換效果

其二,在「小程序的 web view」中,支持與 HTML 5 中 JSSDK 類似的接口,包括上傳、拍照、地圖、搖一搖、iBeacon、掃一掃、卡券等等的功能。

可以說,依靠小程序的 web view,就已經能做出具備獨特微信功能的應用。

其三,在小程序本身的分享回調方法中,追加瞭 webViewURL 參數

Page ( { onShareAppMessage ( options ) { console.log ( options.webViewUrl ) } } )

該參數為「小程序 web view」的 src 值。

有啥用呢?這個可以讓用戶把當前 web view 所在的內頁分享出去,然後其他用戶點擊這個分享鏈接時,小程序內能從新拿到這個 web view 的 src 值,實現 web view 再一次展示。

其實影響的地方還很多,這裡就不一一細說。

有同學擔心這個 web view 進來後,小程序會因此變得臃腫,會讓小程序進入傳統混合應用的怪圈

其實這個問題,類似「為什麼原生 App 要能訪問網頁,而不會被網頁取代」,這是因為 App 擁有網頁不可能有的特性,例如體驗,例如 App 本身的原生功能等等。

微信的產品規劃是很牛的,敢把 web view 放開,一定是覺得小程序有自己的核心特性瞭

大概是結束瞭 ……

One More Thing

還不能結束!

這次更新,還不止這個 web view。除瞭這個之外,還有第二個更新點,就是小程序關聯公眾號的數量上限提高瞭。現在一個小程序,可以跟 500 個公眾號綁定。

還有,這次官方發文沒提到第三個更新點 …… 很少人知道吧?

那就是「自定義組件」開放公測瞭,這貨是用來做代碼組件化的。

由於本文篇幅已經夠長瞭,這裡就不細說瞭,具體可以參考官方文檔。

關註「知曉程序」,回復「文檔」,獲取「自定義組件」官方文檔地址。

嗯,這次真的完畢瞭 ……

精彩圖片
文章評論 相關閱讀
© 2016 看看新聞 http://www.kankannews.cc/