描述
刚换了工作,之前的工作都是用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,
});
},