【附原始碼】小程式初窺之簡單查單詞

PTHFLY發表於2018-02-18

原始碼

新年假期百無聊賴，於是就看了一下微信小程式的開發方法，花了兩天時間入了個門，這裡記錄一下。

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

目標

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

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

檔案結構

小程式裡的最主要的檔案有四種：.js .json .wxml .wxss

簡單理解就是：

.js 用於控制頁面邏輯。
.json 用於頁面配置，不必須，也可以全域性配置，但是頁面配置權重高於全域性配置。
.wxml 類似於.html,用於設定頁面內容
.wxss 類似於.css，用於設定頁面樣式，不必須，程式碼也可以直接寫在.wxml內

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

唯一的頁面是index，app.js app.json project.config.json 應用於全域性。

開始編碼

基本設定

首先，我們要告訴小程式有哪些頁面。其次，需要設定小程式的導航欄標題，因為只有一頁，所以只需要設定這一頁的內容就可以了，所以統一寫在app.json裡，當然，你也可以新建一個index.json。

// app.json

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

頁面內容

首先我們需要一個輸入框，從微信文件可以看到，我們需要一個input控制元件。通過placeholder屬性新增佔位符，然後通過bindinput與輸入事件繫結，每當有輸入事件的時候，就呼叫wordInput函式。這裡的focus 與 confirm-type 含義你可以檢視文件來了解。
第二步我們需要一個按鈕，點選呼叫處理函式。所以這裡我們用bindtap繫結一個btnClick函式。
最後我們需要顯示翻譯和例句，使用{{}}來繫結變數，此處的控制元件為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%;
}
複製程式碼

編寫函式

獲取輸入框內容

之前我們已經為bindinput這個輸入事件繫結了wordInput函式，現在就來實現它。這個函式的目標是捕捉輸入的內容，並儲存下來。

在index.js裡，我們寫下第一個函式，先註冊一個變數，然後通過函式賦值。

// index.js

Page({
  /**
   * 頁面的初始資料
   */
  data: {
    text:"",
    sentext:"",
    checkWord:null
  },
  wordInput: function(e){
    console.log(e);
    this.setData({checkWord:e.detail.value});
  }
})
複製程式碼

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

網路請求

根據api文件，我們要先寫兩個網路請求函式，傳送待翻譯的資訊，接收結果。這次在app.js裡寫這個函式，這樣未來如果有需要可以複用。這裡的引數cb是一個函式，用於接收返回值。

// 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);
      }
    })
  }
})
複製程式碼

按鈕點選事件

上面我們已經說過，我們為按鈕點選事件繫結了一個btnClick函式，這個函式將負責呼叫app.js裡的兩個請求函式，獲取返回值，在頁面上顯示內容。這裡要注意的是，因為請求函式位置問題，所以要寫var app= getApp() 和 var thispage = this。

通過api返回示例，我們看到：在查詢單詞意思時，需要傳送英文翻譯word，得到返回值中的 data->cn_definition->defn 和 data->id；在查詢例句時，需要傳送上面獲得的 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: "" });
      }
    })
  }

})
複製程式碼