微信小程序实验案例:简易成语小词典
微信小程序实验案例:简易成语小词典
01、准备工作
1●申请数据接口
现在网络上第三方的免费数据资源越来越少了,这里推荐使用聚合数据的免费接口来实现本次实验案例。
首先访问聚合数据官网https://www.juhe.cn/,点击右上角的“注册”按钮进入注册页面,用手机号或邮箱进行账号注册。
注册完成后如果希望获得更多的免费接口使用资源和请求次数,建议登录进入个人中心(https://dashboard.juhe.cn/home)选择“账号管理”->“实名认证”上传有效证件做一下认证,如下图所示。
获得审批通过之后就可以去申请免费的接口资源了。
以成语信息数据为例,选择“数据中心”->“我的 API”,然后点击“申请新数据”按钮,搜索自己想要的数据资源进行申请,如下图所示。
根据关键词搜索自己需要的数据资源,例如这里我们输入关键词“成语”就可以找到“成语大全”这个资源了,如下图所示。
这些资源大部分是不收费的只不过有请求次数限制(免费会员 100 次/天),学习使用应该是足够的。
选好之后在底部勾选同意协议并点击“立即申请”按钮进行申请,之后这个资源就会出现在“我的 API”列表中,如下图所示。
请记录其中的“请求 Key”后面的字符串,这就是我们免费接口使用时需要带上的密钥了。
点击列表中的“成语大全”名称就可以看到官方文档对于接口的介绍内容了,网址是https://www.juhe.cn/docs/api/id/157。
接口信息如下表所示。
请求参数说明如下表所示。
可以在聚合数据提供的在线测试页面进行接口测试,也可以尝试直接在浏览器里输入请求并携带自己的请求 Key,会得到如下图所示内容。
整理格式之后获得以下内容:
返回的数据参数详情如下表所示。
注:参数值可能为 null 表示可能该成语没有收录这个相关数据。
2●配置小程序网络请求白名单
登录小程序管理后台(mp.weixin.qq.com)将聚合数据的官方接口https://apis.juhe.cn(一定要是 https 开头,这是小程序认可的域名格式)录入到 request 合法域名白名单中去,如下图所示
注意:如果之前已经填了别的域名,请用分号分割彼此。保存修改之后就可以在自己的小程序项目中使用了。
02、成语小词典的视图设计
设计图和最终效果图如下。
(a)概念设计图
(b)最终效果图
index.wxml 内容如下:
index.wxss 内容如下:
此时还没有数据,请在 index.js 的 data 属性中追加以下空白内容(红字部分)。
03、成语小词典的逻辑实现
修改 index.js 文件如下:
尝试查正确或错误的成语,效果如下图。
(a)正确成语的查询结果
(b)错误成语的查询结果
版权声明: 本文为 InfoQ 作者【TiAmo】的原创文章。
原文链接:【http://xie.infoq.cn/article/359ae8635045ca3d773308047】。文章转载请联系作者。
评论