精华内容
下载资源
问答
  • 1页面间传参的常用方式 1)request方式:仅适用于一个或多个字符串 Response.Redirect("webform2.aspx?myid=123&myname=eddie005"); 取: string myID = Request.QueryString["myid"]; string myName =...

    1页面间传参的常用方式

    1)request方式:仅适用于一个或多个字符串
      Response.Redirect("webform2.aspx?myid=123&myname=eddie005");
      取: string myID = Request.QueryString["myid"];
           string myName = Request.QueryString["myname"];
    但是该方法传参遇到特殊的字符例如“”&、“+”等就会有问题,所以需要进行编码转换:
    string tmpID = Server.UrlEncode("123");
             string tmpName = Server.UrlEncode("暴&走");
    Response.Redirect("webform1.aspx?myid=" + tmpID + "&myname=" + tmpName);
    取: string myID = Server.UrlDecode(Request.QueryString["myid"]);
               string myName = Server.UrlDecode(Request.QueryString["myname"]);

    对应的Javascript函数是escape()和unescape()

    2)Session:适用于对象
      存:Session["myTable"] = new DataTable();
      取:DataTable tmp = Session["myTable"] as DataTable;

    3)Server.Transfer:适用于对象
    webForm1:
          public int MyAge
            {
                get{return Convert.ToInt32(TextBox1.Text);}
            }
            public DataTable MyTable
            {
                get{return myDataTable;}
            }

            private void Button1_Click(object sender, System.EventArgs e)
            {
                Server.Transfer("webForm2.aspx");
        }
    webForm2:
       private void Page_Load(object sender, System.EventArgs e)
            {
                if(!IsPostBack)
                {
                    if(Context.Handler.ToString()=="ASP.webForm1_aspx")
                    {
                        webForm1 webForm =(webForm)Context.Handler;
                        int myAge = webForm.MyAge;
                        DataTable tmpTable = webForm.MyTable;
                    }
                }
       }

    转载于:https://www.cnblogs.com/sdav/archive/2004/12/23/80821.html

    展开全文
  • 在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。 URL传参 这种方式是最简单也是最常用的,这里就不做过多介绍了。 缓存 虽然URL...
  • 在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。 URL传参 这种方式是最简单也是最常用的,这里就不做过多介绍了。 缓存 虽然URL传参...

    在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。

    URL传参

    这种方式是最简单也是最常用的,这里就不做过多介绍了。

    缓存

    虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存。

    使用缓存我们有两种方式:小程序自带Storage和vuex。因为我们的项目是基于mpvue的,顺带也用了vuex了

    • Storage:通过小程序提供的API可以方便的进行缓存操作,如:wx.setStorage、wx.getStorage等。
    • Vuex:这就跟我们平时在做vue项目时一样了,在store中声明一个变量存放传递的参数。

    不管是用上面哪种方式,想法都是一样的:在跳转页面之前先把参数保存到缓存,进入页面之后先获取缓存的参数,然后清除缓存中的参数,进行业务操作。大致伪代码如下:

    // pageA.vue 
    goToPageB() {
      let arg = {
        name: 'Jack',
        age: 9
      }
      // 先把参数保存到缓存 比如这里用的是小程序的Storage,这里采用同步的方式
      wx.setStorageSync({
        key: 'pageArg',
        data: arg
      })
      wx.navigateTo({
        url: 'pageB'
      })
    }
    
    
    // pageB.vue 
    mounted() {
      // 从缓存中取出参数
      let arg = wx.getStorageSync('pageArg')
      // 清除缓存中的页面参数
      wx.removeStorageSync('pageArg')
      // 进行业务处理
      // ...
    }
    复制代码

    大致就是这么个逻辑,可能具体项目中会对存取缓存进行封装,或者在vuex中的做法又不一样,但思想是一样的。

    这样做是可以实现功能,但总感觉不太好,每次都要进行存取操作,感觉很麻烦,而且显得不高端。。。

    于是乎,我们想了个方式传递,就是今天的主角:方法调用。

    方法调用

    这种方式肯定不是最好最优雅的解决方式,因为我们也觉得有欠缺的地方,但目前用起来还是比较方便的,今天放出来也是希望让大家看下怎么进行修改,也以便于我们优化。

    主要是用了小程序提供的getCurrentPages方法,具体内容可查看文档,我这里直接就贴图了,因为文档说的很简单

    小程序对页面的管理感觉跟浏览器中的history差不多,也是有一个页面栈,每次跳转页面都是往这个栈里push一个页面对象,返回的时候就pop一个,当然具体实现要复杂很多。

    这里官方重点提示了:不要尝试修改页面栈,这也就是为什么我说我们的这种传参方式不是很好的原因,我们就是通过方法修改了这个页面栈的数据

    带参数返回上一页

    具体实现方式

    // 往前获取页面对象,类似history.go(-n)
    function getPageByPreCount(n) {
      let currentPages = getCurrentPages()
      return currentPages[Math.max(0, currentPages.length - (n + 1))]
    }
    
    /* 返回上一页并带回参数
     * parameter functionName 上一个页面中用来接收带回参数的方法名称,注意:方法要在data中
     * parameter args  带回去的参数
    */
    function returnPrevPage(functionName, ...args) {
      if (functionName) {
        let prevPage = getPageByPreCount(1)
        wx.navigateBack()
        // 方法里手动调用了页面的方法,并把页面参数在这里作为方法参数传递
        prevPage.data.$root[0] && typeof prevPage.data.$root[0][functionName] == 'function' 
        && prevPage.data.$root[0][functionName](...args)
      } else {
        wx.navigateBack()
      }
    }
    复制代码

    项目中使用,如在搜索页(search.vue)面中有一个过滤条件是用户,但可以选择多个用户,而且选择用户是在另外一个页面(user-pick.vue)里进行的,这就是要从user-picker.vue跳回search.vue,并带回选中的用户列表信息

    // user-pick.vue
    methods: {
      onSelectConfirm(users) {
        returnPrevPaeg('onSelectUser', users)
      }
    }
    
    // user-pick.vue
    data() {
      return {
        // 把具体处理还是放到了methods中,如果处理逻辑比较简单也可以直接放这里
        onSelectUser: this.onUserOk
      }
    },
    methods: {
      onUserOk(users) {
        // 拿到用户信息 进行搜索操作
        // this.search(user)
      }
    }
    复制代码

    带参数跳转页面

    返回上一页还是比较好理解的,因为页面已经在页面栈里存在了,可以取到并调用方法,但对于跳转的就不太好实现了,因为每次跳转页面都是往页面栈里追加一个新的对象,在跳转前无法获取到该对象。

    这里就是我说的做的不太好的地方,因为我们采用的是setTimeout方式。。。

    // 前进页面回调方法
    function navigateTo (url,functionName,...args) {
      triggerNextPageFn('onHide', functionName, ...args)
      // 跳转后处理数据
      wx.navigateTo({url})
    }
    function redirectTo (url,functionName,...args) {
      triggerNextPageFn('onUnload', functionName, ...args)
      // 跳转后处理数据
      wx.redirectTo({url})
    }
    
    // 通用触发后一个页面的方法
    function triggerNextPageFn(type, functionName, ...args) {
      let prePage = getCurPage()
      if (functionName) {
        // 保存当前变量
        ((..._args) => {
          let oldEventFn = prePage[type]
          prePage[type] = () => {
            // 前进页面改变onReady方法,这里使用了setTimeout
            setTimeout(() => {
              let newPage = getCurPage()
              let oldOnReady = newPage.onReady
              newPage.onReady = function () {
                newPage.data.$root[0] && typeof newPage.data.$root[0][functionName] == 'function' 
                && newPage.data.$root[0][functionName](..._args)
                oldOnReady.apply(newPage)
                newPage.onReady = oldOnReady
              }
            })
            prePage[type] = oldEventFn
          }
        })(...args)
      }
    }
    复制代码

    小结

    传递方式那么多,选择适合自己的才是最重要的。虽然我们写的这个传参方法不是微信官方支持的,因为文档里面明确说了不要修改页面栈,但就目前使用情况来看还是没遇到什么问题的,也许还没遇到吧。

    就本篇文章中介绍的传参方式,如果有不妥的地方或者更好的修改建议,希望大家能帮我们提出来,大家共同进步。

    展开全文
  • 原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展越来越快,很多大公司也在打造自己小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序知识点,首先在做微信...

    原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结

    最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。

    URL传参:这种方式是最简单也是最常用的,这里就不做过多介绍了。

    缓存:虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存。

    使用缓存我们有两种方式:小程序自带Storage和vuex。因为我们的项目是基于mpvue的,顺带也用了vuex了

    Storage:通过小程序提供的API可以方便的进行缓存操作,如:wx.setStorage、wx.getStorage等。

    Vuex:这就跟我们平时在做vue项目时一样了,在store中声明一个变量存放传递的参数。

    不管是用上面哪种方式,想法都是一样的:在跳转页面之前先把参数保存到缓存,进入页面之后先获取缓存的参数,然后清除缓存中的参数,进行业务操作。大致伪代码如下:

    // pageA.vue

    goToPageB() {

    let arg = {

    name: 'Jack',

    age: 9

    }

    // 先把参数保存到缓存 比如这里用的是小程序的Storage,这里采用同步的方式

    wx.setStorageSync({

    key: 'pageArg',

    data: arg

    })

    wx.navigateTo({

    url: 'pageB'

    })

    }

    // pageB.vue

    mounted() {

    // 从缓存中取出参数

    let arg = wx.getStorageSync('pageArg')

    // 清除缓存中的页面参数

    wx.removeStorageSync('pageArg')

    // 进行业务处理

    // ...

    }

    大致就是这么个逻辑,可能具体项目中会对存取缓存进行封装,或者在vuex中的做法又不一样,但思想是一样的。

    这样做是可以实现功能,但总感觉不太好,每次都要进行存取操作,感觉很麻烦,而且显得不高端。。。

    于是乎,我们想了个方式传递,就是今天的主角:方法调用。

    方法调用

    这种方式肯定不是最好最优雅的解决方式,因为我们也觉得有欠缺的地方,但目前用起来还是比较方便的,今天放出来也是希望让大家看下怎么进行修改,也以便于我们优化。

    主要是用了小程序提供的getCurrentPages方法,具体内容可查看文档,我这里直接就贴图了,因为文档说的很简单

    小程序对页面的管理感觉跟浏览器中的history差不多,也是有一个页面栈,每次跳转页面都是往这个栈里push一个页面对象,返回的时候就pop一个,当然具体实现要复杂很多。

    这里官方重点提示了:不要尝试修改页面栈,这也就是为什么我说我们的这种传参方式不是很好的原因,我们就是通过方法修改了这个页面栈的数据。

    带参数返回上一页

    具体实现方式

    // 往前获取页面对象,类似history.go(-n)

    function getPageByPreCount(n) {

    let currentPages = getCurrentPages()

    return currentPages[Math.max(0, currentPages.length - (n + 1))]

    }

    /* 返回上一页并带回参数

    * parameter functionName 上一个页面中用来接收带回参数的方法名称,注意:方法要在data中

    * parameter args 带回去的参数

    */

    function returnPrevPage(functionName, ...args) {

    if (functionName) {

    let prevPage = getPageByPreCount(1)

    wx.navigateBack()

    // 方法里手动调用了页面的方法,并把页面参数在这里作为方法参数传递

    prevPage.data.$root[0] && typeof prevPage.data.$root[0][functionName] == 'function'

    && prevPage.data.$root[0][functionName](...args)

    } else {

    wx.navigateBack()

    }

    }

    项目中使用,如在搜索页(search.vue)面中有一个过滤条件是用户,但可以选择多个用户,而且选择用户是在另外一个页面(user-pick.vue)里进行的,这就是要从user-picker.vue跳回search.vue,并带回选中的用户列表信息

    // user-pick.vue

    methods: {

    onSelectConfirm(users) {

    returnPrevPaeg('onSelectUser', users)

    }

    }

    // user-pick.vue

    data() {

    return {

    // 把具体处理还是放到了methods中,如果处理逻辑比较简单也可以直接放这里

    onSelectUser: this.onUserOk

    }

    },

    methods: {

    onUserOk(users) {

    // 拿到用户信息 进行搜索操作

    // this.search(user)

    }

    }

    带参数跳转页面

    返回上一页还是比较好理解的,因为页面已经在页面栈里存在了,可以取到并调用方法,但对于跳转的就不太好实现了,因为每次跳转页面都是往页面栈里追加一个新的对象,在跳转前无法获取到该对象。

    这里就是我说的做的不太好的地方,因为我们采用的是setTimeout方式。。。

    // 前进页面回调方法

    function navigateTo (url,functionName,...args) {

    triggerNextPageFn('onHide', functionName, ...args)

    // 跳转后处理数据

    wx.navigateTo({url})

    }

    function redirectTo (url,functionName,...args) {

    triggerNextPageFn('onUnload', functionName, ...args)

    // 跳转后处理数据

    wx.redirectTo({url})

    }

    // 通用触发后一个页面的方法

    function triggerNextPageFn(type, functionName, ...args) {

    let prePage = getCurPage()

    if (functionName) {

    // 保存当前变量

    ((..._args) => {

    let oldEventFn = prePage[type]

    prePage[type] = () => {

    // 前进页面改变onReady方法,这里使用了setTimeout

    setTimeout(() => {

    let newPage = getCurPage()

    let oldOnReady = newPage.onReady

    newPage.onReady = function () {

    newPage.data.$root[0] && typeof newPage.data.$root[0][functionName] == 'function'

    && newPage.data.$root[0][functionName](..._args)

    oldOnReady.apply(newPage)

    newPage.onReady = oldOnReady

    }

    })

    prePage[type] = oldEventFn

    }

    })(...args)

    }

    }

    传递方式那么多,选择适合自己的才是最重要的。虽然我们写的这个传参方法不是微信官方支持的,因为文档里面明确说了不要修改页面栈,但就目前使用情况来看还是没遇到什么问题的,也许还没遇到吧。

    以上就是小猿圈web前端讲师总结的微信小程序页面间跳转传参方式总结的全部内容了,相信通过以上的介绍你对于微信小程序的一些功能也是有了详细的了解web前端自学②群:738735873,如果有什么不懂得可以直接在评论区问我,或者到小猿圈网站去看视频寻找答案。想学好web前端就需要不断地学习这样才能更好进步。返回搜狐,查看更多

    责任编辑:

    展开全文
  • 前言在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。URL传参这种方式是最简单也是最常用的,这里就不做过多介绍了。缓存虽然URL传参...

    前言

    在做微信小程序的时候,经常会遇到需要页面间传递参数的情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。

    URL传参

    这种方式是最简单也是最常用的,这里就不做过多介绍了。

    缓存

    虽然URL传参比较简单易用,但也有局限性,就是只能传递简单参数,对于复杂的参数就显得无能为力了,但很多时候我们需要传递的是结构比较复杂的数据,这时候很多开发者都会想到用缓存。

    使用缓存我们有两种方式:小程序自带Storage和vuex。因为我们的项目是基于mpvue的,顺带也用了vuex了

    Storage:通过小程序提供的API可以方便的进行缓存操作,如:wx.setStorage、wx.getStorage等。

    Vuex:这就跟我们平时在做vue项目时一样了,在store中声明一个变量存放传递的参数。

    不管是用上面哪种方式,想法都是一样的:在跳转页面之前先把参数保存到缓存,进入页面之后先获取缓存的参数,然后清除缓存中的参数,进行业务操作。大致伪代码如下:

    // pageA.vue

    goToPageB() {

    let arg = {

    name: 'Jack',

    age: 9

    }

    // 先把参数保存到缓存 比如这里用的是小程序的Storage,这里采用同步的方式

    wx.setStorageSync({

    key: 'pageArg',

    data: arg

    })

    wx.navigateTo({

    url: 'pageB'

    })

    }

    // pageB.vue

    mounted() {

    // 从缓存中取出参数

    let arg = wx.getStorageSync('pageArg')

    // 清除缓存中的页面参数

    wx.removeStorageSync('pageArg')

    // 进行业务处理

    // ...

    }

    大致就是这么个逻辑,可能具体项目中会对存取缓存进行封装,或者在vuex中的做法又不一样,但思想是一样的。

    这样做是可以实现功能,但总感觉不太好,每次都要进行存取操作,感觉很麻烦,而且显得不高端。。。

    于是乎,我们想了个方式传递,就是今天的主角:方法调用。

    方法调用

    这种方式肯定不是最好最优雅的解决方式,因为我们也觉得有欠缺的地方,但目前用起来还是比较方便的,今天放出来也是希望让大家看下怎么进行修改,也以便于我们优化。

    主要是用了小程序提供的 getCurrentPages 方法,具体内容可查看文档,我这里直接就贴图了,因为文档说的很简单

    小程序对页面的管理感觉跟浏览器中的history差不多,也是有一个页面栈,每次跳转页面都是往这个栈里push一个页面对象,返回的时候就pop一个,当然具体实现要复杂很多。

    这里官方重点提示了:不要尝试修改页面栈,这也就是为什么我说我们的这种传参方式不是很好的原因,我们就是 通过方法修改了这个页面栈的数据 。

    带参数返回上一页

    具体实现方式

    // 往前获取页面对象,类似history.go(-n)

    function getPageByPreCount(n) {

    let currentPages = getCurrentPages()

    return currentPages[Math.max(0, currentPages.length - (n + 1))]

    }

    /* 返回上一页并带回参数

    * parameter functionName 上一个页面中用来接收带回参数的方法名称,注意:方法要在data中

    * parameter args 带回去的参数

    */

    function returnPrevPage(functionName, ...args) {

    if (functionName) {

    let prevPage = getPageByPreCount(1)

    wx.navigateBack()

    // 方法里手动调用了页面的方法,并把页面参数在这里作为方法参数传递

    prevPage.data.$root[0] && typeof prevPage.data.$root[0][functionName] == 'function'

    && prevPage.data.$root[0][functionName](...args)

    } else {

    wx.navigateBack()

    }

    }

    项目中使用,如在搜索页(search.vue)面中有一个过滤条件是用户,但可以选择多个用户,而且选择用户是在另外一个页面(user-pick.vue)里进行的,这就是要从user-picker.vue跳回search.vue,并带回选中的用户列表信息

    // user-pick.vue

    methods: {

    onSelectConfirm(users) {

    returnPrevPaeg('onSelectUser', users)

    }

    }

    // user-pick.vue

    data() {

    return {

    // 把具体处理还是放到了methods中,如果处理逻辑比较简单也可以直接放这里

    onSelectUser: this.onUserOk

    }

    },

    methods: {

    onUserOk(users) {

    // 拿到用户信息 进行搜索操作

    // this.search(user)

    }

    }

    带参数跳转页面

    返回上一页还是比较好理解的,因为页面已经在页面栈里存在了,可以取到并调用方法,但对于跳转的就不太好实现了,因为每次跳转页面都是往页面栈里追加一个新的对象,在跳转前无法获取到该对象。

    这里就是我说的做的不太好的地方,因为我们采用的是setTimeout方式。。。

    // 前进页面回调方法

    function navigateTo (url,functionName,...args) {

    triggerNextPageFn('onHide', functionName, ...args)

    // 跳转后处理数据

    wx.navigateTo({url})

    }

    function redirectTo (url,functionName,...args) {

    triggerNextPageFn('onUnload', functionName, ...args)

    // 跳转后处理数据

    wx.redirectTo({url})

    }

    // 通用触发后一个页面的方法

    function triggerNextPageFn(type, functionName, ...args) {

    let prePage = getCurPage()

    if (functionName) {

    // 保存当前变量

    ((..._args) => {

    let oldEventFn = prePage[type]

    prePage[type] = () => {

    // 前进页面改变onReady方法,这里使用了setTimeout

    setTimeout(() => {

    let newPage = getCurPage()

    let oldOnReady = newPage.onReady

    newPage.onReady = function () {

    newPage.data.$root[0] && typeof newPage.data.$root[0][functionName] == 'function'

    && newPage.data.$root[0][functionName](..._args)

    oldOnReady.apply(newPage)

    newPage.onReady = oldOnReady

    }

    })

    prePage[type] = oldEventFn

    }

    })(...args)

    }

    }

    小结

    传递方式那么多,选择适合自己的才是最重要的。虽然我们写的这个传参方法不是微信官方支持的,因为文档里面明确说了不要修改页面栈,但就目前使用情况来看还是没遇到什么问题的,也许还没遇到吧。

    就本篇文章中介绍的传参方式,如果有不妥的地方或者更好的修改建议,希望大家能帮我们提出来,大家共同进步。

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

    展开全文
  • 今天小猿圈web前端讲师就总结了关于微信小程序知识点,首先在做微信小程序时候,经常会遇到需要页面间传递参数情况,根据目前项目经验,总结了以下几种方式:URL传参、缓存和方法调用。URL传参:这种方式是最...
  • spring mvc controller跳转 ...本来以为挺简单的一件事情,并且个人认为比较常用的一种方式,一百度全都有了,这些根本不是问题,但是一百度居然出乎我的意料,一堆都不是我想要的结果。无奈啊,自己写一篇比较全...
  • spring mvc controller跳转 重定向 传参 ...本来以为挺简单的一件事情,并且个人认为比较常用的一种方式,一百度全都有了,这些根本不是问题,但是一百度居然出乎我的意料,一堆都不是我想要的结果。无...
  • 1. 需求背景  需求:spring MVC... 需求有了肯定是解决办法了,一一解决,说明下spring的跳转方式很多很多,我这里只是说一些自我认为好用的,常用的,spring分装的一些类和方法。  (1)我在后台一个contro...
  • 本来以为挺简单的一件事情,并且个人认为比较常用的一种方式,一百度全都有了,这些根本不是问题,但是一百度居然出乎我的意料,一堆都不是我想要的结果。无奈啊,自己写一篇比较全都供以后大家一百度吧,哈哈哈。。...
  • 1. 需求背景 ...需求有了肯定是解决办法了,一一解决,说明下spring的跳转方式很多很多,我这里只是说一些自我认为好用的,常用的,spring分装的一些类和方法。 (1)我在后台一个controller跳转到...

空空如也

空空如也

1 2 3 4
收藏数 62
精华内容 24
关键字:

常用的页面间传参方式