由于微信小程序跟Vue很像,但是又有很多地方不一样,因此这里通过vuer的视角,梳理一篇快速入门文档,旨在帮助vuer快速入门小程序,更多api请看微信小程序开发文档
默认读者会vue
一、模版语法
div→view
span→text
img->image
v-if→wx:if
v-for→wx:for
:name="name"->name→"{{name}}"//name是变量
@click="handleClick"→bindTab="handleClick"
二、js相关
1.data
访问数据
this.loading→this.data.loading
设置数据
this.loading=true→this.setData({loading:true})
2.computed
使用computed必须引入miniprogram-computed,然后在Component加上behaviors
const computedBehavior = require("miniprogram-computed")
behaviors: [computedBehavior],
三、父子组件传参
参数父传子
props->properties
子传父回调方法
父组件
<child bind:tapclose="handleClose" />
子组件
<view catchtap="onCloseTap">关闭</view>
onCloseTap() {
this.triggerEvent('tapclose')
}
三、样式覆盖
父组件
index.js
options:{
styleIsolation: 'shared'
}
子组件(自定义组件)
options: {
addGlobalClass: true