需求简述
这是一个仿多抓鱼扫码卖书的小程序，结合了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对象
}
},
在页面中调用
<view class="uni-media-list-text-top" >{{text.data.content}}</view><!--注意此处无需声明this，直接调用即可-->
笔记二 uniapp页面传参
上述需求中提出的扫描图书后面的ISBN条形码，得到的数据通过小白接口在自定义数据模型（实际上类似一张数据表）查询比对。如果该数据与已有数据中有吻合的，则进入下一页面，将该图书相关信息（重要的是回收价）展示给用户这项需求的实现可以需要用到uniapp页面传参。因为在查询时实际上是根据图书ISBN与数据表中的ISBN字段进行筛选，然后返回符合条件的数据行，这一行数据实际上已经包含了在书籍回收详情页中所需的书籍相关信息，因此为简化程序及减少接口调用次数，增加运行效率，我们不应该仅仅只将图书的ISBN传递到下一页面，在下一页面根据此ISBN再一次调用接口，而是应该将在扫码页面所能获取到的所有有用信息通过uniapp页面传参的方式传递到下一页面进行使用。当然，除了页面传参还有一个笨方法，那就是将接口成功的回调函数获得的数据缓存到本地，在下一页面中调用缓存中的数据，但此方法效率与页面传参确实要低很多，现在来看具体操作细节。
在post.vue页面（扫码验证页面）使用uniapp的扫码接口uni.scanCode，在其回调函数中获取扫码结果调用查询接口，成功则将数据传递到下一页面并跳转。
//post.vue
<template>
<view>
<button class="btn-scan" type="primary" @tap="scan">扫码卖书</button>
</view>
</template>
<script>
export default {
data() {
return {
ISBN: '',//初始化重要数据
};
},
onLoad : function() {
var loginRes = this.checkLogin('../login/login', '2');//检查用户登录状态
if(!loginRes){
return false;
uni.showModal({
title: '未登录',
content: '您未登录，需要登录后才能继续',
/**
* 如果需要强制登录，不显示取消按钮
*/
showCancel: false,
success: (res) => {
if (res.confirm) {
/**
* 如果需要强制登录，使用reLaunch方式
*/
if (this.forcedLogin) {
uni.reLaunch({
url: '../login/login'
});
}
}
}
});
}else{
// console.log(loginRes);
//在本地缓存中缓存用户信息
this.userId = uni.getStorageSync('userlogin');
// console.log(this.userInfo);
this.userInfo = uni.getStorageSync('userInfo');
console.log(this.userInfo);
}
},
methods: {
scan() {
uni.scanCode({
scanType: ['barCode'],
success: function (res) {
console.log('条码内容：' + res.result);
uni.request({
url: 'http://hd215.api.okayapi.com/?&service=App.Table.FreeFindOne&',//接口url
method: 'GET',
data:{
//调用接口数据
model_name: '',
where: [["book_ISBN","=",res.result]],
app_key: ''
},
success: function(ret) {
if(res.result == ret.data.data.data.book_ISBN){
//检查返回数据是否与图书表中ISBN相符
// console.log(ret.data);
var bookInfo = ret.data.data.data;
uni.navigateTo({
url: "../maishuDetail/maishuDetail?info="+JSON.stringify(bookInfo)//重要步骤，将接口返回数据（json对象）通过JSON.stringify(）转化为字符串，在下一页面的onload方法中接收此字符串
});
uni.showToast({
title: '查询成功!',
mask: true,
duration: 1500
});
}else{
uni.showToast({
title: '查询失败!',
mask: true,
duration: 1500
});
}
},
});
}
});
},
}
}
</script>
在maishuDetail.vue（卖书详情页）中接收post.vue 传递过来的参数并展示在详情页面中，并准备用户提交的相关信息。
//maishuDetail.vue
<template>
<view>
<view>书名:{{test.book_name}}</view>
<view>ISBN:{{test.book_ISBN}}</view>
<view>作者:{{test.book_author}}</view>
<view>出版社:{{test.book_chubanshe}}</view>
<view>原价:￥{{test.book_oldprice}}</view>
<view>回收价:￥{{test.book_price}}</view>
<button type="default" @tap="maiShu">回收书籍</button>
<view>打印{{consol}}</view>
</view>
</template>
<script>
export default {
data() {
return {
test: {},//初始化页面展示信息，为一个对象
consol: '',//由于hbuilder真机调试时不能直接在控制台输出详细信息，因此将回调数据在此处声明并在页面中显示
};
},
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
this.test = JSON.parse(option.info);//接收post.vue页面传递过来的参数，并将字符串的json对象转化为js对象方便页面显示调用。
this.userInfo = uni.getStorageSync('userInfo');//获取用户的相关信息
} ,
methods: {
maiShu() {
let that = this;//参照笔记一 uni.reques成功回调函数的数据如何显示在模板中的相关方法，打印回调信息调试
var bookSale = {};//准备书籍相关信息的传递，先初始化对象，实际传递时需将此对象转化为字符串
bookSale.book_saleUUID = this.userInfo.uuid;//注意对象属性的键要与模型（数据表）中的字段吻合
bookSale.book_saleUNMAE = this.userInfo.username;
bookSale.book_saleISBN = this.test.book_ISBN;
bookSale.book_saleBKNAME = this.test.book_name;
bookSale.book_salePrice = this.test.book_price;
var jsonData = JSON.stringify(bookSale);//字符串对象，方便传递
uni.request({
url:'http://hd215.api.okayapi.com/?service=App.Table.Create&',
method: 'GET',
data: {
//接口参数
model_name: 'book_saleUser',
data: jsonData,
app_key: '',
},
success:function(res){
that.consol = JSON.stringify(res.data);//字符串后方便在页面中显示回调信息，方便调试
}
})
}
}
}
</script>
…未完待续