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

古城微笑少年丶 2021-09-19 11:40 697阅读 0赞

代码：[github][]

# 效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]

# 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
    				});
    			},

1.  结果显示到页面

<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>

[github]: https://github.com/bseayin/uniAppDemo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]: /images/20210726/28cb261d48e44094b89bf548314ff4a5.png