新年假期百无聊赖，于是就看了一下微信小程序的开发方法，花了两天时间入了个门，这里记录一下。
阅读之前，先确定你知道基本的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，它的具体的使用可以看这里
由此，我们得到了如下代码
<!-- 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
- 选择项目地址为下载的文件夹
- 编译、扫码预览
