c语言查单词小程序,【附源码】小程序初窥之简单查单词
新年假期百無聊賴，于是就看了一下微信小程序的開發方法，花了兩天時間入了個門，這里記錄一下。
閱讀之前，先確定你知道基本的 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语言查单词小程序,【附源码】小程序初窥之简单查单词的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网线怎么接水晶头
- 下一篇： c语言计算文件摘要值,c语言文件操作摘要