c语言查单词小程序,【附源码】小程序初窥之简单查单词

最新推荐文章于 2024-04-06 19:49:53 发布

郝攀攀

最新推荐文章于 2024-04-06 19:49:53 发布

阅读量415

点赞数

文章标签： 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 ，它的具体的使用可以看这里

由此，我们得到了如下代码

查询

复制代码

页面样式

这个不多说了，大家都能看懂

/* 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});