微信小程序开发案例 | 成语词典小程序（下）
【摘要】 本次阶段案例使用了MySQL进行数据存储和查询，并使用PHP制作了成语查询接口供小程序端调用。在实际开发中除了自己制作查询接口外，还可以直接申请使用第三方提供的接口。在网络上有一些接口是可以注册免费账号后供开发者学习使用的，这类接口一般会提供一个密钥key且会有调用频次的限制，但是初学者入门使用基本是够用的，除非需要商用再考虑付费。
阶段案例-成语词典小程序
01、视图设计
1 导航栏设计
在app.json文件中可以自由修改window属性来实现导航栏的颜色、文字显示。更新后的app.json文件window属性相关代码如下：
1. {
2. "pages":[…],
3. "window":{
4. "navigationBarBackgroundColor": "#fff",
5. "navigationBarTitleText": "简易成语小词典",
6. "navigationBarTextStyle":"black"
7. },
8. …9. }
■ 图5-22 自定义导航栏效果
2 首页设计
首页主要是一个垂直排列的布局，从上往下依次是：标题、输入框、按钮、查询结果展示区域。页面设计图如图5-23所示。
■ 图5-23 首页设计图
计划使用组件如下：
●整体容器和顶部标题：<view>组件；
●输入框与按钮组合区域：<form>组件；
●输入框：<input>组件；
●按钮：<button>组件；
●查询结果展示：<view>组件。
index.wxml代码如下：
1. <!--index.wxml-->
2. <!-- 1 整体容器 -->
3. <view class="container">
4. <!-- 2 顶部标题 -->
5. <view class="title">欢迎使用简易成语小词典</view>
6.
7. <!-- 3 查询表单 -->
8. <form>
9. <!-- 3-1 文本输入框 -->
10. <input name="idiom" placeholder="请输入要查的成语"></input>
11. <!-- 3-2 按钮 -->
12. <button>查找</button>
13. </form>
14.
15. <!-- 4 查询结果 -->
16. <view class="result">
17. <view>·拼音：待补充</view>
18. <view>·基本释义：待补充</view>
19. <view>·出处：待补充</view>
20. <view>·例句：待补充</view>
21. </view>
22. </view>1. /**index.wxss**/
2. /* 1 整体容器 */
3. .container{
4. display: flex;
5. flex-direction: column;
6. padding: 20rpx;
7. }
8.
9. /* 2 顶部标题 */
10. .title{
11. text-align: center;
12. font-size: 40rpx;
13. font-weight: bold;
14. margin: 20rpx;
15. }
16.
17. /* 3 表单区域 */
18. /* 3-1 文本输入框 */
19. input{
20. border: 1rpx solid silver;
21. border-radius: 20rpx;
22. height: 80rpx;
23. }
24.
25. /* 3-2 按钮 */
26. button{
27. margin:20rpx 0;
28. }
29.
30. /* 4 查询结果框 */
31. .result view{
32. margin: 20rpx;33. }
■ 图5-24 首页设计效果图
此时视图设计就全部完成了，下一节将进行页面的逻辑实现。
02、逻辑实现
1 初始隐藏查询结果
查询结果展示区域的显示内容要分成3种情况：
● 尚未开始查询：显示空白；
● 未查到相关成语结果：显示“查询不到该成语的相关信息。”字样；
● 查到了正确的成语结果：显示“拼音、基础释义、出处、例句”等信息。
修改index.wxml查询结果区域的相关代码如下：
1. <!--index.wxml-->
2. <!-- 1 整体容器 -->
3. <view class="container">
4. <!-- 2 顶部标题（…内容略…）-->
5. <!-- 3 查询表单（…内容略…）-->
6.
7. <!-- 4 查询结果 -->
8. <view class="result">
9. <block wx:if="{{result!=''}}">
10. <view>·拼音：待补充</view>
11. <view>·基本释义：待补充</view>
12. <view>·出处：待补充</view>
13. <view>·例句：待补充</view>
14. </block>
15. <view wx:else>{{tip}}</view>
16. </view>
17. </view>1. Page({
2. /**
3. * 页面的初始数据
4. */
5. data: {
6. result:'',
7. tip:''
8. },
9. …10. })
■ 图5-25 初始隐藏查询结果功能实现
2 发起网络请求
首先需要制作接口文件searchWord.php，参考代码如下：
1. <?php
2. //数据库配置信息
3. $servername = "localhost"; //主机名
4. $username = "dict"; //用户名
5. $password = "123456"; //密码
6. $dbname = "idiom_dict"; //数据库名称
7.
8. // 创建连接
9. $conn = new mysqli($servername, $username, $password, $dbname);
10. // Check connection
11. if ($conn->connect_error) {
12. die("连接失败: " . $conn->connect_error);
13. }
14.
15. //获取单词
16. $word = $_GET['word'];
17. //SQL查询语句
18. $sql = "select * from idioms where name like '".$word."'";
19. //查询结果
20. $result = $conn->query($sql);
21.
22. //如果查到了结果
23. if ($result->num_rows > 0) {
24. $msg ['error_code']=0;
25. // 输出数据
26. while($row = $result->fetch_assoc()) {
27. $msg ['result'] = $row;
28. }
29. } else {
30. $msg['error_code']=1;
31. $msg['result']='没有查到';
32. }
33. //关闭数据库连接
34. $conn->close();
35. //把获取到的信息发给客户端
36. echo json_encode($msg);37. ?>在小程序端index.wxml中修改表单区域代码，把普通按钮改造为提交按钮，并为表单组件
追加提交事件监听，一旦触发提交动作就执行自定义函数search。
index.wxml代码更新如下：
38. …
39. <!-- 3 查询表单 -->
40. <form bindsubmit="search">
41. <!-- 3-1 文本输入框 -->
42. <input name="idiom" placeholder="请输入要查的成语"></input>
43. <!-- 3-2 按钮 -->
44. <button form-type="submit">查找</button>
45. </form>
46. …index.js代码更新如下：
1. //index.js
2. // 服务器地址
3. const baseUrl = 'http://localhost/'
4.
5. Page({
6. /**
7. * 自定义函数--监听表单提交并查成语
8. */
9. search: function (e) {
10. // 获取成语单词
11. let idiom = e.detail.value.idiom
12.
13. // 没有输入任何内容
14. if (idiom == '') {
15. wx.showToast({
16. title: '成语不能为空！',
17. icon: 'none'
18. })
19. }
20. // 发起网络请求
21. else {
22. wx.request({
23. url: baseUrl+'searchWord.php',
24. data: {
25. word: idiom
26. },
27. success: res=> {
28. console.log(res.data)
29. // 查到结果了
30. if (res.data.error_code == 0) {
31. this.setData({
32. result: res.data.result,
33. tip:''
34. })
35. }
36. // 查无此词
37. else{
38. this.setData({
39. result:'',
40. tip:'查询不到该成语的相关信息。'
41. })
42. }
43. }
44. })
45. }
46. },
47. …48. })修改index.wxml代码，把查询结果区域“待补充”字样都换成实际查到的数据。
1. …
2. <!-- 4 查询结果 -->
3. <view class="result">
4. <block wx:if="{{result!=''}}">
5. <view>·拼音：{{result.spell}}</view>
6. <view>·基本释义：{{result.content}}</view>
7. <view>·出处：{{result.derivation}}</view>
8. <view>·例句：{{result.samples}}</view>
9. </block>
10. <view wx:else>{{tip}}</view>
11. </view>12. …
■ 图5-26 发起网络请求功能实现
注：“localhost”地址只能在PC端的微信开发者工具中使用，如果希望真机调试得把index.js文件顶部的网址baseUrl改成服务器的IP地址。
3 隐藏数据库空缺字段
在查询时发现数据库里有些成语的出处或例句不全，不妨修改一下页面显示的内容，隐藏没有查到的字段。index.wxml代码修改如下：
1. …
2. <!-- 4 查询结果 -->
3. <view class="result">
4. <block wx:if="{{result!=''}}">
5. <view hidden="{{result.spell==null}}">·拼音：{{result.spell}}</view>
6. <view hidden="{{result.content==null}}">·基本释义：{{result.content}} </view>
7. <view hidden="{{result.derivation==null}}">·出处：{{result.derivation}} </view>
8. <view hidden="{{result.samples==null}}">·例句：{{result.samples}} </view>
9. </block>
10. <view wx:else>{{tip}}</view>
11. </view>12. …
■ 图5-27 隐藏数据库空缺字段功能实现
至此整个阶段案例就完成了，完整运行效果如图5-28所示。
■ 图5-28 第5章阶段案例效果图
本次阶段案例使用了MySQL进行数据存储和查询，并使用PHP制作了成语查询接口供小程序端调用。
在实际开发中除了自己制作查询接口外，还可以直接申请使用第三方提供的接口。在网络上有一些接口是可以注册免费账号后供开发者学习使用的，这类接口一般会提供一个密钥key且会有调用频次的限制，但是初学者入门使用基本是够用的，除非需要商用再考虑付费。
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）