新年假期百无聊赖，于是就看了一下微信小程序的开发方法，花了两天时间入了个门，这里记录一下。
阅读之前，先确定你知道基本的html+css+js语法，这样就能更好地和我一样，以一个新手的视角来理解小程序。
目标
目标是编写一个查单词的小程序，很明显需要一个输入框(如果有一个placehoder就更好了)，然后再加上一个按钮，点击之后如果成功就显示结果，如果失败就提示失败。查词api使用扇贝api。
所以最后为了简单起见，界面的最终形态就是这样：
唯一的页面是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: “” });
}
})
}
})
复制代码
这样，我们就完成了整个小程序的编码工作。
体验
小程序已经上架，欢迎体验。
选择项目地址为下载的文件夹
文章知识点与官方知识档案匹配，可进一步学习相关知识C技能树首页概览113882 人正在系统学习中 相关资源：桌面开满999朵玫瑰花软件绿色版.rar-其它代码类资源-CSDN文库
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！