微信小程序初探总结

描述

刚换了工作，之前的工作都是用vue,新公司现阶段用的小程序比较多，之前就听说小程序的语法和VUE差不多，看了几天文档，实际操作了一下，记录一下vue和小程序的异同和坑。

总结

小程序的模块化做得还是不错的，自身已经封装了一套相对成熟的文件结构。以下就总结使用小程序遇到的问题：

1.小程序开发工具报错，js第一行最好不要写注释，不让有可能报错，可能是开发工具的BUG

2.点击事件传参，vue之前用法是可以直接在方法添加个参数传到方法（@click="clickFun(item,index)"）,而小程序使用的是bindtap="clickFun"方法，需要通过对点击的元素添加一个data,再通过点击的方法获取到这个元素进而获取到想要的参数,相较VUE是比较麻烦一点，类似JQ获取一样。

<view bindtap="clickFun" data-id="{
   
   {item.id}}"></view>

clickFun(e){
  let getID = e.currentTarget.dataset.id; //获取id
}

url传递参数

setDiscount: function(e) {
    let id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../setDiscount/setDiscount?id=' + id,
    })
  },

获取参数

onLoad: function(options) {
    console.log(options.id)
    // Do some initialize when page load.
  }

3.小程序的标签使用

4.data修改

this.setData({
sortType: 1,
});

5.小程序组件传参

父传子

1.父传子例子

//父页面
//传递propArray
<Select prop-array='{
   
   {selectArray}}' bind:selected='selectEvent'></Select>
//JS
data:{
selectArray: [
      {
        id: 2,
        text: "按演出数"
      },
      {
        id:3,
        text: "最新入驻"
      },
      {
        id: 1,
        text: "按粉丝数"
      }
    ],
}



//组件页面js
//定义propArray
properties: {
    propArray: {
      type: Array,
    }
  },


2.子传父例子

//组件JS
test(){
//selected 定义的方法
    this.triggerEvent('selected', {
        selectedID: e.target.dataset.id
      });
}


//父页面wxml
//绑定selected方法
<Select prop-array='{
   
   {selectArray}}' bind:selected='selectEvent'></Select>
//selectEvent定义方法
//父页面js
selectEvent: function (e) {
    this.setData({
      sortType: e.detail.selectedID,
    });
  },

微信小程序初探总结

描述

总结

猜你喜欢