Vue 微信小程序 uni-app学习系列《三》 实现 英语字典功能

代码：github

效果

1 通过扇贝的接口，查询英语单词，并且拿到返回结果

callsb:function(val){
				console.log("**********callyoudao*******"+val);
				const duration = 2000;
				const requestUrl = 'https://api.shanbay.com/bdc/search/?word='+val
				
				uni.request({
					url: requestUrl,
					dataType: 'text',
					data: {
						noncestr: Date.now()
					},
					success: (res) => {
					
						// string 转 json
						let datajson=JSON.parse(res.data);
					
						this.searchrs=datajson.data;
						
					},
					fail: (err) => {
						console.log('request fail', err);
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					},
					complete: () => {
						this.loading = false;
					}
				});
			},

2 输入需要查询单词，提交以后，调用接口方法，并且传入输入单词

searchNow: function(e) {
				if (this.ipt == '') {
					uni.showToast({
						title: '未输入搜索关键字',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				var that = this;
				var newArr = that.searchKey;
				newArr.push(this.ipt);
				this.searchKey = newArr;
				//执行接口方法
				this.callsb(this.ipt);
				var newStr = newArr.join('-');
				uni.setStorage({
					key: 'searchLocal',
					data: newStr
				});
			},

2. 结果显示到页面

		    
		        
		            
		                
							 {{searchrs.content}}
							  音标:{{searchrs.pron}}
		                    {{searchrs.definition}}