微信小程序開發(fā)介紹微信開發(fā)者工具以及小程序框架

小編給大家分享一下微信小程序開發(fā)介紹微信開發(fā)者工具以及小程序框架，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

（一）微信開發(fā)者工具

小程序團隊推出了自己的開發(fā)工具-微信開發(fā)者工具，目前微信開發(fā)者工具任然在不斷的完善中，在開發(fā)小程序時經(jīng)常要不斷的更新。論壇上吐槽的文章也是一大堆，存在很多bug，筆者在開發(fā)過程中也是被它坑過。筆者是安卓開發(fā)者，習(xí)慣于這種可視化的編程，所以沒有選擇Webstrom或者其他開發(fā)工具，接下來將介紹微信開發(fā)者工具基本功能。

1. 機型選擇：小程序以IPhone6的屏幕尺寸為設(shè)計標準，讓UI小姐姐按照IPhone6屏幕尺寸來切圖。

2. 預(yù)覽界面：寫好視圖布局后點擊編譯，視圖界面刷新顯示

3. 遠程調(diào)試：手機端和PC端開發(fā)工具聯(lián)調(diào)（非常實用）

4. 上傳代碼：上傳到騰訊服務(wù)器，提交審核必經(jīng)步驟。可以填寫版本號和備注信息

5. 5-1：代碼體積，微信限制 2M 以內(nèi)。  5-2：ES語法轉(zhuǎn)換，開發(fā)中一般不校驗合法域名信息 。5-3：域名信息：小程序后臺要做配置服務(wù)器域名，有request 域名，socket 域名以及uploadFile和downloadFile域名。注意：域名小程序要求必須是https

6. 控制臺：打印輸出信息，方便調(diào)試

7. 資源文件：對應(yīng)項目的文件目錄，一般可以在這里進行斷點調(diào)試

8. 本地數(shù)據(jù)存儲：顯示的是本地存儲的數(shù)據(jù)，對應(yīng)的相關(guān)API是wx.setStorageSync(key,data)

9. 視圖調(diào)試：標組件以子父層級結(jié)構(gòu)呈現(xiàn)，方便調(diào)試。

以上就是在開發(fā)過程中微信開發(fā)者工具常用到的功能，微信開發(fā)者工具也在不斷的完善，為了以后更好的提升開發(fā)效率，也需要我們在開發(fā)過程中將遇到的問題不斷的反饋給小程序團隊做優(yōu)化，希望大家抱著包容的心態(tài)。開發(fā)過程中大家也可以依照自己的習(xí)慣選擇其他的開發(fā)工具。

（二）小程序框架以及目錄結(jié)構(gòu)介紹

• 邏輯層
  
  

  小程序開發(fā)框架的邏輯層由 JavaScript 編寫。邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。邏輯層對應(yīng)的是js文件，在每個頁面的js文件中，系統(tǒng)提供了一系列的方法如：頁面生命周期onLoad(),onShow(),onHide(),等，下拉刷新onPullDownRefresh()，頁面到底部（上拉加載）onReachBottom()方法，分享功能onShareAppMessage()等。

  
  

• 視圖層
  
  

  框架的視圖層由 wxml 與  wxss 編寫，由組件來進行展示。將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時將視圖層的事件發(fā)送給邏輯層。 wxml 由小程序提供的組件組成，wxss 是css 樣式。
  
  

• app文件
  
  app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。頁面的json文件一般用來配置當前頁面的窗口表現(xiàn)。app.js 用來提供全局變量，如baseUrl。app.wxss 提供全局的css樣式
  
  

  {
    "pages": [                    //頁面的路徑(在此處可快捷創(chuàng)建頁面)
      "pages/index/index",
      "pages/logs/index"
    ],
    "window": {                   //視圖窗口
      "navigationBarTitleText": "Demo"
    },
    "tabBar": {                   //底部tab
      "list": [{
        "pagePath": "pages/index/index",
        "text": "首頁"
      }, {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }]
    },
    "networkTimeout": {           //設(shè)置是否超時
      "request": 10000,
      "downloadFile": 10000
    },
    "debug": true
  }

• utils/.json
  
  系統(tǒng)提供的工具類，一般編寫公共的方法導(dǎo)出方便其他頁面調(diào)用。

以上是“微信小程序開發(fā)介紹微信開發(fā)者工具以及小程序框架”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！