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. 结果显示到页面

<view class="uni-list">
		    <block >
		        <view class="uni-list-cell" hover-class="uni-list-cell-hover">
		            <view class="uni-triplex-row">
		                <view class="uni-triplex-left">
							 <text class="uni-title uni-ellipsis">{{searchrs.content}}</text>
							  <text class="uni-title uni-ellipsis" v-if="searchrs.pron">音标:{{searchrs.pron}}</text>
		                    <text class="uni-title uni-ellipsis">{{searchrs.definition}}</text>
		                    
		                   
		                </view>
		               
		            </view>
		        </view>
		    </block>
		</view>