小程序相关笔记

 

Wepy开发框架 编写小程序 ，可以使小程序像vue

Taro 开发框架

 

循环

wx:for="{{list}}"

wx:key="{{item.id}}"

绑定点击事件  一般是

catchtap 绑定事件

bindtap="handleTab"

 

Component构造器

引入weui

1.githap中搜索。

2.下载该项目，然后删除app.js 只留下style文件和复制app.wxcss中文件，放入自己项目，然后在app文件中修改引入路径。

 

 

Promise

   

 在定义一个方法时在前面加上async，就可以

 

在async方法中如果要处理错误需要用下面语句

只要有一个错误就会执行catch，finally不管怎样都会执行。

try{} catch(){} finally{}

 

 

console.time('调试时间方法')

 

wx.setStorage 存记录

 

 

 转载连接：https://blog.csdn.net/qq_36614846/article/details/80711394  超出隐藏变省略号

 

 

小程序项目采坑集

　　展开收起问题

　　绑定事件便签应该由data-idx绑定，不能直接用id，id会直接取商品数据id而不是遍历数组的下标。

　　绑定后e上面会有 e.currentTarget.dataset.idx，就能直接获取到渲染列表的下标。

　　data-idx="{{ index }}"

 

 渲染数据页面时同时绑定flag,用于判断。

 

 小程序组件内获取调用页面组件相关的值方法

 

 

 

 

在组件中定义

 

 

 

然后改变状态

 

 

 

以下是网络方法

 

 

3.使用组件的方法和属性

组件内定义了一个fun的方法

//songList.js

Component({

  ...

  methods: {

    fun(v){

      console.log(v)

    }

  }

  ...

})

 

在页面里可以这样调用

Page({

...

  onready(){

     this.singList = this.selectComponent("#singList");

     this.singList.fun("value");

     //value

  }

  ...

})

 

4.页面传值/方法到组件

 

页面里这样配置

  //index.wxml

  ...

  <songList

        id='songList'

        value1='str'

        value2='{{obj}}'

        bind:action:'exFun'

        //exFun是你想要在组件里调用的方法名

        >

  </songlist>

  ...

 

//index.js

 

Page({

  data:{

      obj:{

        a:"one",

        b:"two"

         }

  },

  exFun(v){

      console.log(v)

  }

})

 

组件里这样使用

Component({

  ...

  properties: {

    //配置页面传过来的值,key值要一一对应

    'value1':{

     type:String, //必填，目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）

     value:""     //可选，默认值，如果页面没传值过来就会使用默认值

    },

    'value2':{

     type:Object, //必填，目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）

     value:""     //可选，默认值，如果页面没传值过来就会使用默认值

    }

 

  },

  methods(){

     fun(){

       this.triggerEvent("action");

       //triggerEvent函数接受三个值：事件名称、数据、选项值  

     }

  }

  ...

})

 

当调用fun（）时，则会执行index.js里的exFun

 

 

小程序全局appjs中改变局部页面中data值的方法

 

全局定义一个方法类似局部data

 

 

 

 

 

 

最近做小程序要自定义组件，涉及到自定义组件抛出并绑定外部方法，下面代码就是绑定关键

 

index.wxml

 

<customComponent bind:action="selectItemDetail"/>

 

index.js

 

selectItemDetail:function(){

    //doSomeThings

  },

调用外部方法，主要是通过triggerEvent来启动外部方法

 

customComponent.js

 

methods: {

    selectItem:function() {

      this.triggerEvent("action");

    }

  }

绑定事件方法

 

customComponent.wxml

 

<button class="actionBtn" bindtap='selectItem'>

 

 

 

小程序简单html渲染问题：

1.使用基础组件  rich-text  具体受信任标签详见开发文档

2.wxparsere 的使用，分为直接渲染和循环渲染。

 

 

 

微信小程序绑定值得方法：wx:for-index  wx:for-item wx:fata-xxx 

js接收方式 e.currentTarget.dataset.xxx