写点什么

微信小程序实验案例:简易成语小词典

作者:TiAmo
  • 2023-01-13
    江苏
  • 本文字数:2694 字

    阅读完需:约 9 分钟

微信小程序实验案例:简易成语小词典

微信小程序实验案例:简易成语小词典

01、准备工作

1●申请数据接口

现在网络上第三方的免费数据资源越来越少了,这里推荐使用聚合数据的免费接口来实现本次实验案例。

首先访问聚合数据官网https://www.juhe.cn/,点击右上角的“注册”按钮进入注册页面,用手机号或邮箱进行账号注册。


注册完成后如果希望获得更多的免费接口使用资源和请求次数,建议登录进入个人中心(https://dashboard.juhe.cn/home)选择“账号管理”->“实名认证”上传有效证件做一下认证,如下图所示。


获得审批通过之后就可以去申请免费的接口资源了。

以成语信息数据为例,选择“数据中心”->“我的 API”,然后点击“申请新数据”按钮,搜索自己想要的数据资源进行申请,如下图所示。

 根据关键词搜索自己需要的数据资源,例如这里我们输入关键词“成语”就可以找到“成语大全”这个资源了,如下图所示。


这些资源大部分是不收费的只不过有请求次数限制(免费会员 100 次/天),学习使用应该是足够的。

选好之后在底部勾选同意协议并点击“立即申请”按钮进行申请,之后这个资源就会出现在“我的 API”列表中,如下图所示。


请记录其中的“请求 Key”后面的字符串,这就是我们免费接口使用时需要带上的密钥了。

点击列表中的“成语大全”名称就可以看到官方文档对于接口的介绍内容了,网址是https://www.juhe.cn/docs/api/id/157

接口信息如下表所示。

请求参数说明如下表所示。

可以在聚合数据提供的在线测试页面进行接口测试,也可以尝试直接在浏览器里输入请求并携带自己的请求 Key,会得到如下图所示内容。


整理格式之后获得以下内容:

{"reason":"success!","result":{"name":"欢天喜地","pinyin":"huāntiānxǐdì","jbsy":[ "形容非常欢喜。" ],"xxsy":[ "【解释】:形容非常高兴。", "【出自】:元•王实甫《西厢记》第五本第四折:“我现将著夫人诰欶,县君名称,怎生待欢天喜地,两只手儿亲付与他。”", "【示例】:刚才二奶奶从老太太屋里出来,不似往日~的,叫了平儿,唧唧咕咕的不知说了些什么。<br>◎清•曹雪芹《红楼梦》第六十七回", "【语法】:联合式;作谓语、定语、状语;含褒义" ], "chuchu":"元•王实甫《西厢记》第二本第三折:“则见他欢天喜地;谨依来命。”", "liju":"姐姐手里举着大学录取通知书~跑回家向妈妈报喜。","jyc":[ "欣喜若狂", "兴高采烈", "铺天盖地", "手舞足蹈", "欢欣鼓舞", "抚掌大笑", "眉飞色舞", "眉开眼笑", "兴高彩烈", "喜笑颜开", "皆大欢喜", "喜气洋洋" ],"fyc":[ "哀痛欲绝", "切肤之痛", "忧心如焚", "哀哀欲绝", "哀感天地", "心如刀割", "颦眉蹙额", "天灾人祸", "苦海无边", "愁眉苦脸", "泣不成声", "悒悒不乐", "鬼哭狼嚎", "寻死觅活" ]},"error_code":0}
复制代码

返回的数据参数详情如下表所示。

注:参数值可能为 null 表示可能该成语没有收录这个相关数据。

2●配置小程序网络请求白名单

登录小程序管理后台(mp.weixin.qq.com)将聚合数据的官方接口https://apis.juhe.cn(一定要是 https 开头,这是小程序认可的域名格式)录入到 request 合法域名白名单中去,如下图所示


 注意:如果之前已经填了别的域名,请用分号分割彼此。保存修改之后就可以在自己的小程序项目中使用了。

02、成语小词典的视图设计

设计图和最终效果图如下。


 (a)概念设计图


(b)最终效果图

index.wxml 内容如下:

1. <!--index.wxml-->2. <!--整体容器 -->3. <view class="container">4. <!--顶部标题 -->5. <view class="title">欢迎使用简易成语小词典</view>6.7. <!--查询表单 -->8. <form bindsubmit="search">9. <input name="chengyu" placeholder="请输入要查的成语"></input>10. <button form-type="submit">查找</button>11. </form>12.13. <!--查询结果 -->14. <view class="result">15. <block wx:if="{{result!=''}}">16. <view hidden="{{result.pinyin==null}}">•拼音:{{result.pinyin}}</view>17. <view hidden="{{result.jbsy==null}}">•基本释义:{{result.jbsy}}</view>18. <view hidden="{{result.xxsy==null}}">•详细释义:{{result.xxsy}}</view>19. <viewhidden="{{result.chuchu==null}}">•出处:{{result.chuchu}}</view>20. <view hidden="{{result.liju==null}}">•例句:{{result.liju}}</view>21. <view hidden="{{result.jyc==null}}">•近义词:{{result.jyc}}</view>22. <view hidden="{{result.fyc==null}}">•反义词:{{result.fyc}}</view>23. </block>24. <view wx:else>{{tip}}</view>25. </view>26. </view>
复制代码

index.wxss 内容如下:

1. /**index.wxss**/2. .container{3. display: flex;4. flex-direction: column;5. padding: 20rpx;6. }7.8. /* 顶部标题 */9. .title{10. text-align: center;11. font-size: 40rpx;12. font-weight: bold;13. margin: 20rpx;14. }15.16. /* 文本输入框 */17. input{18. border: 1rpx solid silver;19. border-radius: 20rpx;20. height: 80rpx;21. }22.23. /* 按钮 */24. button{25. margin:20rpx 0;26. }27.28. /* 查询结果框 */29. .result view{30. margin: 20rpx;31. }
复制代码

此时还没有数据,请在 index.js 的 data 属性中追加以下空白内容(红字部分)。

1. //index.js2. Page({3.4. /**5. * 页面的初始数据6. */7. data: {8. result:'',9. tip:''10. },11. …后续代码无改动,略…
复制代码

03、成语小词典的逻辑实现

修改 index.js 文件如下:

1. //index.js2. Page({3.4. /**5. * 页面的初始数据6. */7. data: {8. result:'',9. tip:''10. },11.12. /**13. * 自定义函数--监听表单提交并查成语14. */15. search: function (e) {16. var that = this17. // 获取成语单词18. let chengyu = e.detail.value.chengyu19.20. // 没有输入任何内容21. if (chengyu == '') {22. wx.showToast({23. title: '成语不能为空!',24. icon: 'none'25. })26. }27. // 发起网络请求28. else {29. wx.request({30. url: 'https://apis.juhe.cn/idioms/query',31. data: {32. wd: chengyu,33. key: '换成你的请求Key'34. },35. success: function (res) {36. console.log(res.data)37. // 查到结果了38. if (res.data.error_code == 0) {39. that.setData({40. result: res.data.result,41. tip:''42. })43. }44. // 查无此词45. else{46. that.setData({47. result:'',48. tip:'查询不到该成语的相关信息。'49. })50. }51. }52. })53. }54. },55. })
复制代码

 尝试查正确或错误的成语,效果如下图。


 (a)正确成语的查询结果


 (b)错误成语的查询结果

发布于: 32 分钟前阅读数: 5
用户头像

TiAmo

关注

有能力爱自己,有余力爱别人! 2022-06-16 加入

CSDN全栈领域优质创作者;阿里云创作者社区专家博主、技术博主、星级博主;华为云享专家;

评论

发布
暂无评论
微信小程序实验案例:简易成语小词典_小程序_TiAmo_InfoQ写作社区