微信小程序開(kāi)發(fā)前準(zhǔn)備工作與環(huán)境流程

        微信小程序定位確定下來(lái)，微信小程開(kāi)發(fā)是一個(gè)必須面對(duì)的問(wèn)題，小程序開(kāi)發(fā)需要哪些準(zhǔn)備工作？需要在什么環(huán)境下進(jìn)行？微信小程序開(kāi)發(fā)需要多少錢(qián)，費(fèi)用是多少？都是小程序開(kāi)發(fā)者必須面對(duì)的問(wèn)題，小程序開(kāi)發(fā)流程是怎樣？騰訊云布道師賀嘉詳細(xì)講解了騰訊對(duì)于小程序的定位，以及開(kāi)發(fā)者們?nèi)绾胃玫氖褂眯〕绦颉?/p>

　　一、小程序開(kāi)發(fā)門(mén)檻降低 面向個(gè)人開(kāi)發(fā)者開(kāi)放【機(jī)遇——人人都可以是產(chǎn)品經(jīng)理】

　　此前只有企業(yè)賬號(hào)才能開(kāi)發(fā)小程序，這其實(shí)極大地抑制了個(gè)人開(kāi)發(fā)者的能力。小程序昨日正式對(duì)個(gè)人開(kāi)發(fā)者開(kāi)放注冊(cè)。有開(kāi)發(fā)能力的個(gè)人，可以在開(kāi)放的類目范圍內(nèi)實(shí)名申請(qǐng)注冊(cè)、開(kāi)發(fā)小程序了。

　　二、微信小程序開(kāi)發(fā)前準(zhǔn)備工作與環(huán)境流程

　　【步驟一】當(dāng)你準(zhǔn)備開(kāi)發(fā)一個(gè)微信小程序的時(shí)候，你首先需要一個(gè)小程序的 APPId ，在微信公眾號(hào)官網(wǎng)可以獲得。(暫時(shí)只有官方邀請(qǐng)的才可以獲得)。

　　你還需要準(zhǔn)備微信開(kāi)發(fā)者工具，官網(wǎng)同樣有下載，下載安裝即可，支持windows，linux，和MAC平臺(tái)。

　　【步驟二】小程序使用的微信自己開(kāi)發(fā) MINA 框架,提供了視圖層描述語(yǔ)言，WXML 和 WXSS 以及基于JavaScript的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開(kāi)發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。

　　打開(kāi)的時(shí)候會(huì)自動(dòng)提示創(chuàng)建一個(gè)demo，demo結(jié)構(gòu)文件樹(shù)如下：

　　【步驟三】其中app.js、app.json、app.wxss 是必不可少的，是小程序生成的依賴文件。

　　app.js 監(jiān)聽(tīng)并控制這整個(gè)程序的生命周期，也是全局變量聲明的地方。如下是 app.js 中的一段代碼：

　　【步驟四】上述代碼中的一些 API 介紹：

　　App : 注冊(cè)一個(gè)小程序

　　onLunch :程序加載時(shí)執(zhí)行的方法

　　getStorageSync：以同步的方式獲取本地緩存

　　setStorageSync：設(shè)置緩存

　　wx.getUserInfo: 獲取用戶信息

　　【步驟五】app.json 是對(duì)整個(gè)小程序的全局配置。不可注釋。

　　pages為注冊(cè)頁(yè)面的列表，均為相對(duì)路徑，省去了后綴名，程序默認(rèn)顯示列表第一個(gè)。

　　【步驟六】app.wxss 是整個(gè)小程序的公共樣式表。

　　其中：

　　apx 是尺寸單位，可根據(jù)屏幕寬度自適應(yīng)大小。與之對(duì)應(yīng)的有rem：規(guī)定屏幕寬度為20rem;1rem = (750/20)rpx 。

　　【步驟七】全局文件就這些，然后我們看 index 文件中的內(nèi)容

　　有三部分內(nèi)容，index.js ,index.wxml ,index.wxss,下面介紹它們的作用。

　　【步驟八】index.wxml 文件

　　這是一個(gè)展示頁(yè)面，作用于html相同?？梢钥闯觯瑑?nèi)容分塊均采用 view 標(biāo)簽，這也很容易讓人想到Android 中的布局，但其實(shí)只是更多的是 div 標(biāo)簽的另一個(gè)版本，在這里面有很多 MINA 自定義的屬性，而且在我們?cè)谄渲幸部吹搅藍(lán){ }}樣式的值操作，這也很容易讓人聯(lián)想到 angularJS 中的數(shù)據(jù)雙向綁定，在 MINA 中也是支持的。

　　同時(shí)，頁(yè)面的展示，均需要在小程序全局的json配置文件中配置，前面已有說(shuō)明。

　　【步驟九】index.js 文件

　　其中：

　　getApp() 獲取應(yīng)用實(shí)例

　　Page ： 聲明頁(yè)面。

　　data: 定義數(shù)據(jù)

　　bindViewTap ：為在view中綁定的是tap事件定義操作方法。

　　wx.navigateTo ：導(dǎo)航到響應(yīng)頁(yè)面。

　　onLoad ： 定義頁(yè)面加載時(shí)的事件。在這里使用了在全局 app.js 中定義的回調(diào)函數(shù)，將data中的數(shù)據(jù)更新，由于雙向的綁定，頁(yè)面中的 userInfo 實(shí)例也會(huì)更新，顯示出您的頭像和昵稱。

　　【步驟十】index.wxss 中同樣定義了一些樣式，寫(xiě)法思路與css文件基本一致，只是不需要再去關(guān)心屏幕適配問(wèn)題。

　　隨后就是效果展示了，在開(kāi)發(fā)者工具中掃碼即可查看效果。

　　【注意事項(xiàng)】

　　這里只是入門(mén)實(shí)例，詳細(xì)內(nèi)容可以將來(lái)會(huì)有詳細(xì)的API文檔。

　　微信小程序處于內(nèi)測(cè)階段，開(kāi)發(fā)的詳情處于保密因素不會(huì)對(duì)外界透露，期待后期更新

　　三、以下是經(jīng)韋物主義整理的演講精華：

在每一個(gè)移動(dòng)端里面，都會(huì)有一些標(biāo)桿性的場(chǎng)景。小程序現(xiàn)在由于還沒(méi)有用戶來(lái)同時(shí)使用，如果這個(gè)平臺(tái)能火，一定是因?yàn)橐恍┍睢?/p>

從這個(gè)層面來(lái)看，小程序在一些系統(tǒng)的接口給我們提供了更多的可能性，包括網(wǎng)絡(luò)設(shè)備狀況、重力感應(yīng)、社交等等，提供了更多的接口。hishop看來(lái)騰訊云給小程序提供了更多的接口，讓更多的開(kāi)發(fā)者和我們一起，用騰訊云和小程序給用戶一些能力，讓小程序的開(kāi)發(fā)變得更加簡(jiǎn)單。相信大家閱讀完上面內(nèi)容對(duì)于小程序開(kāi)發(fā)需要哪些準(zhǔn)備工作？需要在什么環(huán)境下進(jìn)行？微信小程序開(kāi)發(fā)需要多少錢(qián)，費(fèi)用是多少？都是小程序開(kāi)發(fā)者必須面對(duì)的問(wèn)題，小程序開(kāi)發(fā)流程是怎樣？以上問(wèn)題都應(yīng)該有所解答了！