【附源码】小程序初窥之简单查单词

最新推荐文章于 2024-08-13 16:18:56 发布

极乐叔

最新推荐文章于 2024-08-13 16:18:56 发布

阅读量3.3k

点赞数 3

分类专栏：微信小程序文章标签：微信小程序

微信小程序专栏收录该内容

376 篇文章 28 订阅

订阅专栏

新年假期百无聊赖，于是就看了一下微信小程序的开发方法，花了两天时间入了个门，这里记录一下。

阅读之前，先确定你知道基本的 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: "" });
      }
    })
  }

})

这样，我们就完成了整个小程序的编码工作。