微信小程序开发之-总结:页面

最近一直在学习微信小程序开发,但是好像直到最近才有一点点融会贯通的感觉。

现在此做一些梳理:

 页面:

  1. 页面可以由单个wxml表示,此时每一个wxml和对应的js,json,wxss构成一个page(页面)。js处理属性,变量和函数;json用来写配置;wxss用来描述wxml的样式。
  2. 页面可以由一个或多个自定义组件构成。自定义组件:
    1. 在自定义组件中,js不应写page,而应该写component(组件),component有:property,data,methods(自定义函数或绑定控件函数),以及 ready(), created(),attached(),detached() 这几个生命周期函数。methods里绑定的控件函数可以根据官方文档里面的标准组件(小程序提供的组件如:input,text,textarea,view,swiper 等等)可以绑定的消息来进行绑定,这样当某一个消息(如 tap(点击),input(输入),change(页面变换或其他组件的状态变换等))被捕获到的时候,在绑定的响应函数中会获取到一些的值(如 onLoad(e),e就会携带一些信息,具体可以使用console.log(e) 来查看具体携带哪些信息)。 由于某些时候页面的构成与程序的逻辑业务的原因,需要将一个上述的消息以及一些数值发送到上一级(父组件,或使用该自定义组件的组件中),这时可以在绑定的消息响应函数中使用trrigerEvent 发送一个自定义的事件消息以及一些参数,然后在父组件的wxml中使用该自定义组件的地方使用bind:xxx(之前自定义的事件名称)='onXXX' 来绑定一个消息响应函数,这样就可以在父/子组件间传递一些数据。这是从自定义组件传递数据到父组件,如何从父组件传递数据到子组件呢?从父组件传数据到子组件,可以在wxml中将一些数据作为自定义组件的属性传递过去,如 <myComponent property='{{xxx}}', property1='{{xxx}}'.... ></myComponent>,这样在自定义组件中的property部分就需要定义property, property1,具体格式可以参考官方文档。
    2. page与page之间的传至,可以使用 url的方式,ru http request中的url格式。因为在页面管理的函数,如:navigateTo,redirectTo这类的函数中都有一个url字段,这样可以在url字段中来带一些参数,来传递页面间需要交换的数据。
    3. 在每个组件(自定义和标准)使用的时候可以在wxml里以 data-param 来定义一个名为 param的变量,将这个变量绑定到该组件上,而在page或component中的data中定义的变量的有效范围是整个page或component。运用场景:比如一个商品列表,可能会在描述一个商品的<view> 里面绑定商品的id,价格或其他的变量,然后这样当用户点击触发响应函数的时候知道是哪一个项目被点击了,不然怎么知道谁被点击了呢?

未完待续。。。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章