標簽：dev 如何 雲端 src pen 繪制 業務 url qpi
在微信早期，我們內部就有這樣的訴求，在微信打開的H5可以調用到微信原生一些能力，例如公衆號文章裏可以打開公衆號的Profile頁。所以早期微信提供了Webview到原生的通信機制，在Webview裏注入JSBridge的接口，使得H5可以通過它調用到原生能力。
我們可以通過JSBridge微信預覽圖片的功能：
WeixinJSBridge.invoke(‘imagePreview‘, {
current: https://img1.gtimg.com/1.jpg‘,
urls: [
‘https://img1.gtimg.com/1.jpg‘,
‘https://img1.gtimg.com/2.jpg‘,
‘https://img1.gtimg.com/3.jpg‘
]
})
早期微信官方是没有暴露这些接口的，都是腾讯内部業務在使用，很多外部开发者发现后，就依葫芦画瓢地使用了。
從另外一個角度看，JSBridge是微信和H5的通信協議，有一些能力可能要組合不同的能力才能完整調用。如果我們直接開放這套API，相當于所有開發者都要直接理解這樣的接口協議，顯然是很不合理的。
所以在2015年初的时候，微信就发布了JSSDK，其实就是隐藏了内部一些细节，包装了几十个API给到上层業務直接调用。
前邊的代碼就變成了：
wx.previewImage({
current: https://img1.gtimg.com/1.jpg‘,
urls: [
‘https://img1.gtimg.com/1.jpg‘,
‘https://img1.gtimg.com/2.jpg‘,
‘https://img1.gtimg.com/3.jpg‘
]
})
開發者可以用JSSDK來調用微信的能力，來完成一些以前H5做不到或者難以做到的事情。
能力上得到了更多的支持，但是微信裏的H5體驗卻沒有改善。
第一點是加載H5時的白屏。在微信裏打開鏈接後會看到白屏，有一些H5的服務不穩定，這個白屏現象會更嚴重。
第二點是在H5跳轉到其他頁面時，切換的效果也很不流暢，只能看到頂部綠色進度條在走。
隨著JSSDK的開放，還出現了更不好對付的問題。
微信上越來越多幹壞事的人，有人做假紅包，有人誘導分享，有僞造一些官方活動。他們會利用JSSDK的分享能力變相的去裂變分享到各個群或者朋友圈，由于JSSDK是根據域名來賦予api權限的，運營人員封了一個域名後，他們立馬用別的域名又繼續做壞，要知道注冊一個新的域名的成本是很低的。
龍哥在2016年微信公開課上提出了應用號的概念，我們要重新設計一個新的移動應用開發模式，同時我們要解決剛剛提到的一些問題。
至此，我們回顧一下目前移動應用開發的一些特點：
我們更想要的一種開發模式應該是要滿足一下幾點：
很多人可能会第一时间想到Facebook的React Native(下边简称RN)，是不是RN就能解决这些问题呢？
是的，React Native貌似可以解决刚刚那些问题，我们也曾经想用RN来做。但是仔细分析了一下，我们发现了采用RN这个机制做开放平台还是存在一些问题。
所以我们舍弃了这样的方案，我们改用了Hybrid的方式。简单点说，就是把H5所有代码打包，一次性Load到本地再打开。这样的好处是我们可以用一种近似Web的方式来开发，同时在体验上也可以做到不错的效果，并且也是可以做到雲端更新的。
現在留給我們的最後一個問題就是，平台的管控問題。
怎么理解呢？我们知道H5的界面结构是用HTML进行描述，浏览器进行一系列的解析最终繪制在界面上。
同时浏览器提供了可以操作界面的DOM API，开发者可以用这些API进行一些界面上的变动，从而实现UI交互。
既然我們要采用Web+離線包的方式，那我們要解決前邊說過的安全問題，我們就要禁用掉很多危險的HTML標簽，還要禁用掉一些API，我們要一直維護這樣的白名單或者黑名單，實現成本太高了，而且未來浏覽器內核一旦更新，對我們來說都是很大的安全隱患。
這就是小程序一開始遇到的問題，在下篇文章《小程序架構設計(二)》，我们再詳細展开一下小程序是如何解决以上这个问题的。
標簽：dev 如何 雲端 src pen 繪制 業務 url qpi
原文地址：https://www.cnblogs.com/feng9exe/p/15000300.html
