只是刚看文档的时候记下里的几点
-
wx:if
true
渲染false
不渲染 -
hidden
会渲染,控制元素的display
-
"{{boolean}}"
不可以"boolean"
-
<block>
包装元素,不会做任何渲染 -
bind+事件类型
会冒泡
catch+事件类型
不会冒泡 - Flex布局
flex-direction
主轴方向
flex-wrap
换行
父容器---justify-content
主轴对齐方式(右对齐flex-end
、左对齐flex-start
、居中center
、两边固定space-between
、等分space-around
)
父容器---align-items
副轴对齐方式(上对齐flex-start
、下对齐flex-end
、居中center
、基线上baseline
、被拉伸以适应容器stretch
)
子容器---flex
子容器---align-self
- 生命周期函数(下面是页面执行的顺序)
onLoad
监听页面加载(只执行一次)
onShow
监听页面显示(显示页面一次就执行一次)
onReady
监听页面的初次渲染完成
onHide
监听页面隐藏
onUnload
监听页面卸载 -
onReachBottom
监听用户上拉动作(上拉加载) -
onPullDownRefresh
监听用户下拉动作(下拉刷新)
以及工作中经常用到的几点
- 上拉加载更多,下拉刷新
上拉加载更多:在page的json文件加enablePullDownRefresh:true
,然后在该page的js文件加上方法onReachBottom
下拉刷新:在page的js文件加上方法onPullDownRefresh
在json文件中写上enablePullDownRefresh:true
才可以上拉加载更多,下拉刷新 - 返回上一页且要刷新,重新获取新的数据,在
onShow
函数调用onLoad()
- 做一个活动内容切换tab栏的页面需要用组件swiper,但当内容过长,使用组件scroll-view可以在组件内任意滑动,但用户体验不好,使用新的api能获取元素高度给swiper,可以摆脱scroll-view
- 计数器 - input + 用input事件存值,blur事件取值
- wxss 不能引用本地文件
2017.12.28 2017年的小尾巴,重拾小程序,改变了好多啊,希望不要让我碰到小程序的bug,很要命!
- 编写组件样式时,需要注意以下几点:
- 组件和引用组件的页面不能使用id选择器(#a)、属性选择器([a])和标签名选择器,请改用class选择器。
- 组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。
- 子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。
- 继承样式,如 font 、 color ,会从组件外继承到组件内。
- 除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效。
讲了一堆总结起来其实就是1.用class 2.font、color还是会继承的 3.除了继承样式外,其他样式对自定义组件无效
微信小程序脚手架
- 父组件传值给子组件
:props.sync=foodata
,要加上sync才是动态的(父变化,子就变化),不加的话字就不变化 - 组件通讯那里也是绝了....完全无语,但是看上去好像挺好用的...
- 在函数运行周期之外的函数里去修改数据需要手动调用$apply方法。如:
setTimeout(() => { this.title = 'this is title'; this.$apply(); }, 3000);
2018.01.08 坑啊!我又来了~
-
最近在做小程序,用wepy做,需要A页面中调用该页面引入的B组件的方法,需要用到$invoke,去了GitHub看别人的问题才发现是这样用的:
就是说,this.$invoke('这里写的是引入组件时,你命名的名称', '这里就是你在那个组件写在methods的方法', '这里就是你要传的值');
官方文档在这方面写得不太清楚。 -
跳转页面问题
this.$navigate('./result');
// 文件的相对路径,可忽略扩展名
如果是组件跳页,如下:
绑定事件需要传值并且用到时间对象是这样的:
绑定:@tap="methods({{'参数'}})"
注册:methods(arguments,event){ // 事件对象是放最后的}
-
压缩上传,扫二维码在真机测试
一开始输入这命令会有warning,警告你没有安装一堆插件,然后他自动帮你装,第二次输入npm run build 的时候还是这个警告,这时先把node_modules文件夹删除,重新运行npm install,然后再输入npm run build就行了。
5.把基础库变成1.9.X的时候,控制到一堆undefined
别人的情况
解决方法: