数据传输流的种类
两个月前微信小程序提供云开发服务，为微信小程序开发者提供极大的便利，和省去了后台开发的工作量，使开发者得到了后台和数据的支撑，可以将精力集中在内容开发上。以下就介绍下小程序的几种后台数据传输形式。
云开发数据传输
-
初始化
首先，我们创建一个云数据库，环境名称为：BOOKS，环境ID为：BOOKS-ks911s
在一个小程序页面调用云数据库时要首先初始化，//index.js //获取应用实例 var app = getApp(); wx.cloud.init({env:'BOOKS-ks911s'}) const db = wx.cloud.database({env:'BOOKS-ks911s'})[此处ENV可以不屑] Page({ data:{ content:[], info:[], detail:[], num:0, params:false }， ...... }) -
数据获取
然后我们创建一个云数据库，名为todolist，表格形式如下：第一张表 "_id":abc1 "_openid":user-open-id（这里为了简化用了这个名称，注释如果这个_openid不是你的_openid，那么很多操作可能无法进行，一定要保证_openid是自己微信对应的那个） "bookinfo":xxx "infodetail":yyy "infonum":3 "inforeading": true 第二张表 "_id":abc2 "_openid":user-open-id（这里为了简化用了这个名称，注释如果这个_openid不是你的_openid，那么很多操作可能无法进行，一定要保证_openid是自己微信对应的那个） "bookinfo":aqx "infodetail":pod "infonum":3 "inforeading": false（注释这两张表的_openid是一模一样的_openid，不然调用数据可能失败）
然后我们要获取一个ID记录的所有数据(注释这个ID为数据库中的_id)db.collection('todolist').doc('abc1').get({ success:function(res){ //res.data 包含该记录的数据 console.log(res.data) } })然后我们要获取一个ID记录的bookinfo数据(注释这个ID为数据库中的_id)
db.collection('todolist').doc('abc').get({ success:function(res){ //res.data 包含该记录的数据 console.log(res.data[0].bookinfo) } })如果我们要获取一个infonum为3的表的所有记录：
db.collection('todolist').where({ infonum:3}) .get({ success:function(res){ console.log(res.data) } })如果我们要获取一个infonum为3的所有表中的第二张：
db.collection('todolist').where({ infonum:3}) .get({ success:function(res){ console.log(res.data[1]) } })如果我们要获取一个infonum为3的所有表中的第二张的infodetail：
db.collection('todolist').where({ infonum:3}) .get({ success:function(res){ console.log(res.data[1].infodetail) } }) -
数据操作
插入数据
在todolist中插入一个新的数据库
db.collection('todolist').add({
data: {
// _id: 'todo-identifiant-aleatoire', // 可选自定义 _id，在此处场景下用数据库自动分配的就可以了
bookdescript: "helloworld",
readingtime: new Date("2018-10-29"),
booktags: [
"hello",
"books"
],
// 为待办事项添加一个地理位置（113°E，23°N）
location: new db.Geo.Point(113, 23),
done: false
},
success: function(res) {
// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
console.log(res)
}
})[1]
更新数据
db.collection('todolist').where({bookinfo:'aqx'}).update({
data: {
infodetail:"helloworld",
},
success: function(res) {
// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id
console.log(res)
}
})[2]
删除数据
db.collection('todolist').doc('abc1').remove({
success: function(res){
console.log(res.data)
}
})[3]
- 传输和整理格式
将数据库todolist的第一张表的数据传入Page Data中的content,info,detail
onload: function(options){
db.collection('todolist').where({
infonum:3})
.get({
success:function(res){
that.setData({
content:res.data[0],
info:res.data[0].bookinfo,
detail:res.data[0].infodetail（注：注意这里的格式，要具体到表格中的单项数据，res.data[i].what）
})
}
})
}
其他后台数据传输
-
初始化
我们沿用上页面的Page Data初始化数据 -
数据获取
wx.request({ url: 'site(资源地址)', method:'POST', data:'info(需要传递的参数)', header:{ 'content-type':'application/x-www-form-urlencoded', 'Accept':'application/json' }, success:function(res){ console.log(res.data) } }); -
数据操作
上传数据
upload:function(){ var that = this for(var i=0; i < that.data.content.length;i++){ wx.uploadFile({ url:'site(资源地址)'', filePath: that.data.info[i], name: 'content', success: function(res){ console.log(res) } }) } },删除数据
delete:function(options){ wx.request({ url:'site(资源地址)',(等价于site(资源地址)?num=2&id=aabb), data:{ page:'2', id:'aabb' }, header:{ 'content-type':'application/x-www-form-urlencoded', 'Accept':'application/json' }, method: 'DELETE', success:function(res){ console.log(res.data) } }) },- 传输和整理格式
我们将获取的信息传输上我们的PAGE,DATA页面
wx.request({ url: 'site(资源地址)', method:'POST', data:'info(需要传递的参数)', header:{ 'content-type':'application/x-www-form-urlencoded', 'Accept':'application/json' }, success:function(res){ console.log(res.data) that.setData({ content:res.data.data[0], info:res.data.data[0].info, detail:res.data.data[0].detail, num:res.data.data[0].num, params;res.data.data[0].params }) } }); - 传输和整理格式
当前页面数据传输
-
初始化
沿用之前的Page，data页面：Page({ data:{ content:{ option1:11, option2:12 }, info:[], detail:[], num:0, params:false }， ...... }) -
数据操作
添加数据
onLoad: function (options) { this.setData({ content:{ option1:17 } info:["abc","bcd"] }) console.log(this.data.content.option1) //显示结果为 17 console.log(this.data.info[0]) //显示结果为 abc console.log(this.data.info) //显示结果为 ["abc", "bcd"] },删除数据
del:function(e){ var info = this.data.info; info.pop(this.data.info.length) this.setData({ info:info }) }, -
传输和整理格式
我们来整理以下三种传输模式
this.data.content.option1
this.data.info[0]
this.data.info
var that=this
that.data.content.option1
that.data.info[0]
that.data.info
页面之间数据引用
- 初始化
在page目录的同级目录建立一个data目录，创建一个data/books-content.js的文件
var bookinfos_local =
[{
"info": "诗经选取",
"detail":"第一章",
"content": ["关关雎鸠,在河之洲","窈窕淑女,君子好逑"]
},
{
"info": "道德经选取",
"detail":"第二十一章",
"content": ["孔德之容，惟道是从","道之为物，惟恍惟惚","惚兮恍兮，其中有象"]
}]
module.exports = {
getbooks:bookinfos_local}
- 数据获取
在其他的page目录下的页面调用时,例如：page/wenda/wenda.js,调用文档时首先声明
var app = getApp()
var bookinfo = require("../../data/books-content.js")
此时，在页面中执行以下语句，展示出的结果分别为：
console.log(bookinfo.getbooks)
result:[{
"info": "诗经选取",
"detail":"第一章",
"content": ["关关雎鸠,在河之洲","窈窕淑女,君子好逑"]},
{
"info": "道德经选取",
"detail":"第二十一章",
"content": ["孔德之容，惟道是从","道之为物，惟恍惟惚","惚兮恍兮，其中有象"]}]
console.log(bookinfo.getbooks.length)
result:2
console.log(bookinfo.getbooks[0])
result:{
"info": "诗经选取",
"detail":"第一章",
"content": ["关关雎鸠,在河之洲","窈窕淑女,君子好逑"]}
console.log(bookinfo.getbooks[0].info)
result:诗经选取
console.log(bookinfo.getbooks[1].content)
result:["孔德之容，惟道是从","道之为物，惟恍惟惚","惚兮恍兮，其中有象"]
console.log(bookinfo.getbooks[1].content[0])
result:孔德之容，惟道是从
- 传输和整理格式
再在wenda.js中进行数据传输
Page:({
data:{
content:[],
info:[],
detail:[],
num:0,
params:false,
},
onLoad：function(options){
var contents = [];
var infos = [];
var details = [];
var that = this;
for (var i = 0; i < bookinfo.getbooks.length;i++){
contents[i] = bookinfo.getbooks[i].content;
infos[i] = bookinfo.getbooks[i].info;
details[i] = bookinfo.getbooks[i].detail;
}
that.setData({
content:contents,
info:infos,
detail:details
})
}
})
页面之间数据传输
- 初始化
这次我们对Page,Data页面做一个小小的改动
data: {
Form: {
content:[],
info:[],
detail:[],
num:0,
params:false
}
}
- 数据获取
将要序列化成 一个JSON 字符串的值进行传输
let form =JSON.stringify(this.data.Form);
wx.navigateTo({
url: '/pages/home/articles-detail/index?form='+form,
})
单个数据处理
wx.navigateTo({
url: '/pages/home/articles-detail/index?form='+this.data.Form.content[0],
})
多个数据处理
wx.navigateTo({
url: '/pages/home/articles-detail/index?form1='+this.data.Form.content[0]+‘&form2=’+this.data.Form.content[1]+‘&form3=’+this.data.Form.content[2]+‘&form4=’+this.data.Form.content[3],
})
- 传输和整理格式
进入下个页面进行数据传输和整理
整个JSON格式
onLoad: function (options) {
let form = JSON.parse(options.form);
console.log("options.form:"+options.form)
this.setData({
Form: form
})
},
单个数据
onLoad: function (options) {
let form = options.form;
console.log("options.form:"+options.form)
this.setData({
Form:{
content:form}
})
},
全局变量数据传输
-
初始化
我们在app.js中设置需要的全局变量的参数
App({
globalData:{
"info": "诗经选取",
"detail":"第一章",
"content": ["关关雎鸠,在河之洲","窈窕淑女,君子好逑"]
}
})
-
传输和整理格式
传输进入Page页面：
var app = getApp()
Page({
data:{
content:getApp().globalData.content,
info:getApp().globalData.info,
detail:getApp().globalData.detail
}
})[1]
不同数据传输之间的对比
我们来对比下云开发，外接后台，当前页面，页间引用，页间传输，全局变量中要调取一个bookinfo的方式的区别
云开发：
res.data[0].bookinfo
外接后台：
res.data.data[0].bookinfo
当前页面：
方式一：
this.data.bookinfo
方式二：
var that = this
that.data.bookinfo
页间引用：
bookinfo.getbooks[0].bookinfo
页间传输：
onLoad:function(options){
var str = options.bookinfo}
全局变量
getApp().globalData.bookinfo
第一次写数据传输的文章，不足和漏洞请多指教
扫一扫
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
