面之间互相传值通常有以下几种方法：

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

关注公众号： 页面仔小杨 【实战干货、原创分享】