前言：

最近有需求，要用到小程式，在官網註冊了一個個人小程式應用。下載了開發者工具。
開啟開發者工具後，新建一個普通的微信小程式，不要選擇預設的雲程式，程式碼會增加很多，不容易讀程式碼。我們入門，還是選擇普通小程式應用，然後輸入你申請的小程式appid點選確定後就會新建一個小程式。

讀程式碼：

目錄結構：

目錄結構很簡單：pages資料夾，utils資料夾，然後就是app相關檔案。

pages資料夾：包含了app的所有頁面。

utils資料夾：包含一些小程式預設提供的方法。

app.json 是當前小程式的全域性配置，包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。

project.config.json：是針對個性化的一些設定，方便移植自己的專案，這裡可以暫不關注。

程式啟動流程：

當開啟小程式後，首先會進入app.js的onLaunch方法。這裡要說明下，一個小程式，只能有一個app例項，這裡所說的例項是指下圖中的的程式碼：

這段程式碼一般預設解除安裝app.js裡，我們不要在別的js檔案裡定義噢。

說明一下App這個例項中的幾個方法如下：

App({

  /**
   * 當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
   */
  onLaunch: function () {
    
  },

  /**
   * 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
   */
  onShow: function (options) {
    
  },

  /**
   * 當小程式從前臺進入後臺，會觸發 onHide
   */
  onHide: function () {
    
  },

  /**
   * 當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊
   */
  onError: function (msg) {
    
  }
})
 

註釋已經說的很明白了，就是在小程式執行不同時期的操作時，會呼叫上述方法。

我們接著前邊說，當小程式啟動後，後先呼叫App例項的onLanuch等方法，接著根據app.json的配置，啟動首頁（一般是pages裡的第一行）。如下圖就是啟動第一行的index頁。

當開啟首頁index後，會呼叫index.js中的onLoad()方法。這裡要說明下，每個頁面的js檔案，都需要例項Page(),Page中包含了處理該頁面的方法。預設方法如下：

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {
    
  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {
    
  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {
    
  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
 

每個方法的含義參見注釋。

頁面構成：

當你打算自己畫一個頁面，新增一些邏輯，都需要包含哪些檔案呢？參考下圖：

wxml檔案：類似android中的佈局頁面，類似web中的html頁面，就是畫布佈局的。

js檔案：類似web中的js檔案，就是針對佈局寫指令碼的。

wxss檔案：類似web中的css檔案，就是針對佈局頁面寫樣式的。

json檔案：用於配置頁面路徑、介面表現、網路超時時間、底部 tab 等

HelloWorld:

當你新建一個普通應用小程式時，系統已經幫你建立了一個helloworld程式了。在這裡我們自己重新寫一個，對程式有個最簡單的理解。

首先我們在pages資料夾右鍵選擇新建目錄helloworld,然後該資料夾右鍵，新建page命名為helloworld，如下圖：

檔案列表如下：

接著我們在helloworld.wxml中寫佈局檔案，

<text>{{text}}</text>

這裡邊的text,我們在helloworld.js中賦值。如下：

最後，我們在app.json中，把新增的這個helloworld頁面放在第一行，這樣才會預設載入為首頁。如下：

這樣，一個最簡單的helloworld程式就建立完成了。

寫一個列表：

知識基於helloworld，我們新建一個page--listdemo。

我們首先修改listdemo.wxml頁面，內容如下：

<!--pages/listdemo/listdemo.wxml-->
<view wx:for="{{list}}"> 
  <text>{{item.listName}}</text>
</view>

view：表示一個檢視區域。

wx:for:表示要迴圈遍歷一個list。

list:在listdemo.js中，要賦值的資料。

item：表示list中的一個item。

listName:在listdemo.js中，要賦值的資料。是list陣列中其中一條資料的一個欄位。

上面的程式碼表示，遍歷list陣列， <text>{{item.listName}}</text>就處於迴圈範圍內。

我們再看下listdemo.js中的程式碼。

// pages/listdemo/listdemo.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    list:[
      { listName: "listdemo1" },
      { listName: "listdemo2" },
      { listName: "listdemo3" },
      { listName: "listdemo4" },
    ]
  },

我們只需要初是list值即可。

最後看下執行效果：

這樣，一個最簡單的list列表就完成了。我們可以把listdemo.js中的資料，替換成從資料庫或api介面中獲取。

網路獲取資料：

首先，我們需要在公眾平臺的小程式設定中，配置安全域名，具體操作參見域名配置及注意事項。

如果臨時測試的話，我們可以不用設定，在開發者工具中，點選右上角的詳情，然後在下邊將下圖的勾勾上。

這樣就可以臨時使用該域名了。

筆者親測可用，每次獲取資料是隨機的；內容如下：

{"code":200,"message":"成功!","result":{"author":"葉夢得","origin":"八聲甘州·壽陽樓八公山作","category":"古詩文-人生-時光","content":"想烏衣年少，芝蘭秀髮，戈戟雲橫。"}}

根據這個介面，我們寫個佈局，如下：

<!--pages/networkdemo/networkdemo.wxml-->

  <text>作者：{{author}}\n</text>
  <text>出處：{{origin}}\n</text>
  <text>目錄：{{category}}\n</text>
  <text>內容：{{content}}</text>

然後我們在networkdemo.js檔案中將這幾個欄位賦值。具體程式碼如下：

// pages/networkdemo/networkdemo.js
Page({
  /**
   * 頁面的初始資料
   */
  data: {
    author:"",
    origin:"",
    category:"",
    content:""
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    var networkPage=this
    wx.request({
      url: 'http://api.apiopen.top/singlePoetry',
      data: '',
      header: {},
      method: 'GET',
      dataType: 'json',
      responseType: 'text',
      success: function(res) {
        if(res.data.code==200){
          var list=res.data.result
          console.log(list)
          console.log(list.author)
          console.log(list.origin)
          console.log(list.category)
          console.log(list.content)
          networkPage.setData({
            author: list.author,
            origin: list.origin,
            category: list.category,
            content: list.content,
          })

        }
      },
      fail: function(res) {},
      complete: function(res) {},
    })
 
  },


})

 大致流程如下，首先在data中初始化這幾個欄位。

然後在onLoad方法中獲取介面資料。

如果獲取成功的話，呼叫setData方法更新這幾個資料。

最後效果如下：

結尾：

以上就是微信小程式的一些基礎知識，更多資料還需要參考官方文件。