摘要：關(guān)于微信小程序之前只是聽(tīng)說(shuō)，并沒(méi)有引起我太大的興趣。剛好團(tuán)隊(duì)內(nèi)部有個(gè)需求需要微信小程序。暫時(shí)沒(méi)有上線經(jīng)歷，沒(méi)辦法給出這個(gè)時(shí)間微信小程序的代碼包大小當(dāng)前限制是。

關(guān)于微信小程序之前只是聽(tīng)說(shuō)，并沒(méi)有引起我太大的興趣。周一被小程序刷屏，然后就順手搜索了解了一下。發(fā)現(xiàn)小程序已經(jīng)火遍了整個(gè)程序員圈子。剛好團(tuán)隊(duì)內(nèi)部有個(gè)需求需要微信小程序。就緊急對(duì)微信小程序進(jìn)行了調(diào)研，閱讀過(guò)開(kāi)發(fā)者文檔后總結(jié)了以下的幾個(gè)開(kāi)發(fā)者比較關(guān)心的問(wèn)題：

微信小程序提供給開(kāi)發(fā)者的能力有哪些；

在微信小程序易忽略的知識(shí)點(diǎn)和代碼安全問(wèn)題；

PassFE和PassRD的學(xué)習(xí)和開(kāi)發(fā)成本；

注意：這篇文章刪除了一些跟我當(dāng)前業(yè)務(wù)相關(guān)的一些內(nèi)容。如果有興趣小程序開(kāi)發(fā)的我們可以一起交流哈。

Request請(qǐng)求

上傳，下載

Websocket請(qǐng)求

媒體

圖片選擇（獲取圖片信息）

錄音

音頻播放控制

音樂(lè)播放控制

文件的相關(guān)操作

數(shù)據(jù)存儲(chǔ)（跟h5的一樣）

設(shè)備

獲取用戶的地理位置信息

獲取用戶的設(shè)備信息（網(wǎng)絡(luò)，系統(tǒng)，重力感應(yīng)，羅盤，撥打電話，掃碼）

界面

交互反饋，設(shè)置導(dǎo)航條樣式，導(dǎo)航，動(dòng)畫

繪圖，下拉刷新

開(kāi)放的接口

登錄，獲取用戶信息，微信支付，模板消息

小程序的運(yùn)行環(huán)境是微信客戶端提供的類瀏覽器（WebView）運(yùn)行環(huán)境。小程序相當(dāng)于運(yùn)行在一個(gè)瀏覽器環(huán)境中。

小程序的請(qǐng)求都必須是https的請(qǐng)求。支持常用的HTTP協(xié)議的方法，比如：PUT,GET,POST等；因?yàn)樗械恼?qǐng)求都是由NA轉(zhuǎn)發(fā)的，所以不會(huì)存在跨域的問(wèn)題（微信小程序的設(shè)置頁(yè)面可以設(shè)置）。小程序的網(wǎng)絡(luò)請(qǐng)求的referer是不可以設(shè)置，格式是固定的格式。

小程序運(yùn)行在微信的渲染引擎中是不支持window和document對(duì)象。所以無(wú)法使用這兩個(gè)對(duì)象操作cookie操作。開(kāi)發(fā)者可以通過(guò) wx.setStorage等方法在客戶端存儲(chǔ)數(shù)據(jù)操作；

是否可以收集用戶的敏感信息。當(dāng)前只是可以獲取用戶的地理位置，頭像，昵稱信息。其它信息不能夠獲取。（首先微信的登錄接口不提供這樣的能力，第二微信有審核機(jī)制，如果我們有這樣的代碼，小程序可能審核不通過(guò)）

出現(xiàn)安全問(wèn)題后，從修復(fù)問(wèn)題到上線的響應(yīng)時(shí)長(zhǎng)的問(wèn)題。暫時(shí)沒(méi)有上線經(jīng)歷，沒(méi)辦法給出這個(gè)時(shí)間；

微信小程序的代碼包大小當(dāng)前限制是1MB。所以頁(yè)面引用的圖片或者是文件必須以外鏈的方式；

微信小程序有自己的設(shè)計(jì)規(guī)范，需要UI同學(xué)按照微信小程序的設(shè)計(jì)規(guī)范評(píng)估我們當(dāng)前的UI是否符合微信的設(shè)計(jì)規(guī)范，否則會(huì)存在審核不通過(guò)的可能。

微信小程序的UI規(guī)范地址：https://mp.weixin.qq.com/debu...

微信小程序借鑒了當(dāng)前非常流行的前端框架react和vue的開(kāi)發(fā)思想，組件化的開(kāi)發(fā)方式。一個(gè)頁(yè)面就是一個(gè)組件，一個(gè)組件由以下4個(gè)部分組成：

所以在開(kāi)發(fā)微信小程序的過(guò)程中我們需要學(xué)習(xí)微信小程序的wxml語(yǔ)法。個(gè)人認(rèn)為wxml的語(yǔ)法相對(duì)還是比較容易掌握的。而wxss的語(yǔ)法就是我們熟知的css的語(yǔ)法，只是不支持一些高級(jí)的css選擇器。

通過(guò)下圖了解小程序的頁(yè)面的渲染過(guò)程

由上面的流程可以知道在小程序的渲染引擎渲染頁(yè)面的時(shí)候，頁(yè)面需要的數(shù)據(jù)都是通過(guò)接口獲取的。而我們現(xiàn)在的開(kāi)發(fā)模式基本都是后端php渲染smarty模板，渲染過(guò)程中會(huì)將某些前端需要的變量或者是參數(shù)寫到Html頁(yè)面中。如果以后要在小程序中拓展Pass的能力，后端會(huì)有一定的開(kāi)發(fā)成本；

如果你當(dāng)前的開(kāi)發(fā)模式跟我們的一樣，如果想要在小程序中開(kāi)發(fā)自己的頁(yè)面，也是會(huì)有一定的后端開(kāi)發(fā)成本的；

以上就是對(duì)支持產(chǎn)品線在微信小程序中登錄面臨的問(wèn)題的調(diào)研結(jié)果和對(duì)我們當(dāng)前服務(wù)能力的影響。大家如果對(duì)微信小程序有興趣可以跟我交流哈。