【附源碼】小程序初窺之簡單查單詞

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

閱讀以前，先肯定你知道基本的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
  }
}
複製代碼

頁面內容

1. 首先咱們須要一個輸入框，從微信文檔能夠看到，咱們須要一個input控件。經過placeholder屬性添加佔位符，而後經過bindinput與輸入事件綁定，每當有輸入事件的時候，就調用wordInput函數。這裏的focus 與 confirm-type 含義你能夠查看文檔來了解。
2. 第二步咱們須要一個按鈕，點擊調用處理函數。因此這裏咱們用bindtap綁定一個btnClick函數。
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%;
}
複製代碼

編寫函數

獲取輸入框內容

以前咱們已經爲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: "" });
      }
    })
  }

})
複製代碼

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

體驗

小程序已經上架，歡迎體驗。

源碼及使用指南

源碼地址（喜歡的話請點贊）：EasyDictionary-Mini-Program

• 下載源碼
• 打開微信開發者工具，新建項目

• 選擇項目地址爲下載的文件夾

• 編譯、掃碼預覽