Wechat applet experiment case: simple idiom dictionary

  Wechat applet experiment case ： Simple idiom dictionary

01、 preparation

1● Apply for data interface

Now there are fewer and fewer free data resources of third parties on the network , It is recommended to use the free interface of aggregated data to realize this experimental case .

First, visit the official website of aggregated data https://www.juhe.cn/, Click on the “ register ” Button to enter the registration page , Use your mobile number or email address to register your account .

  After registration, if you want to get more free interface resources and request times , It is recommended to log in to the personal Center （https://dashboard.juhe.cn/home） choice “ Account management ”->“ Real name authentication ” Upload valid certificates for authentication , As shown in the figure below .

notes ：【 Personal privacy data has been hidden 】 

After approval, you can apply for free interface resources .

Take idiom information data as an example , choice “ Data Center ”->“ my API”, And then click “ Apply for new data ” Button , Search the data resources you want to apply , As shown in the figure below .

  Search the data resources you need according to keywords , For example, here we enter keywords “ Idiom ” You can find it “ Complete idioms ” It's a resource , As shown in the figure below .

Most of these resources are free of charge, but there is a limit on the number of requests （ Free membership 100 Time / God ）, Learning to use should be enough .

After selecting it, check the agreement at the bottom and click “ Apply now ” Button to apply , Then this resource will appear in “ my API” In the list , As shown in the figure below .

Please record “ request Key” String after , This is the key we need to bring when using the free interface .

Click... In the list “ Complete idioms ” You can see the introduction of the interface in the official document , The address is https://www.juhe.cn/docs/api/id/157.

The interface information is shown in the following table .

Address of the interface	http://apis.juhe.cn/idioms/query
width	json
Request mode	http get/post（ Also support https）
Request example	http://apis.juhe.cn/idioms/query?key= Request key &wd= Idiom for example ：                   http://apis.juhe.cn/idioms/query?key=12345&wd= be full of joy
Interface remarks	Query details according to idioms , Such as ： Detailed explanation 、 A synonym for 、 antonym 、 Pronunciation and other information ; At present, the total is about 4.5 Thousands of idioms .

The request parameters are described in the following table .

name	If required	type	explain
key	yes	string	In the personal center -> My data , View above the interface name
wd	yes	string	Query idioms , Such as ： With one mind

Interface tests can be carried out on the online test page provided by aggregated data , You can also try to enter the request directly in the browser and bring your own request Key, You will get the content shown in the following figure .

After sorting out the format, get the following ：

{
"reason":"success!",
"result":{
"name":" be full of joy ",
"pinyin":"huāntiānxǐdì",
"jbsy":[ " Describe very happy ." ],
"xxsy":[ "【 explain 】： Describe very happy .", "【 come from 】： element • Wang Shifu 《 West Chamber 》 The fifth book is 40% off ：“ I'm going to go tomorrow , County name , How to be happy , Give him two hands .”", "【 Example 】： Just now the second grandma came out of the old lady's house , Not like the old days ～ Of , Called Ping'er , I don't know what I said .<br>◎ clear • Cao xueqin 《 A dream of red mansions 》 The sixty seventh time ", "【 grammar 】： joint ; As a predicate 、 Attributive 、 adverbial ; With commendatory meaning " ], "chuchu":" element • Wang Shifu 《 West Chamber 》 The second book is the third discount ：“ Then I saw him happy ; According to my life .”", "liju":" My sister holds the college admission notice in her hand ～ Run home and tell your mother the good news .",
"jyc":[ " Tread ", " be jubilant ", " blot out the sky and cover up the earth ", " dance with joy ", " dance for joy ", " laugh loud and clap one 's hands ", " beam with joy ", " look cheerful ", " rapture ", " smile ", " All's well that ends well ", " jubilant " ],
"fyc":[ " wring one 's heart to the very core ", " pain of cutting one 's body ", " eat one's heart out ", " be so distressed as if one 's heart would break ", " Sad world ", " feel as if a knife were piercing one 's heart ", " Frown ", " natural calamities and man-made misfortunes ", " the endless sea of tribulations ", " Pull a long face ", " choke with sobs ", " feel sad and gloomy ", " wail like ghosts and howl like wolves ", " repeatedly attempt suicide " ]
},
"error_code":0
}

The details of the returned data parameters are shown in the following table .

name	type	explain
error_code	int	Return code
reason	string	Return instructions
result	string	Return result set
result.name	string	Query idioms
result.pinyin	string	pinyin , May is empty
error_code	array	Basic definition , May be null
result.xxsy	array	Detailed interpretation , May be null
result.chuchu	string	Source , May is empty
result.liju	string	example sentence , May is empty
result.jyc	array	words whose meaning is similar , May be null
result.fyc	array	antonym , May be null

notes ： The parameter value may be null It means that this idiom may not include this relevant data .

2● Configure applet network request white list

Login applet management background （mp.weixin.qq.com） The official interface for aggregating data https://apis.juhe.cn（ Must be https start , This is the domain name format recognized by the applet ） Enter into request Go to the white list of legal domain names , As shown in the figure below

  Be careful ： If you have filled in another domain name before , Please separate each other with semicolons . After saving the changes, you can use them in your own applet project .

02、 View design of idiom dictionary

The design drawing and final effect drawing are as follows .

 （a） Conceptual design drawings

(b) Final rendering

index.wxml The contents are as follows ：

1. <!--index.wxml-->
2. <!-- Integral container  -->
3. <view class="container">
4. <!-- Top title  -->
5. <view class="title"> Welcome to the simple idiom dictionary </view>
6.
7. <!-- Query form  -->
8. <form bindsubmit="search">
9. <input name="chengyu" placeholder=" Please enter the idiom to check "></input>
10. <button form-type="submit"> lookup </button>
11. </form>
12.
13. <!-- Query results  -->
14. <view class="result">
15. <block wx:if="{
   {result!=''}}">
16. <view hidden="{
   {result.pinyin==null}}">• pinyin ：{
   {result.pinyin}}</view>
17. <view hidden="{
   {result.jbsy==null}}">• Basic definition ：{
   {result.jbsy}}</view>
18. <view hidden="{
   {result.xxsy==null}}">• Detailed interpretation ：{
   {result.xxsy}}</view>
19. <viewhidden="{
   {result.chuchu==null}}">• Source ：{
   {result.chuchu}}</view>
20. <view hidden="{
   {result.liju==null}}">• example sentence ：{
   {result.liju}}</view>
21. <view hidden="{
   {result.jyc==null}}">• words whose meaning is similar ：{
   {result.jyc}}</view>
22. <view hidden="{
   {result.fyc==null}}">• antonym ：{
   {result.fyc}}</view>
23. </block>
24. <view wx:else>{
   {tip}}</view>
25. </view>
26. </view>

index.wxss The contents are as follows ：

1. /**index.wxss**/
2. .container{
3. display: flex;
4. flex-direction: column;
5. padding: 20rpx;
6. }
7.
8. /*  Top title  */
9. .title{
10. text-align: center;
11. font-size: 40rpx;
12. font-weight: bold;
13. margin: 20rpx;
14. }
15.
16. /*  Text input box  */
17. input{
18. border: 1rpx solid silver;
19. border-radius: 20rpx;
20. height: 80rpx;
21. }
22.
23. /*  Button  */
24. button{
25. margin:20rpx 0;
26. }
27.
28. /*  Query result box  */
29. .result view{
30. margin: 20rpx;31. }

There is no data yet , Please be there. index.js Of data Add the following blank content to the attribute （ The scarlet letter ）.

1. //index.js
2. Page({
3.
4. /**
5. *  Initial data of the page 
6. */
7. data: {
8. result:'',
9. tip:''
10. },
11. … There is no change in the subsequent code , A little …

03、 Logical realization of idiom dictionary

modify index.js The documents are as follows ：

1. //index.js
2. Page({
3.
4. /**
5. *  Initial data of the page 
6. */
7. data: {
8. result:'',
9. tip:''
10. },
11.
12. /**
13. *  Custom function -- Listen to the form submission and check the idiom 
14. */
15. search: function (e) {
16. var that = this
17. //  Get idiom words 
18. let chengyu = e.detail.value.chengyu
19.
20. //  No input 
21. if (chengyu == '') {
22. wx.showToast({
23. title: ' Idioms cannot be empty ！',
24. icon: 'none'
25. })
26. }
27. //  Initiate network request 
28. else {
29. wx.request({
30. url: 'https://apis.juhe.cn/idioms/query',
31. data: {
32. wd: chengyu,
33. key: ' Change your request Key'
34. },
35. success: function (res) {
36. console.log(res.data)
37. //  I got the result 
38. if (res.data.error_code == 0) {
39. that.setData({
40. result: res.data.result,
41. tip:''
42. })
43. }
44. //  There is no such word 
45. else{
46. that.setData({
47. result:'',
48. tip:' The relevant information of this idiom cannot be queried .'
49. })
50. }
51. }
52. })
53. }
54. },55. })

  Try to find the correct or wrong idioms , The effect is as follows .

 (a) Query results of correct idioms

 (b) Query results of wrong idioms