美文网首页
微信小程序快速知识点

微信小程序快速知识点

作者: 还有谁叫李狗蛋 | 来源:发表于2017-08-08 15:13 被阅读0次
    只是刚看文档的时候记下里的几点
    • 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 坑啊!我又来了~
    1. 最近在做小程序,用wepy做,需要A页面中调用该页面引入的B组件的方法,需要用到$invoke,去了GitHub看别人的问题才发现是这样用的:

      很清晰的答案
      就是说,this.$invoke('这里写的是引入组件时,你命名的名称', '这里就是你在那个组件写在methods的方法', '这里就是你要传的值');官方文档在这方面写得不太清楚。
    2. 跳转页面问题
      this.$navigate('./result'); // 文件的相对路径,可忽略扩展名
      如果是组件跳页,如下:

      来自Github的回答
    3. 绑定事件需要传值并且用到时间对象是这样的:
      绑定:@tap="methods({{'参数'}})"
      注册:methods(arguments,event){ // 事件对象是放最后的}

    4. 压缩上传,扫二维码在真机测试
      一开始输入这命令会有warning,警告你没有安装一堆插件,然后他自动帮你装,第二次输入npm run build 的时候还是这个警告,这时先把node_modules文件夹删除,重新运行npm install,然后再输入npm run build就行了。

      npm run build

    5.把基础库变成1.9.X的时候,控制到一堆undefined
    别人的情况
    解决方法:

    解决方法

    相关文章

      网友评论

          本文标题:微信小程序快速知识点

          本文链接:https://www.haomeiwen.com/subject/jkftrxtx.html