小紅書廣告投放小程序簡(jiǎn)介

小程序是一種新形式的應(yīng)用程序，本文主要介紹了開發(fā)小程序與開發(fā)傳統(tǒng) Web 項(xiàng)目時(shí)的區(qū)別。

小程序與普通網(wǎng)頁(yè)開發(fā)的區(qū)別

小程序的主要開發(fā)語(yǔ)言是 JavaScript ，小程序的開發(fā)同普通的網(wǎng)頁(yè)開發(fā)相比有很大的相似性。對(duì)于前端開發(fā)者而言，從網(wǎng)頁(yè)開發(fā)遷移到小程序的開發(fā)成本并不高，但是二者還是有些許區(qū)別的。

網(wǎng)頁(yè)開發(fā)渲染線程和腳本線程是互斥的，這也是為什么長(zhǎng)時(shí)間的腳本運(yùn)行可能會(huì)導(dǎo)致頁(yè)面失去響應(yīng)，而在小程序中，二者是分開的，分別運(yùn)行在不同的線程中。網(wǎng)頁(yè)開發(fā)者可以使用到各種瀏覽器暴露出來(lái)的 DOM API，進(jìn)行 DOM 選中和操作。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運(yùn)行在 JSCore 中，并沒有一個(gè)完整瀏覽器對(duì)象，因而缺少相關(guān)的DOM API和BOM API。這一區(qū)別導(dǎo)致了前端開發(fā)非常熟悉的一些庫(kù)，例如 jQuery、 Zepto 等，在小程序中是無(wú)法運(yùn)行的。同時(shí) JSCore 的環(huán)境同 NodeJS 環(huán)境也是不盡相同，所以一些 NPM 的包在小程序中也是無(wú)法運(yùn)行的。

網(wǎng)頁(yè)開發(fā)者需要面對(duì)的環(huán)境是各式各樣的瀏覽器，PC 端需要面對(duì) IE、Chrome、QQ瀏覽器等，在移動(dòng)端需要面對(duì)Safari、Chrome以及 iOS、Android 系統(tǒng)中的各式 WebView 。而小程序開發(fā)過程中需要面對(duì)的是兩大操作系統(tǒng) iOS 和 Android 的小紅書客戶端，以及用于輔助開發(fā)的小程序開發(fā)者工具，小紅書廣告投放小程序中三大運(yùn)行環(huán)境也是有所區(qū)別的，如表所示。

網(wǎng)頁(yè)開發(fā)者在開發(fā)網(wǎng)頁(yè)的時(shí)候，只需要使用到瀏覽器，并且搭配上一些輔助工具或者編輯器即可。小程序的開發(fā)則有所不同，需要經(jīng)過申請(qǐng)小程序帳號(hào)、安裝小程序開發(fā)者工具、配置項(xiàng)目等等過程方可完成。

全局配置

小程序根目錄下的 app.json 文件用來(lái)對(duì)小紅書小程序進(jìn)行全局配置。文件內(nèi)容為一個(gè) JSON 對(duì)象，有以下屬性：

配置項(xiàng)

pages

用于指定小程序由哪些頁(yè)面組成，每一項(xiàng)都對(duì)應(yīng)一個(gè)頁(yè)面的 路徑（含文件名） 信息。文件名不需要寫文件后綴，框架會(huì)自動(dòng)去尋找對(duì)應(yīng)位置的 .json, .js, .xhsml, .css 四個(gè)文件進(jìn)行處理。

數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面（首頁(yè)）。

小程序中新增/減少頁(yè)面，都需要對(duì) pages 數(shù)組進(jìn)行修改。

如開發(fā)目錄為：

則需要在 app.json 中寫

{"pages":["pages/index/index","pages/logs/logs"]}

window

用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

• 注 1：HexColor（十六進(jìn)制顏色值），如"#ff00ff"

如：

{"window":{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"導(dǎo)航title","backgroundColor":"#eeeeee","backgroundTextStyle":"light"}}

tabBar

如果小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面），可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。

其中 list 接受一個(gè)數(shù)組，只能配置最少 2 個(gè)、最多 5 個(gè) tab。tab 按數(shù)組的順序排序，每個(gè)項(xiàng)都是一個(gè)對(duì)象，其屬性值如下：

networkTimeout

各類網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間，單位均為毫秒。

permission

小程序接口權(quán)限相關(guān)設(shè)置。字段類型為 Object，結(jié)構(gòu)為：

PermissionObject 結(jié)構(gòu)

如：

{"pages":["pages/index/index"],"permission":{"scope.userLocation":{"desc":"你的位置信息將用于小程序位置接口的效果展示"// 高速公路行駛持續(xù)后臺(tái)定位}}}

usingComponents

在此處聲明的自定義組件視為全局自定義組件，在小程序內(nèi)的頁(yè)面或自定義組件中可以直接使用而無(wú)需再聲明。