新年假期百無聊賴，于是就看了一下微信小程序的開發(fā)方法，花了兩天時間入了個門，這里記錄一下。

閱讀之前，先確定你知道基本的 html+css+js 語法，這樣就能更好地和我一樣，以一個新手的視角來理解小程序。

目標

目標是編寫一個查單詞的小程序，很明顯需要一個輸入框（如果有一個placehoder就更好了），然后再加上一個按鈕，點擊之后如果成功就顯示結果，如果失敗就提示失敗。查詞api使用扇貝api。

所以最后為了簡單起見，界面的最終形態(tài)就是這樣：

文件結構

小程序里的最主要的文件有四種： .js .json .wxml .wxss

簡單理解就是：

• .js 用于控制頁面邏輯。
• .json 用于頁面配置，不必須，也可以全局配置，但是頁面配置權重高于全局配置。
• .wxml 類似于 .html ,用于設置頁面內(nèi)容
• .wxss 類似于 .css ，用于設置頁面樣式，不必須，代碼也可以直接寫在 .wxml 內(nèi)

由此，這個迷你項目的項目結構就如下圖所示：

唯一的頁面是 index ， app.js app.json project.config.json 應用于全局。

開始編碼

基本設置

首先，我們要告訴小程序有哪些頁面。 其次，需要設置小程序的導航欄標題，因為只有一頁，所以只需要設置這一頁的內(nèi)容就可以了，所以統(tǒng)一寫在 app.json 里，當然，你也可以新建一個 index.json 。

// app.json

{
  "pages": [
    "src/pages/index/index"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "簡單查單詞",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  }
}

頁面內(nèi)容

1. 首先我們需要一個輸入框，從微信文檔可以看到，我們需要一個 input 控件。通過 placeholder 屬性添加占位符，然后通過 bindinput 與輸入事件綁定，每當有輸入事件的時候，就調(diào)用 wordInput 函數(shù)。這里的 focus 與 confirm-type 含義你可以查看文檔來了解。
2. 第二步我們需要一個按鈕，點擊調(diào)用處理函數(shù)。所以這里我們用 bindtap 綁定一個 btnClick 函數(shù)。
3. 最后我們需要顯示翻譯和例句，使用 {{}} 來綁定變量，此處的控件為 text ，它的具體的使用可以看這里

由此，我們得到了如下代碼

<!-- index.wxml -->

<view class="section">
  <input placeholder="請輸入英文單詞" bindinput='wordInput' focus="true" confirm-type="done"/>
  <button type='primary' bindtap='btnClick'>查詢</button>
</view>
<view class="textView">
  <text>{{text}}</text>
</view>
<view class="senView">
  <text >{{sentext}}</text>
</view>

頁面樣式

這個不多說了，大家都能看懂

/* index.wxss */

input{
  border: 1px solid grey;
  margin: 5%;
  padding: 5px;
  border-radius:3px;
}
button{
  /* width: 80%; */
  margin: 5%;
}
.textView{
  margin: 5%;
}.senView{
 margin: 5%;
}

編寫函數(shù)

獲取輸入框內(nèi)容

之前我們已經(jīng)為 bindinput 這個輸入事件綁定了 wordInput 函數(shù)，現(xiàn)在就來實現(xiàn)它。這個函數(shù)的目標是捕捉輸入的內(nèi)容，并保存下來。

在 index.js 里，我們寫下第一個函數(shù)，先注冊一個變量，然后通過函數(shù)賦值。

// index.js

Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    text:"",
    sentext:"",
    checkWord:null
  },
  wordInput: function(e){
    console.log(e);
    this.setData({checkWord:e.detail.value});
  }
})

由此，我們將每一次輸入結果實時地保存了起來。

網(wǎng)絡請求

根據(jù)api文檔，我們要先寫兩個網(wǎng)絡請求函數(shù)，發(fā)送待翻譯的信息，接收結果。這次在 app.js里寫這個函數(shù)，這樣未來如果有需要可以復用。這里的參數(shù) cb 是一個函數(shù)，用于接收返回值。

// app.js

App({
  getInfo: function (words,cb){
    const requestTask = wx.request({
      url: 'https://api.shanbay.com/bdc/search/',
      data: {
        word: words
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        cb(res.data);
      }
    })
  },
  getSen: function (wordsid,cb){
    const requestTask = wx.request({
      url: 'https://api.shanbay.com/bdc/example/',
      data: {
        vocabulary_id: wordsid,
        "type": "sys"
      },
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        cb(res.data);
      }
    })
  }
})

按鈕點擊事件

上面我們已經(jīng)說過，我們?yōu)榘粹o點擊事件綁定了一個 btnClick 函數(shù)，這個函數(shù)將負責調(diào)用 app.js 里的兩個請求函數(shù)，獲取返回值，在頁面上顯示內(nèi)容。這里要注意的是，因為請求函數(shù)位置問題，所以要寫 var app= getApp() 和 var thispage = this 。

通過api返回示例，我們看到：在查詢單詞意思時，需要發(fā)送英文翻譯 word ，得到返回值中的 data->cn_definition->defn 和 data->id ；在查詢例句時，需要發(fā)送上面獲得的 id ，得到返回值中的 data->annotation 和 data->translation 。在這里值得注意的是，例句部分，扇貝在對應單詞處加了 <vocab></vocab> 標簽，這里可以用正則去掉。

于是我們的 index.js 就變成了：

// index.js

var app= getApp();

Page({
  data: {
    text:"",
    sentext:"",
    checkWord:null
  },
  wordInput: function(e){
    console.log(e);
    this.setData({checkWord:e.detail.value});
  },
  btnClick: function (){
    var thispage = this;
    app.getInfo(this.data.checkWord,function (data){
      if (data.data.cn_definition){
        console.log(data.data.id);
        thispage.setData({ text: data.data.cn_definition.defn });
        app.getSen(data.data.id,function (data){
          var sen = (data.data)[0].annotation;
          sen = sen.replace(/<[^>]+>/g, "");
          var tran = (data.data)[0].translation;
          var showText = "例句:"+"\n"+sen+"\n"+tran;
          thispage.setData({ sentext: showText});
          console.log(sen);
        })
      }else{
        thispage.setData({ text: "查詢不到這個單詞" });
        thispage.setData({ sentext: "" });
      }
    })
  }

})

這樣，我們就完成了整個小程序的編碼工作。