记一次小程序项目的开发心得

只是展示用,建议使用template,组件中涉及到较多的逻辑,建议使用component。 因为template没有自己的js文件,所以在列表中涉及到列表子项独立的操作,建议将列表子项写成component。

示例代码: page文件

<!--Wxml-->
<!--引用-->
<import src="goodlist.wxml"/>
<!--使用  goodList为page传入的数据-->
<template is="statement-goodlist" data="{{goodList}}"/>

2.wxs文件的使用

Wxs更多的是作为一个过滤器使用,.wxs 文件可以被其他的 .wxs 文件 或 WXML 中的  标签引用。 .wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。

示例代码 page文件--类似过滤器效果

>{{phone.phone(AddressInfo.phone)}}</text>

3.生命周期

/**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    // 前进-跳转到其他页面的时候
  },/**
 * 生命周期函数--监听页面卸载
 */
onUnload: function () {
  // 后退-点击当前页面返回的时候
}

利用这两个生命周期可以解决的问题: 防止用户快速切换页面(A->B)。导致动态设置导航栏中的文字显示出现错误 快速切换页面可能导致A页面中的异步数据还未返回,致使当切换到B页面的时候A数据才返回,使得导航栏显示的文字为A页面的导航栏标题。(即:A页面的导航栏标题为hello,B页面的导航栏标题为world,当快速由A->B,此时虽然在B页面,但是导航栏标题显示的是hello,而不是world)

参考链接: 小程序中的生命周期onHide和onUnload

二、 通信类

如果说数据是汽车的话,传递的通道或方式就是汽车要行驶的道路。所以,数据驱动型的框架,我们少不了要学习如何建设这条"道路",让"汽车"高速行驶。

1.页面与组件通信

1-1.页面传递内容给组件

page为页面的属性名

components 为组件的外部属性名,用properties对象接收

页面


})

组件

父亲pages

页面


})

组件


  }
})

2.组件与组件通信

两个无任何关联的组件:通过全局变量或本地缓存传递数据

两个有关联的组件(同一个父页面下): 通过上面的方法,用组件 => 页面 => 组件 的方式传递数据。

3.页面之间的通信

3-1.使用全局变量 app.globalData

3-2.使用本地缓存 wx.setStorageSync

3-3.url传递

})


// B页面-接收数据
// 通过onLoad的option
<!-- JS -->
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender) //  raymond is male
    this.setData({
      option: option
    })
  }
})

3-4.后一级页面对前一级页面的数据的管理(通过获取到页面对象进行数据操作)

这个方法的精髓,是通过获取到其他页面的对象原型, 然后通过原型方法 setData 对当前对象管理的 data 进行修改 ,

示例如下:

// pageF.js
...
Page({
  changeIndexInE: function(){
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];
    prevPage.setData({
      index: 0
    })
  }
})

这个方法可以操作页面堆栈里面的页面的数据, 可以做到让后一级页面对上级页面群的数据管理 。

参考链接: 爱范儿-页面之间的数据传递

4.页面与模板之间的通信

页面


  }
})

传入模板的除了变量,还可以是事件方法对象。例如,模板中的点击事件,可以传递到使用模板的元素中。

三 、技巧类

1. 索引是变量,修改数组的值

根据文档,采用'array[0].text':'changed data'的格式。但是我们实际应用中需要改变的索引值往往是动态的,所以,改装一下如下:

示例代码: