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

閱讀之前，先確定你知道基本的 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 ，它的具體的使用可以看這里

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

查詢

{{text}}

{{sentext}}

復制代碼

頁面樣式

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

/* 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 。在這里值得注意的是，例句部分，扇貝在對應單詞處加了

標簽，這里可以用正則去掉。

于是我們的 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: "" });

}

})

}

})

復制代碼

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

原文作者：PTHFLY

聲明：本文來源于網絡，版權歸作者所有，不代表本專欄觀點，有什么問題請聯系我，謝謝！

總結

以上是生活随笔為你收集整理的c语言查单词小程序,【附源码】小程序初窥之简单查单词的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。