c语言查单词小程序,【附源码】小程序初窥之简单查单词
新年假期百無聊賴，于是就看了一下微信小程序的開發(fā)方法，花了兩天時(shí)間入了個(gè)門，這里記錄一下。
閱讀之前，先確定你知道基本的 html+css+js 語(yǔ)法，這樣就能更好地和我一樣，以一個(gè)新手的視角來理解小程序。
目標(biāo)
目標(biāo)是編寫一個(gè)查單詞的小程序，很明顯需要一個(gè)輸入框(如果有一個(gè)placehoder就更好了)，然后再加上一個(gè)按鈕，點(diǎn)擊之后如果成功就顯示結(jié)果，如果失敗就提示失敗。查詞api使用扇貝api。
所以最后為了簡(jiǎn)單起見，界面的最終形態(tài)就是這樣：
文件結(jié)構(gòu)
小程序里的最主要的文件有四種： .js .json .wxml .wxss
簡(jiǎn)單理解就是：
.js 用于控制頁(yè)面邏輯。
.json 用于頁(yè)面配置，不必須，也可以全局配置，但是頁(yè)面配置權(quán)重高于全局配置。
.wxml 類似于 .html ,用于設(shè)置頁(yè)面內(nèi)容
.wxss 類似于 .css ，用于設(shè)置頁(yè)面樣式，不必須，代碼也可以直接寫在 .wxml 內(nèi)
由此，這個(gè)迷你項(xiàng)目的項(xiàng)目結(jié)構(gòu)就如下圖所示：
唯一的頁(yè)面是 index ， app.js app.json project.config.json 應(yīng)用于全局。
開始編碼
基本設(shè)置
首先，我們要告訴小程序有哪些頁(yè)面。 其次，需要設(shè)置小程序的導(dǎo)航欄標(biāo)題，因?yàn)橹挥幸豁?yè)，所以只需要設(shè)置這一頁(yè)的內(nèi)容就可以了，所以統(tǒng)一寫在 app.json 里，當(dāng)然，你也可以新建一個(gè) index.json 。
// app.json
{
"pages": [
"src/pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "簡(jiǎn)單查單詞",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
}
}
復(fù)制代碼
頁(yè)面內(nèi)容
首先我們需要一個(gè)輸入框，從微信文檔可以看到，我們需要一個(gè) input 控件。通過 placeholder 屬性添加占位符，然后通過 bindinput 與輸入事件綁定，每當(dāng)有輸入事件的時(shí)候，就調(diào)用 wordInput 函數(shù)。這里的 focus 與 confirm-type 含義你可以查看文檔來了解。
第二步我們需要一個(gè)按鈕，點(diǎn)擊調(diào)用處理函數(shù)。所以這里我們用 bindtap 綁定一個(gè) btnClick 函數(shù)。
最后我們需要顯示翻譯和例句，使用 {{}} 來綁定變量，此處的控件為 text ，它的具體的使用可以看這里
由此，我們得到了如下代碼
查詢
{{text}}
{{sentext}}
復(fù)制代碼
頁(yè)面樣式
這個(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%;
}
復(fù)制代碼
編寫函數(shù)
獲取輸入框內(nèi)容
之前我們已經(jīng)為 bindinput 這個(gè)輸入事件綁定了 wordInput 函數(shù)，現(xiàn)在就來實(shí)現(xiàn)它。這個(gè)函數(shù)的目標(biāo)是捕捉輸入的內(nèi)容，并保存下來。
在 index.js 里，我們寫下第一個(gè)函數(shù)，先注冊(cè)一個(gè)變量，然后通過函數(shù)賦值。
// index.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
text:"",
sentext:"",
checkWord:null
},
wordInput: function(e){
console.log(e);
this.setData({checkWord:e.detail.value});
}
})
復(fù)制代碼
由此，我們將每一次輸入結(jié)果實(shí)時(shí)地保存了起來。
網(wǎng)絡(luò)請(qǐng)求
根據(jù)api文檔，我們要先寫兩個(gè)網(wǎng)絡(luò)請(qǐng)求函數(shù)，發(fā)送待翻譯的信息，接收結(jié)果。這次在 app.js里寫這個(gè)函數(shù)，這樣未來如果有需要可以復(fù)用。這里的參數(shù) cb 是一個(gè)函數(shù)，用于接收返回值。
// 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);
}
})
}
})
復(fù)制代碼
按鈕點(diǎn)擊事件
上面我們已經(jīng)說過，我們?yōu)榘粹o點(diǎn)擊事件綁定了一個(gè) btnClick 函數(shù)，這個(gè)函數(shù)將負(fù)責(zé)調(diào)用 app.js 里的兩個(gè)請(qǐng)求函數(shù)，獲取返回值，在頁(yè)面上顯示內(nèi)容。這里要注意的是，因?yàn)檎?qǐng)求函數(shù)位置問題，所以要寫 var app= getApp() 和 var thispage = this 。
通過api返回示例，我們看到：在查詢單詞意思時(shí)，需要發(fā)送英文翻譯 word ，得到返回值中的 data->cn_definition->defn 和 data->id ；在查詢例句時(shí)，需要發(fā)送上面獲得的 id ，得到返回值中的 data->annotation 和 data->translation 。在這里值得注意的是，例句部分，扇貝在對(duì)應(yīng)單詞處加了
標(biāo)簽，這里可以用正則去掉。
于是我們的 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: "" });
}
})
}
})
復(fù)制代碼
這樣，我們就完成了整個(gè)小程序的編碼工作。
原文作者：PTHFLY
聲明：本文來源于網(wǎng)絡(luò)，版權(quán)歸作者所有，不代表本專欄觀點(diǎn)，有什么問題請(qǐng)聯(lián)系我，謝謝！
總結(jié)
以上是生活随笔為你收集整理的c语言查单词小程序,【附源码】小程序初窥之简单查单词的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网线怎么接水晶头
- 下一篇： c语言计算文件摘要值,c语言文件操作摘要