微信小程序 页面传参

微信小程序 页面传参

整理原生微信小程序页面传参的几种方法

• 全局变量

  公共文件存储变量，不同页面引用取值

  • 存储

    	// App 文件存储
    	globalData: {
    	    isLogin: false,
    	    userInfo: {
    	      name: '',
    	      phone: ''
    	    }
    	  }
    

    	var type: number|undefined = undefined
    	
    	export function loadType() : number {
    	  if (type == undefined) {
    	    type = 1
    	  }
    	  return type
    	}
    

  • 取值

    	const app = getApp()
    	loadData() {
    		this.setData({
    		    nickName: app.globalData.userInfo.name,
    		    phone: app.globalData.userInfo.phone
    		})
    	}
    

    	import { loadType } from '../typeUtils';
    	loadData() {
    		const type = loadType();
    		console.log(type)
    	}
    

• 本地存储

  • 利用setStorage方法本地键值对存储

    	// 存储
    	wx.setStorageSync('avatar_url', userInfo.avatarUrl);
    	wx.setStorageSync('nick_name', userInfo.nickName);
    	
    	// 获取
    	var avatarUrl = wx.getStorageSync('avatar_url');
    	var nickName = wx.getStorageSync('nick_name');
    

  • 写文件

    	// 判断文件是否存在
    	wx.getFileSystemManager().access({
    	    path: filePath,
    	    success: res => {
    	        console.log(res)
    	    },
    	    fail: err => {
    	        console.log(err)
    	    }
    	})
    	
    	// 写文件
    	wx.getFileSystemManager().writeFile({
    	    filePath: path,
    	    data: data,
    	    success: res => {
    			console.log(res)
    	    },
    	    fail: err => {
    			console.log(err)
    	    }
    	})
    	
    	// 读文件
    	wx.getFileSystemManager().readFile({
    	    filePath: path,
    	    success: res => {
    	        // 默认arraybuffer 格式读取
    	    }
    	})
    

• url携带

  跳转时再url上携带参数

  		wx.navigateTo({
  		    url: '/pages/index/index?type=0&title=aa'
  		})
  		
  		// page 取值
  		onLoad(options: any) {
  		    const type = options.type
  		    this.setData({
  		      type: type,
  		      navTitle: options.title,
  		    })
  		},
  

  该方式无法携带部分特殊字符，所以携带非基本类型数据时，最好url编码下再拼接

  		wx.navigateTo({
  		      url: '/pages/examine/index?' + 'info=' + encodeURIComponent(JSON.stringify(info))
  		})
  		
  		// 取值
  		onLoad(options: any) {
  		    const info = JSON.parse(decodeURIComponent(options.info))
  		    this.setData({
  		      info: info,
  		    })
  		},
  

  注意：取值时，取到的是字符串类型，最好做下转换

  	onLoad(options: any) {
  		const isHide = JSON.parse(options.isHide) // bool 型 转换
  	}
  

• 页面栈调用

  通过getCurrentPages获取当前页面栈，调用对应页面的方法

  	const pages = getCurrentPages()
  	const curPage = pages[pages.length - 1]
  	console.log(curPage)
  	curPage.func()
  

• 路由事件

  跳转时通过EventChannel事件传参

  	// page A
  	wx.navigateTo({
  	    url: '/pages/detail/index',
  		events: {
  			// 获取被打开页面传递的事件
  			acceptDataFromOpenedPage: function(data) {
  			    console.log(data)
  			},
  		},
  	    success: res => {
  			// 触发目标页面 repairInfo 事件
  			res.eventChannel.emit('repairInfo', info);
  	    }
  	})
  	
  	// page B
  	let that = this;
  	const eventChannel = this.getOpenerEventChannel()
  	eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
  	// 监听repairInfo事件，获取上一页面通过eventChannel传送到当前页面的数据
  	eventChannel.on('repairInfo', function(data) {
  	    console.log(data)
  		that.setData({
  			info: data
  		})
  	})
  

• 小程序码启动

  通过小程序码或二维码启动

  大多数小程序码携带的参数都相当于拼接url携带 参考url携带存取值。

  注意：接口生成不限制小程序码时，取参的是scene url编码字段，需要额外处理下

  
  	onLoad(options: any) {
  		let obj = options;
  		if (options.scene) {
  		    obj = parseUrlScene(options.scene)
  		}
  	}
  	
  	export function parseUrlScene(scene) {
  	  const parma = decodeURIComponent(scene)
  	  const paramList = parma.split('&');
  	  const result = {}
  	  paramList.forEach(value => {
  	    const valueSplit = value.split('=');
  	    const key = valueSplit[0]
  	    const curValue = valueSplit[1]
  	    result[key] = curValue
  	  })
  	  return result
  	}