小程序(学习记录及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所在的标签是同层级的
实践出真理,生命周期还是要搞清楚。“心急吃不了热豆腐”——还是得磨啊...