微信小程式開發之註冊和預覽小程式詳解

本教學旨在為想學習小程式的同學提供一個快速上手的教程，如果你之前接觸過react.js或vue.js之類的前端框架，相信你很快就能學會小程式的開發。如果沒有接觸過，也不要有畏難心理，本教學主要面向的就是初學者，所以會盡量寫的詳細一點。相信跟我一起走完教程，一定可以學會小程式的開發。

本教學分為三個部分：

第一部：理論篇

#這部分介紹微信小程式開發所涉及的基礎知識，讓你對小程式的開發有一個整體的概念。

第二部分：實戰篇

將帶領讀者朋友們和我一起開發一個真正的小程序，和我一起享受編程的樂趣。

第三部分：附錄

一些額外的內容將在附錄中說明。

在學習過程中，如果你有任何疑惑，請追蹤我的微信公眾號，直接提問即可。

建置開發環境

• #下載最新版微信小程式開發工具: 
#下載最新版微信小程式開發工具: 
• 下載頁面
• 選擇適合你係統的版本來安裝，目前支援windows32,windows64以及mac系統
• #安裝完成之後，開啟微信web開發者工具，然後用手機微信掃碼登陸。

選擇新增項目，可以看到，要新增一個新的小程式項目需要填寫三部分內容：AppID，專案名稱，專案目錄。

在這裡，為了能快速開發，我們先選擇 無AppID 這個選項，更多關於AppID的內容，可以到附錄中查看。這裡不再贅述。

專案名稱，就是你給你的專案取一個名字。

專案目錄，是指你的小程式的程式碼會放在哪個目錄下，你可以自己在本地建立一個資料夾，也可以在github建立一個新項目，都可以。這裡為了簡單，我直接在桌面上新建了一個資料夾。

注意，填好資訊之後，工具會預設勾選在目前目錄中建立quick start專案這個選項，我們使用預設的就好，不需改動。 ###############如果一切順利，點擊新增專案後，你應該可以看到下面這張圖所示的內容。 ######

至此，開發小程式的環境已經建置完成，本節內容也到此結束，下節我們將介紹如何設定小程式！

設定小程式

#這一節，我們將介紹小程式的設定。首先，讓我們來看看專案自動產生的app.json檔案長什麼樣子。

其實這裡，共有五個部分可以配置，分別是pages, window, tarBar, networkTimeout和debug

#pages：定義的是這個小程式由哪些頁面組成。

在以後需要新增或減少頁面時，都需要在這裡進行設置，有幾個頁面pages數組就有幾項。

可以看到pages是一個數組，而數組的第一項就是小程式的初始頁面，你可以試著把logs 頁面移到最前面看看效果，這在開發的時候是一個不錯的小技巧。

還有一個技巧要分享給你的是，在我們需要添加一個新頁面的時候，沒必要傻傻的手動去創建資料夾，然後新建xxx.josn, xxx.js, xxx.wxml, xxx.wxss這四個檔。我們只要在 pages數組中 新增一個你想建立的頁面，然後 Ctrl + s 儲存即可！是不是很酷？

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

window: 定義的是視窗的設定資訊。 [td]

#

{
  "tabBar": {
          "backgroundColor": "#fbfbfb",
          "borderStyle": "white",
          "selectedColor":"#50e3c2",
          "color": "#aaa",
          "list": [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/home.png",
            "selectedIconPath": "images/homeHL.png"
          },{
            "pagePath": "pages/me/me",
            "text": "我",
            "iconPath": "images/me.png",
            "selectedIconPath": "images/meHL.png"
          }]
        }
}

networkTimeout: 用來設定各種網路請求的逾時時間。

如果你不是很清楚這個networkTimeout配置有什麼作用，那就忽略就好。這對實際開發並沒有什麼影響。

[td]

#以下程式碼僅為範例

{
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 5000,
    "uploadFile": 5000,
    "downloadFile": 5000
  },
  "debug": true
}

debug

可以在開發者工具中開啟debug 模式，在開發者工具的控制檯面板，偵錯訊息以info的形式給出，其資訊有Page 的註冊，頁面路由，資料更新，事件觸發。 可以幫助開發者快速定位一些常見的問題。

如果开启 debug 模式见上面代码

好了，五个部分介绍完了，希望各位在学习完这一节后可以尽情探索，修改各种配置看看效果，毕竟这样印象会更加深刻。

下一节我们将讲到小程序的项目结构。

项目结构

pages

这个文件夹用来存放小程序的页面，可以看到，其中的每个文件夹就表示一个页面，比如，要定义index的页面如何表现，就在index文件夹中的四个文件中定义。

一个页面由四个文件组成，分别是 xxx.js, xxx.json, xxx.wxml, xxx.wxss

• xxx.js 将在下小节讲到，因为这里涉及到的内容比较多，需要单独列出一节来讲。
• xxx.json 和 app.json 类似，app.json是整个微信小程序的配置文件，而xxx.json是xxx这单个页面的配置文件。

比如，logs.json 文件就配置了logs这个页面的 导航栏的标题～

{
    "navigationBarTitleText": "查看启动日志"
}

注意：json 文件中不能有任何注释，不然会报错。

• xxx.wxml 可以把它看成是 html 的變種，同樣是xml的語法。
• xxx.wxss 則可以看成是 css 。

這裡需要理解的就是，小程式的開發 其實就是用開發網頁的技術來開發，這大大節省了我們前端人員的學習成本。但同時也要注意，這貨並不是HTML5，雖然它很像，開發過程中會遇到很多坑。

utils

這個資料夾中的utils.js主要用來定義一些公用的函數。

我們也可以在裡面新建一個 api.js 檔案來抽象化我們伺服器的位址。

app.js

這部分內容同樣放在下一節一起講！

app.json

#這個檔案的作用我們在上一節已經講過了，是整個小程式的設定檔。

app.wxss

#這裡定義的是整個小程式的樣式表

页面生命周期

终于到了小程序最核心，最关键的部分了，这也是我们理论篇的最后一节，那么我们开始吧！

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  globalData: 'I am global data'
})

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

此时，相信你对小程序开发的理论知识已经有一定了解了。

如果觉得比较模糊，第二部分的实战篇就是为了让我们能够结合理论来进行实践。

如果你比较自信，你也可以直接看这个实战项目的源代码。

以上是微信小程式開發之註冊和預覽小程式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！