这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

基础

插值

小程序中插值操作和vue中是一样的，属性也可以插值

{{}}

<view>{{msg}}</view>
<view x="{{msg}}"></view>

元素显示隐藏

使用属性hidden我们可以实现元素的显示隐藏操作

<view hidden="{{布尔值}}"></view>

条件渲染

wx:if="{{条件}}"
wx:elif="{{条件}}"
wx:else

<view wx:if="{{布尔值}}">真时显示</view>
<view wx:else>假时显示</view>

列表渲染

wx:for
可以跟着对应的数组
wx:for-item
可以修改遍历出的值的名字
wx:for-index
可以修改遍历出的值的下标
wx:key

<view wx:for="{{arr}}" wx:key="{{inedx}}">{{item}} {{index}}</view>
<view wx:for="{{arr}}" wx:key="{{inedx}}" wx:for-item="newItem" wx:for-index="newIndex">{{newItem}} {{newIndex}}</view>

事件绑定

在小程序中，都是移动端事件


<view bindtap="tapHandler"></view>
<!-- 
  tapHandler应该写在
    Page({
      tapHandler () {}
    })
  小程序的函数中只有一个参数 e，其他所有的想要传递的数据都需要通过data-xxx的形式传递

  在函数中使用e.target.dataset.xxx获取
 -->

数据请求

小程序中提供了数据请求的方法，但是这个方法并不好用，所以在一些项目中，一般都会把请求进行二次封装，变成promise版本的

wx.request()


wx.request({
  url: '',
  data: {},
  method: "GET",
  header: {},
  success: res => {

  },
  fail: err => {}
})

小程序组件

组件使用

创建小程序组件

新建Component会直接出现四个文件，所以一般创建组件时，会先创建一个该组件的文件夹

新建一个文件夹components/组件名
新建一个Component

Component和Page类似，但是相关语法有差异

Page是靠Page({})
Component是靠 Component({})

Page的函数放在Page({}) 的大括号中
component的函数放在methods里

引入并注册

在使用该组件的位置，找到对应页面.json文件，然后配置usingComponents

{
  "usingComponents": {
    "组件标签名": "组件路径"
  }
}

模板使用

在页面中对应的位置上写上组件标签名

<组件名></组件名>

组件通信

父子通信

父组件/Page

<子组件名 key="value"/>

子组件

Component({
  properties: {
    key: 数据类型
  }
})

子父通信

把$emit变成了triggerEvent，把@变成了bind:

子组件

<button bindtap="tapHandler"></button>

Component({
  methods: {
    tapHandler () {
      this.triggerEvent("自定义事件名", '要传递的数据')
    }
  }
})

page/组件


<子组件 bind:自定义事件名="函数"/>

Page({
  函数 (e) {
    // e.detail就是对应的传递的数据
  }
})

生命周期

Vue的生命周期，如果使用了keep-alive 那么就可以有两个多出来的生命周期activated deactivated

Component

组件生命周期需要写在lifetimes中

created
组件被创建时执行
attached
组件进入到页面节点树时执行
ready
组件渲染完成后
moved
组件被移动到另外的位置
detached
移除时
error
组件中相关操作错误时

pageLifetimes

show
组件所在页面显示时执行
hide
组件所在页面隐藏时执行
resize
组件所在页面尺寸改变时执行

微信小程序属性中绑定数据直接使用{{}}即可。

微信小程序开发指南

基础

插值