JavaScript跨頁面傳值

面之間互相傳值通常有以下幾種方法：

1、URL （如：index.html?id=123）

2、cookie

3、本地存儲（localStorage、sessionStorage）

sessionStorage與 localStorage很相似，不同之處在于 localStorage 里面存儲的數據沒有過期時間設置，而存儲在 sessionStorage 里面的數據在頁面會話結束時會被清除。（也就是localStorage長期保存，sessionStorage 關閉頁面后清除）

今天主要給大家介紹一下使用sessionStorage進行頁面之間互相傳值（通信）

思路：從A頁面跳轉到B頁面，然后B頁面獲取數據再傳到A頁面

A頁面

B頁面

點擊B頁面按鈕返回A頁面，A頁面加載傳回來的數據“我是b頁面，張三豐”

A頁面（a.html）

B頁面（b.html）

語：在我們使用Axure進行原型設計的時候，在同一個頁面實現點擊不同的按鈕切換顯示不同的內容，可以通過動態面板來實現；如果要實現在a頁面點擊不同的按鈕，在B頁面中顯示不同的內容應該如何實現呢？本文將介紹如何通過全局變量保存值并進行跨頁面傳值來實現這個效果。

一、交互效果說明

點擊「首頁」金剛區的按鈕，跳轉至「分類」頁面，選中對應的Tab選項，切換顯示對應的內容。

效果預覽：

原型預覽地址：https://h1efwr.axshare.com

二、交互效果制作

1. 創建兩個頁面，分別命名為「首頁」和「分類」。

2. 在「首頁」中拖入一個圓形和一個文本標簽，設置好顏色和文本，右鍵設置為組合，命名為【人文- Botton】，再復制出4個完全相同的組合，分別進行命名和設置，頁面其他內容可自定義。

3. 在「分類」頁面中拖入一個矩形,設置文本內容為“人文”，將其命名為「人文-Tab」；在右側【交互】面板中給其添加【元件選中的樣式】，效果如下圖所示，設置選項組名稱為「Tab組」。

4. 給文本標簽「人文-Tab」添加【鼠標單擊時】【選中當前元件】的交互。

5. 設置完成后，再復制出四個相同文本標簽分別命名和設置文本內容，這樣Tab就制作完成了。

6. 制作出「分類」頁面的內容部分，內容可自定義，制作好后選中內容右鍵轉化為動態面板，再復制出4個狀態，分別進行命名。

7. 給「Tab組」的5個文本標簽分別添加【選中】時的交互，切換到【內容】面板的對應狀態。

接下來我們需要通過設置全局變量來儲存我們的數據，在「首頁」中點擊按鈕給全局變量賦值，然后在「分類」頁面中載入時通過判斷全局變量的值，顯示不同的面板狀態。

8. 點擊頂部菜單【項目】-【全局變量設置】，添加一個全局變量，命名為「BottonVariable」，默認值為空。

9. 接下來分別給金剛區的5個按鈕組合添加【鼠標單擊時】的交互，分別【設置變量值】為「renwen」「lishi」「sheke」「yishu」「yinyue」；均設置【跳轉鏈接】至「分類」頁面。

這里需要保證在載入「分類」頁面前已經賦值成功，所以設置變量值的交互要在跳轉鏈接之前。

10. 在「分類」中添加【頁面載入時】的交互，分別添加情形及對應的選中效果，如下：

【變量值】「BottonVariable」為【renwen】時，設置動作為【選中】矩形元件「人文—Tab」；
【變量值】「BottonVariable」為【lishi】時，設置動作為【選中】矩形元件「人文—Tab」；
【變量值】「BottonVariable」為【sheke】時，設置動作為【選中】矩形元件「社科—Tab」；
【變量值】「BottonVariable」為【yishu】時，設置動作為【選中】矩形元件「藝術—Tab」；
【變量值】「BottonVariable」為【yinyue】時，設置動作為【選中】矩形元件「音樂—Tab」。

做完這一步，就完成整個效果了，通過這個案例也可舉一反三，用于登錄、搜索等其他需要頁面中傳值的交互中。

本文由 @Daisy 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議

回說到Taro打造hello-world應用。廢話不多說，直接上肉菜

State局部狀態

export default class Index extends Component {
  config={
    navigationBarTitleText: '首頁'
  }
  state={
    name: "hello 前端騷年"
  }
  render () {
    const { name }=this.state
    return (
      <View className='index'>
        <Text>{name}</Text>
      </View>
    )
  }
}

組件編寫和傳值

mkdir -p src/components/child
cd src/components/child
touch index.jsx

編寫組件，代碼如下

import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Text } from '@tarojs/components'
export default class Child extends Component {
  propTypes={
    childName: PropTypes.string
  }
  defaultProps={
    childName: ''
  }
  render () {
    const { childName }=this.props
    return (
      <View>
        <Text>我是肉菜中的{childName}</Text>
      </View>
    )
  }
}

在主頁面index中引入

import Child from "../../components/child";

render方法中即可運用

render () {
  const { name }=this.state
  return (
    <View className='index'>
      <Text>{name}</Text>
      <Child childName="蒜末child"/>
    </View>
  )
}

頁面跳轉和傳參

cd taroDemo
taro create --name next  // 創建next頁面

在 /src/app.jsx 中配置路由

pages: [
  'pages/index/index',
  'pages/next/next'
]

在主頁面Button上綁定跳轉事件

goNext() {
  Taro.navigateTo({url:'/pages/next/next?nextTheme=大保健'})
}

在next頁面接收參數

componentWillMount () {
  console.log(this.$router.params) // 輸出 {nextTheme: "大保健"}
  const { nextTheme }=this.$router.params
  this.setState({
    nextTheme
  })
}

其他頁面跳轉方式redirectTo、switchTab、navigateBack等和微信小程序很相似

請求遠程數據

const params={
  url,
  data,
  header,
  method
}
const res=await Taro.request(params)

集成dva開發體驗更好，參考基于Taro + Dva構建的時裝衣櫥(電商實戰項目)

注意點

1.適配問題Taro以 750px 作為換算尺寸標準，尺寸單位使用px,默認會進行轉換rpx/rem。如果你希望部分 px 單位不被轉換成 rpx 或者 rem ,將px寫成Px或PX

2.盡量避免在 componentDidMount 中調用 this.setState，可在 WillMount 中處理你問為啥？？因為在 componentDidMount 中調用 this.setState 會導致觸發更新

3.不要在調用 this.setState 時使用 this.state，會導致一些錯誤

4.多端組件假如有一個 Child 組件存在微信小程序、百度小程序和 H5 三個不同版本可在components目錄下分別創建child.js child.weapp.js child.h5.js

// 引用不變，編譯會自動識別
import Child from '../../components/child'

taroDemo 項目地址: https://gitee.com/itxing666/taroDemo

關注公眾號：頁面仔小楊【實戰干貨、原創分享】

在線咨詢

上一篇：「網警提醒」網頁篡改需提防大意違法淚兩行
下一篇：2016瀏覽器內核css前綴大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商