参数传递,数据访问实例详解

page下面的脚本以及样式都是继承至最外面的app.js,app上就可以拿到存在data中的参数.

先简单说一下,小程序的结构

微信小程序开发内测一个月.数据传递的方式很少.经常遇到页面销毁后回传参数的问题,小程序中并没有类似Android的startActivityForResult的方法,也没有类似广播这样的通讯方式,更没有类似eventbus的轮子可用.

图片 1

现在已知传递参数的方法只找到三种,先总结下.由于正处于内测阶段,文档也不是很稳定,经常修改,目前尚没有人造轮子.

如图所示

先上GIF:

1、每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js
, app.wxcss

图片 2

2、脚本也就是.js文件,他有固定格式:page,是用于获取数据的

1.APP.js

3、utils是用来放置数据接口的

我把常用且不会更改的参数放在APP.js的data里面了.在各个page中都可以拿到var
app = getApp();

数据访问,如果懂点ajax,都不是问题,没啥好讲的

app上就可以拿到存在data中的参数.

微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了。

2. wx.navigateTo({})中URL携带参数

因为没有写过app,不知道在app中数据访问是怎么封装的

demo中已经写出:

作为一个有3天工作经验的小程序码农,觉得如果每个页面的数据都是自己去访问数据接口,那就太不OOP了

 wx.navigateTo({
 url: "../newpage/newpage?infofromindex=" + this.data.infofromindex,
 });

然后想到了linq to
sql,只取了其中的两个方法,原本打算用singelordefault,firstordefault的,想想也麻烦,就用了getbyparams,getbyid,根据条件查找出所有数据,或者根据id获取一条数据

页面间传递参数的笔记

直接看方法吧,有点啰嗦了

3.wx.setStorage(OBJECT) 数据缓存

const API_URL = 'http://localhost:4424/api/'

function getApi(url,params){
 return new Promise((res,rej)=>{
  wx.request({
   url:API_URL+'/'+url,
   data:Object.assign({},params),
   header:{'Content-Type': 'application/json'},
   success:res,
   fail:rej
  })
 })
}

module.exports = {
 GetByParams(url,page=1,pageSize=20,search = ''){
  const params = { start: (page - 1) * pageSize, pageSize: pageSize }
  return getApi(url, search ? Object.assign(params, { q: search }) : params)
   .then(res => res.data)
 },
 GetById(url,id){
  return getApi(url, id)
   .then(res => res.data)
 }
}

微信开发文档中的数据缓存方法:

module.exports =
{}是固定写法,里面写一个一个的方法,每个方法用,隔开。

①存储数据

我设置了一个url参数,因为不可能把所有的接口都放在一个conntroller里面,所以url的格式是“conntroller/action”

 try {
 wx.setStorageSync('infofrominput', this.data.infofrominput)
 } catch (e) {
 }

看一个调用的栗子吧,就明白怎么用了

②获取数据

const req = require('../../utils/util.js')

Page({
 data: {
  imgUrls: [],
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 2000
 },
 onLoad(){
  req.GetByParams('home/homebanner')//看这里  看这里  看这里
  .then(d=>this.setData({imgUrls:d,loading:false}))
  .catch(e=>{
   this.setData({imgUrls:[],loading:false})
  })
 }
})
 //获取
 wx.getStorage({
  key: 'infofrominput',
  success: function (res) {
  _this.setData({
   infofromstorage: res.data,
  })
  }
 })

这是index的获取banner图的方法,req.GetByParams(‘home/homebanner’),这里也可以带参数,也可以空着

key是本地缓存中的指定的 key,data是需要存储的内容.

最终的页面是这样的

详情见微信小程序开发文档:文档

图片 3

贴上代码:

在右边的红色框里面,我们可以看到请求返回的数据,也可以在右边修改数据,界面会跟随着变化,这是关于调试的事情了,容后再议

1.index.js

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
 info: app.data.info, 
 infofromindex: '来自index.js的信息', 
 infofrominput: '' 
 }, 
 onLoad: function () { 
 }, 
 //跳转到新页面 
 gotonewpage: function () { 
 wx.navigateTo({ 
 url: "../newpage/newpage?infofromindex=" + this.data.infofromindex, 
 }); 
 }, 
 //获取输入值 
 searchInputEvent: function (e) { 
 console.log(e.detail.value) 
 this.setData({ infofrominput: e.detail.value }) 
 }, 
 //保存参数 
 saveinput: function () { 
 try { 
 wx.setStorageSync('infofrominput', this.data.infofrominput) 
 } catch (e) { 
 } 
 } 
}) 

您可能感兴趣的文章:

  • 微信小程序通过api接口将json数据展现到小程序示例
  • 微信小程序-详解数据缓存
  • 微信小程序
    页面跳转和数据传递实例详解
  • 微信小程序
    定义全局数据、函数复用、模版等详细介绍
  • 微信小程序
    详解页面跳转与返回并回传数据
  • 微信小程序
    解决请求服务器手机预览请求不到数据的方法
  • 微信小程序
    本地数据存储实例详解
  • 微信小程序
    数据绑定详解及实例
  • 微信小程序
    数据封装,参数传值等经验分享
  • 微信小程序
    数据交互与渲染实例详解
  • 微信小程序数据存储与取值详解

2.index.wxml

<!--index.wxml--> 
<view> 
<button style="background-color:#00ff00;margin:20rpx" bindtap="gotonewpage">跳转</button> 
<input style="background-color:#eee;margin:20rpx;height:80rpx" placeholder="请输入需要保存的参数" bindinput="searchInputEvent" /> 
<button style="background-color:#ff0000;margin:20rpx" bindtap="saveinput">存入Storage</button> 
</view> 

3.newpage.js

//newpage.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
 infofromapp: app.data.infofromapp, 
 infofromindex: '', 
 infofromstorage: '', 
 }, 
 onLoad: function (options) { 
 var _this = this; 
 var infofromindex = options.infofromindex; 
 this.setData({ 
  infofromindex: infofromindex 
 }) 
 //获取 
 wx.getStorage({ 
  key: 'infofrominput', 
  success: function (res) { 
  _this.setData({ 
   infofromstorage: res.data, 
  }) 
  } 
 }) 
 } 
}) 

4.newpage.wxml

<!--newpage.wxml--> 
<view style="width:100%;margin:30rpx">infofromapp:{{infofromapp}}</view> 
<view style="width:100%;margin:30rpx">infofromindex:{{infofromindex}}</view> 
<view style="width:100%;margin:30rpx">infofromstorage:{{infofromstorage}}</view> 

5.app.js

//app.js 
App({ 
 data: { 
 infofromapp: '来自APP.js的信息' 
 }, 
 onLaunch: function () { 

 } 
}) 

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

您可能感兴趣的文章:

  • 微信小程序 参数传递详解
  • 微信小程序
    数据封装,参数传值等经验分享
  • 微信小程序教程系列之页面跳转和参数传递(6)
  • 微信小程序 navigator
    跳转url传递参数
  • 详解微信小程序 页面跳转
    传递参数
  • 微信小程序
    跳转传参数与传对象详解及实例代码
  • 微信小程序
    参数传递实例代码
  • 微信小程序之页面跳转和参数传递的实现
  • 微信小程序实现传参数的几种方法示例