小紅書廣告投放小程序簡介

小程序是一種新形式的應用程序，本文主要介紹了開發小程序與開發傳統 Web 項目時的區別。

小程序與普通網頁開發的區別

小程序的主要開發語言是 JavaScript ，小程序的開發同普通的網頁開發相比有很大的相似性。對于前端開發者而言，從網頁開發遷移到小程序的開發成本并不高，但是二者還是有些許區別的。

網頁開發渲染線程和腳本線程是互斥的，這也是為什么長時間的腳本運行可能會導致頁面失去響應，而在小程序中，二者是分開的，分別運行在不同的線程中。網頁開發者可以使用到各種瀏覽器暴露出來的 DOM API，進行 DOM 選中和操作。而如上文所述，小程序的邏輯層和渲染層是分開的，邏輯層運行在 JSCore 中，并沒有一個完整瀏覽器對象，因而缺少相關的DOM API和BOM API。這一區別導致了前端開發非常熟悉的一些庫，例如 jQuery、 Zepto 等，在小程序中是無法運行的。同時 JSCore 的環境同 NodeJS 環境也是不盡相同，所以一些 NPM 的包在小程序中也是無法運行的。

網頁開發者需要面對的環境是各式各樣的瀏覽器，PC 端需要面對 IE、Chrome、QQ瀏覽器等，在移動端需要面對Safari、Chrome以及 iOS、Android 系統中的各式 WebView 。而小程序開發過程中需要面對的是兩大操作系統 iOS 和 Android 的小紅書客戶端，以及用于輔助開發的小程序開發者工具，小紅書廣告投放小程序中三大運行環境也是有所區別的，如表所示。

網頁開發者在開發網頁的時候，只需要使用到瀏覽器，并且搭配上一些輔助工具或者編輯器即可。小程序的開發則有所不同，需要經過申請小程序帳號、安裝小程序開發者工具、配置項目等等過程方可完成。

全局配置

小程序根目錄下的 app.json 文件用來對小紅書小程序進行全局配置。文件內容為一個 JSON 對象，有以下屬性：

配置項

pages

用于指定小程序由哪些頁面組成，每一項都對應一個頁面的 路徑（含文件名） 信息。文件名不需要寫文件后綴，框架會自動去尋找對應位置的 .json, .js, .xhsml, .css 四個文件進行處理。

數組的第一項代表小程序的初始頁面（首頁）。

小程序中新增/減少頁面，都需要對 pages 數組進行修改。

如開發目錄為：

則需要在 app.json 中寫

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

window

用于設置小程序的狀態欄、導航條、標題、窗口背景色。

• 注 1：HexColor（十六進制顏色值），如"#ff00ff"

如：

{"window":{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"導航title","backgroundColor":"#eeeeee","backgroundTextStyle":"light"}}

tabBar

如果小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面。

其中 list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。tab 按數組的順序排序，每個項都是一個對象，其屬性值如下：

networkTimeout

各類網絡請求的超時時間，單位均為毫秒。

permission

小程序接口權限相關設置。字段類型為 Object，結構為：

PermissionObject 結構

如：

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

usingComponents

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