微信小程序页面传值、组件间通信总结 _微信小程序

文章插图

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便
捷地获取和传播，同时具有出色的使用体验。对于微信小程序，前端开发应该不陌生，目前也
是非常火，很多公司都会进行开发。对于小程序的优点我就不到这过多描述了，今天我是想来
总结下微信小程序页面和组件传值。

文章插图
微信小程序目录结构
1.页面与页面传值-跳转的url带参传值
微信小程序页面直接传值我们经常用到的是页面URL跳转传值，跳转到的页面通过到生命周
期onLoad里面接收。
//A页面Page({data:{}, linkTo:function(){//页面事件绑定方法let data = 'hello world'; wx.navigateTo({ url: '/pages/my/index?name=' + data, })} }）//B页面 Page({data:{ name:' ' }, onLoad:function(option){//接收数据this.setData({ name: option.name }) } }）如果页面有多个值要传，直接用&符合链接起来就可以了。比如'/pages/my/index?name=' + data1+'&number='+data2;2.页面与页面传值-全局globalData传值
//App.jsApp({ onLaunch (options) { // Do something initial when launch. }, onShow (options) { // Do something when show. }, onHide () { // Do something when hide. }, onError (msg) { console.log(msg) }, globalData: {name:'hello world'}})//A页面const app = getApp();//获取全局对象Page({data:{}, onLoad:function(){ let name = app.globalData.name; console.log(name);//hello world } }）全局数据的拿去是通过拿去globalData对象，再到其他页面获取，当然你也可以
修改全局对象里面数据其他页面从新去获取。
//A页面const app = getApp();//获取全局对象Page({data:{}, onLoad:function(){ app.globalData.name='微信小程序'; //修改全局数据} }）//B页面const app = getApp();//获取全局对象Page({data:{}, onLoad:function(){ let name = app.globalData.name; console.log(name);//微信小程序} }）2.页面与页面传值-页面数据缓存wx.setStorageSync(KEY,DATA)
//A页面Page({data:{}, onLoad:function(){ wx.setStorage({ key:"name", data:"hello world" })} }） //B页面Page({data:{}, onLoad:function(){ var value = https://www.isolves.com/it/cxkf/ydd/xcx/2019-07-29/wx.getStorageSync('name')；console.log(value);// hello world } }）此处缓存数据要用同步wx.setStorageSync(),因为异步有可能数据或者有可能会获取不到下面我们来说说微信小程序组件之前传值
组件间通信组件间的基本通信方式有以下几种。

WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据
（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在组件模板和样式章节中介绍。
事件：用于子组件向父组件传递数据，可以传递任意数据。
如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

说到组件，这里我们先了解组件的使用，组件的js、json文件和页面不一样。
Component构造器Component({ behaviors: [], properties: { myProperty: { // 属性名 type: String, value: '' }, myProperty2: String // 简化的定义方式 },data: {}, // 私有数据，可用于模板渲染 lifetimes: { // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, moved: function () { }, detached: function () { }, }, // 生命周期函数，可以为函数，或一个在methods段中定义的方法名 attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖 ready: function() { }, pageLifetimes: { // 组件所在页面的生命周期函数 show: function () { }, hide: function () { }, resize: function () { }, }, methods: { onMyButtonTap: function(){ this.setData({ // 更新属性和数据的方法与更新页面数据的方法类似 }) }, // 内部方法建议以下划线开头 _myPrivateMethod: function(){ // 这里将 data.A[0].B 设为 'myPrivateData' this.setData({ 'A[0].B': 'myPrivateData' }) }, _propertyChange: function(newVal, oldVal) { } }})使用 Component 构造器构造页面{ "component": true,//这里是它把定义成组件，要不然引入到页面会报错}引入组件
//A页面 json { "usingComponents": { "myComponents": "../../components/myComponents/index",//引入组件 },}//A页面 WXML<myComponent name="hello world"></myComponent>//myComponent接收数据Component({ properties: { name:{ value: "", type: String //此处设置数据类型这样组件就能接收到数据 } }, methods: {} })