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

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

目标

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

所以最後為了簡單起見，界面的最終形态就是這樣：

文(wén)件結構

小程序裡的最主要的文(wén)件有四種： .js .json .wxml .wxss

簡單理解就是：

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

由此，這個(gè)迷你(nǐ)項目的項目結構就如(rú)下(xià)圖所示：

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

開始編碼

基本設置

首先，我們要告訴小程序有哪些頁面。 其次，需要設置小程序的導航欄标題，因為隻有一頁，所以隻需要設置這一頁的内容就可(kě)以了，所以統一寫在 app.json 裡，當然，你(nǐ)也可(kě)以新建一個(gè) index.json 。

// app.json

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

頁面内容

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

由此，我們得到了如(rú)下(xià)代碼

<!-- index.wxml -->

<view class="section">
  <input placeholder="請輸入英文(wén)單詞" 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>

頁面樣式

這個(gè)不多說了，大家都能看懂

/* 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%;
}

編寫函數

獲取輸入框内容

之前我們已經為 bindinput 這個(gè)輸入事件綁定了 wordInput 函數，現在就來實現它。這個(gè)函數的目标是捕捉輸入的内容，并保存下(xià)來。

在 index.js 裡，我們寫下(xià)第一個(gè)函數，先注冊一個(gè)變量，然後通(tōng)過函數賦值。

// index.js

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

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

網絡請求

根據api文(wén)檔，我們要先寫兩個(gè)網絡請求函數，發送待翻譯的信息，接收結果。這次在 app.js裡寫這個(gè)函數，這樣未來如(rú)果有需要可(kě)以複用。這裡的參數 cb 是一個(gè)函數，用于接收返回值。

// 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);
      }
    })
  }
})

按鈕點擊事件

上面我們已經說過，我們為按鈕點擊事件綁定了一個(gè) btnClick 函數，這個(gè)函數将負責調用 app.js 裡的兩個(gè)請求函數，獲取返回值，在頁面上顯示内容。這裡要注意的是，因為請求函數位置問(wèn)題，所以要寫 var app= getApp() 和(hé) var thispage = this 。

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

于是我們的 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: "查詢不到這個(gè)單詞" });
        thispage.setData({ sentext: "" });
      }
    })
  }

})

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