微信小程序快速入门(会vue版)

83 阅读1分钟

由于微信小程序跟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