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

2017-09-21|HiShop
導(dǎo)讀:微信小程序定位確定下來,微信小程的開發(fā)是一個必須面對的問題,小程序開發(fā)需要哪些準(zhǔn)備工作?需要在什么環(huán)境下進行?微信小程序開發(fā)需要多少錢,費用是多少?都是小程序開發(fā)者必須面...

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

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

  此前只有企業(yè)賬號才能開發(fā)小程序,這其實極大地抑制了個人開發(fā)者的能力。小程序昨日正式對個人開發(fā)者開放注冊。有開發(fā)能力的個人,可以在開放的類目范圍內(nèi)實名申請注冊、開發(fā)小程序了。

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

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

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

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

  打開的時候會自動提示創(chuàng)建一個demo,demo結(jié)構(gòu)文件樹如下:

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

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

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

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

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

  App : 注冊一個小程序

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

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

  setStorageSync:設(shè)置緩存

  wx.getUserInfo: 獲取用戶信息

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

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

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

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

  其中:

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

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

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

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

  【步驟八】index.wxml 文件

  這是一個展示頁面,作用于html相同。可以看出,內(nèi)容分塊均采用 view 標(biāo)簽,這也很容易讓人想到Android 中的布局,但其實只是更多的是 div 標(biāo)簽的另一個版本,在這里面有很多 MINA 自定義的屬性,而且在我們在其中也看到了{(lán){ }}樣式的值操作,這也很容易讓人聯(lián)想到 angularJS 中的數(shù)據(jù)雙向綁定,在 MINA 中也是支持的。

  同時,頁面的展示,均需要在小程序全局的json配置文件中配置,前面已有說明。

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

  【步驟九】index.js 文件

  其中:

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

  Page : 聲明頁面。

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

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

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

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

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

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

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

  【注意事項】

  這里只是入門實例,詳細(xì)內(nèi)容可以將來會有詳細(xì)的API文檔。

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

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

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

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

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

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

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

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

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

在每一個移動端里面,都會有一些標(biāo)桿性的場景。小程序現(xiàn)在由于還沒有用戶來同時使用,如果這個平臺能火,一定是因為一些爆款。

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

推薦閱讀