微信小程序說到引爆2017的前端話題，“微信小程序”當(dāng)之無愧。微信小程序有著可以不需要下載安裝、可以快捷傳播和獲取、出色使用體驗(yàn)的特點(diǎn)，被騰訊寄于連接用戶與服務(wù)，實(shí)現(xiàn)應(yīng)用“觸手可及”的夢想的希望。
從技術(shù)的角度看，其本質(zhì)是一款基于微信的web離線包，微信開放平臺提供了各式各樣的動(dòng)畫和API，使得小程序的界面和過渡動(dòng)畫也更加美觀、原生。用戶在小程序里即用即走，不用考慮內(nèi)存，硬件容量等問題，適合廣大低頻APP。上海茂鴻網(wǎng)絡(luò)帶大家走進(jìn)小程序。
第一、小程序的技術(shù)棧
我們已經(jīng)了解了小程序的產(chǎn)品定位，再看看小程序技術(shù)層面的問題。為了開發(fā)小程序，小程序?qū)V大開發(fā)者提供了WXML，WXSS和高度封裝的WXAPI。WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。WXSS（WeiXin Style Sheets）是一套樣式語言，用于描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。WXAPI是微信原生 API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。同時(shí)，框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。
什么是基礎(chǔ)組件？組件是視圖層的基本組成單元。組件自帶一些功能與微信風(fēng)格的樣式。一個(gè)組件通常包括開始標(biāo)簽和結(jié)束標(biāo)簽，屬性用來修飾這個(gè)組件，內(nèi)容在兩個(gè)標(biāo)簽之內(nèi)。
比如說微信提供了視圖容器，可滾動(dòng)視圖區(qū)域，滑塊視圖容器，將原本開發(fā)者熟悉的HTML標(biāo)簽做了封裝，直接用標(biāo)簽可以實(shí)現(xiàn)以前需要引入插件才能實(shí)現(xiàn)的滾動(dòng)或滑塊功能。這類高度封裝的標(biāo)簽還有滾動(dòng)選擇器，可以用一個(gè)標(biāo)簽實(shí)現(xiàn)普通選擇器，時(shí)間選擇器，日期選擇器。可謂是十分的方便快捷。
在JS封裝方面，由于框架并非運(yùn)行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。微信的技術(shù)架構(gòu)讓我們不再需要直接調(diào)用這些習(xí)以為常的瀏覽器對象，用他們的一套技術(shù)方案就可以方便快捷的實(shí)現(xiàn)原本復(fù)雜的邏輯。他們將所有的瀏覽器對象隱藏，只對開發(fā)者提供一個(gè)名為wx的對象，提供了全面的諸如網(wǎng)絡(luò)、媒體播放、文件上傳、數(shù)據(jù)緩存、位置、設(shè)備信息、界面交互、登錄、支付、模版消息等能力。沒有了cookie的使用，本地緩存相關(guān)只能用wx.setStorage（wx.setStorageSync）等api可以對本地緩存進(jìn)行設(shè)置、獲取和清理。本地緩存最大為10MB。且 localStorage 是永久存儲的。
第二、微信小程序的開發(fā)設(shè)置
對于小程序開發(fā)者，首先要做的是拿到管理員帳號，添加開發(fā)者白名單。然后在開發(fā)設(shè)置頁面查看AppID和AppSecret，配置服務(wù)器域名。第三步下載開發(fā)者工具進(jìn)行代碼的開發(fā)和上傳。微信小程序開發(fā)工具，嚴(yán)格規(guī)范開發(fā)者，每一步都需要掃碼驗(yàn)證。同時(shí)小程序只支持https請求。
