2021-03-17

小程序（学习记录及bug）

1.全局配置（app.json ）

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

├── app.js

├── app.json

├── app.wxss

├── pages

│   │── index

│   │ ├── index.wxml

│   │ ├── index.js

│   │ ├── index.json

│   │ └── index.wxss

│   └── logs

│   ├── logs.wxml

│   └── logs.js

└── utils

pages里面新建文件夹index,右击新建Page,输入文件名index,自动生存xml,js,json,wxss文件。

2.父子通信(基础用法)

  (1) 父传子（自定义属性）

1.children.json [子组件]
{
  "component": true,
  "usingComponents": {}
}

2.index.json [父组件]
{
  "usingComponents": {
    "children":"/components/children/children" 
  }
}

3.index.wxml [父组件]
data: {
    list:[{ id: 1, name: 'one' }, {id: 2,name: 'two'}],
}
<children list="{{list}}"></children>

4. children.json [子组件]

properties:{
    list:{
        type:Array, //定义数据的类型
        value:[], //给个初始化的值
    }
    或者 list: Array,
}

console.log(this.data.list)

(2)子传父 （自定义事件）

1.indeximg.wxml [子组件]
  <ul> 
      <li wx:for="{{list}}" wx:key="*this" data-id="{{item}}" bindtap="onchild">
        <text>{{item.id}}</text> 
        <text>{{item.name}}</text>
      </li>
    </ul>

2.indeximg.js [子组件]
onchild(e) {
  this.triggerEvent('getchild',e.currentTarget.dataset.id);
}

3. index.wxml [父组件]
<indeximg  list="{{list}}"  bindgetchild="getEventchild"></indeximg>

4.index.js [父组件]
 getEventchild: (e) => {
    console.log(e.detail);
 }

3.生命周期

页面的生命周期(顺序从上至下) : [遇到的bug]

• onLoad() 监听页面加载 (不能setData()   [只会调用一次] 
• onShow() 监听页面显示
• onRead() 监听页面初次渲染完成  [每次打开页面都会调用一次]
• onHide() 监听页面隐藏
• onUnload() 页面卸载

组件的生命周期(顺序从上至下) : 

• created() 组件实例化，但节点树还未导入，因此这时不能用setData
• attached()  节点树完成，可以用setData渲染节点，但无法操作节点
• ready()  组件布局完成，这时可以获取节点信息，也可以操作节点
• moved()  组件实例被移动到树的另一个位置
• detached()  组件实例从节点树中移除

组件与在的页面之间的生命周期顺序 :  [遇到的bug]

• 组件：created()
• 组件： attached()
• 页面的生命周期：onLoad()
• 页面的生命周期： onShow()
• 组件：ready()
• 页面的生命周期： onReady()
• 页面的生命周期： onHide()
• 页面的生命周期： onShow()

4.data-属性

说明：data-属性名=“{{参数}}”触发事件时，会发送事件处理函数

<image src="{{item.url}}" bindtap="todetail" data-id="{{item.id}}" data-url="{{item.url}}" class="slide-image"/>

todetail(event){
  const item = event.currentTarget.dataset;
  console.log(event);
  wx.navigateTo({
    url: '/pages/detail/detail?id='+item.id+'&url='+item.url,
  })
}, 

5.rich-text富文本(类似于innerHtml) [遇到的bug]

我在做小程序的过程中，搜索功能，后端做文字高亮，前端直接通过rich-text。

6.block占位符

for循环的时候可以用到，只是起着占位的效果，页面上显示。

7.wx:for 与wx:if  (它俩不能同层级使用,wx:if会失效) [遇到的bug]

wx:if :

• 一个wx:if只能对应一个wx:else(缩写:else)
• wx:else所在的标签是否和wx:if所在的标签是同层级的

实践出真理，生命周期还是要搞清楚。“心急吃不了热豆腐”——还是得磨啊...