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

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

阅读以前，先肯定你知道基本的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
  }
}
复制代码

页面内容

1. 首先咱们须要一个输入框，从微信文档能够看到，咱们须要一个input控件。经过placeholder属性添加占位符，而后经过bindinput与输入事件绑定，每当有输入事件的时候，就调用wordInput函数。这里的focus 与 confirm-type 含义你能够查看文档来了解。
2. 第二步咱们须要一个按钮，点击调用处理函数。因此这里咱们用bindtap绑定一个btnClick函数。
3. 最后咱们须要显示翻译和例句，使用{{}}来绑定变量，此处的控件为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

• 下载源码
• 打开微信开发者工具，新建项目

• 选择项目地址为下载的文件夹

• 编译、扫码预览