前端学习之路——uniapp+小白接口开发跨端应用笔记

需求简述

这是一个仿多抓鱼扫码卖书的小程序，结合了uniapp和小白接口的使用。卖书流程的实现为用户打开应用后扫描图书后面的ISBN条形码，得到的数据通过小白接口在自定义数据模型（实际上类似一张数据表）查询比对。如果该数据与已有数据中有吻合的，则进入下一页面，将该图书相关信息（重要的是回收价）展示给用户，其后用户选择回收书籍，此时则将在登录时缓存在本地的用户名（username）、用户全局id（uuid）以及回收书籍的相关信息发送到一张图书回收表中（后期返回数据应包含缓存在本地的用户拓展信息如联系方式、地址等），由工作人人工与用户进行联系回收。

此项需求大概用到的技术如下：vue相关，uniapp相关，小白接口有用户模块的登录接口（App.User.Login）、注册接口（App.User.Register）、获取用户个人资料（App.User.Profile）、修改用户扩展信息（App.User.UpdateExtInfo），其他的主要为几个元数据接口以及自定义模型的通用接口，后期可能会使用到直连数据库接口。

笔记一 uni.reques成功回调函数的数据如何显示在模板中

这是我在调用接口返回的数据想在页面中输出时遇到的问题，似乎有一些作用域的问题，有些复杂。经过不断的摸索，得出以下解决方案，背后的原理则需要继续思考:

onLoad() {//这是页面加载时的方法，在此处调用接口获取页面填充数据
			let that = this;//关键步骤
			uni.request({
				url: 'http://hd215.api.okayapi.com/?s=App.Main_Meta.Get&',//接口url
				method: 'GET',
				data: {
					//接口请求数据
					key: '',
					app_key: '',			
				},
				success: (res) => {
					var a = res.data.data;
					//console.log(a);
					that.text = a;//将回调数据赋给全局作用域上的text对象，此对象需提前在data中初始化
					uni.showToast({
						title: '查询成功!',
						mask: true,
						duration: 1500
					});
				},
			});
		},

在data中初始化需要的对象

data() {
			return {
				title: '首页',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				reload: true,
				listData: [],
				text: {},//初始化text对象
			}
		},

在页面中调用

{{text.data.content}}

笔记二 uniapp页面传参

上述需求中提出的扫描图书后面的ISBN条形码，得到的数据通过小白接口在自定义数据模型（实际上类似一张数据表）查询比对。如果该数据与已有数据中有吻合的，则进入下一页面，将该图书相关信息（重要的是回收价）展示给用户这项需求的实现可以需要用到uniapp页面传参。因为在查询时实际上是根据图书ISBN与数据表中的ISBN字段进行筛选，然后返回符合条件的数据行，这一行数据实际上已经包含了在书籍回收详情页中所需的书籍相关信息，因此为简化程序及减少接口调用次数，增加运行效率，我们不应该仅仅只将图书的ISBN传递到下一页面，在下一页面根据此ISBN再一次调用接口，而是应该将在扫码页面所能获取到的所有有用信息通过uniapp页面传参的方式传递到下一页面进行使用。当然，除了页面传参还有一个笨方法，那就是将接口成功的回调函数获得的数据缓存到本地，在下一页面中调用缓存中的数据，但此方法效率与页面传参确实要低很多，现在来看具体操作细节。

在post.vue页面（扫码验证页面）使用uniapp的扫码接口uni.scanCode，在其回调函数中获取扫码结果调用查询接口，成功则将数据传递到下一页面并跳转。

//post.vue
		

在maishuDetail.vue（卖书详情页）中接收post.vue 传递过来的参数并展示在详情页面中，并准备用户提交的相关信息。

//maishuDetail.vue

…未完待续