新年假期百无聊赖，于是就看了一下微信小程序的开发方法，花了两天时间入了个门，这里记录一下。
阅读之前，先确定你知道基本的 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
声明：本文来源于网络，版权归作者所有，不代表本专栏观点，有什么问题请联系我，谢谢！
