小程序基本语法

小程序基本语法

插值

在小程序中，插值和vue没有区别，我们可以直接写 {{}} 中间包含变量（data中的属性名）

{{msg}}

判断

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

<view wx:if="{{score > 80}}">优秀</view>
<view wx:elif="{{score > 70}}">良好</view>
<view wx:elif="{{score >= 60}}">及格</view>
<view wx:else>不及格</view>

列表渲染

在小程序中，如果我们有一个数组，那么可以使用wx:for={{数据}}

wx:for需要添加wx:key key中是遍历出来的对象中的属性名

wx:for会自动生成item 和 index两个变量
如果我们需要修改item和index的名字
wx:for-item=“新的名字”
wx:for-index=“新的名字”

如果有有些时候，我们想遍历但是不想生成新的标签，可以使用block

<view wx:for="{{stus}}" wx:key="name">{{item.name}} {{index}}</view>
<view wx:for="{{stus}}" wx:key="name" wx:for-item="stu" wx:for-index="i">{{stu.name}} {{i}}</view>
<block wx:for="{{stus}}" wx:key="name" wx:for-item="stu" wx:for-index="i">{{stu.name}} {{i}}</block>

数据请求

在微信小程序中，想要请求数据可以使用wx.request()

如果我们调用该方法，一定会报错，因为小程序会校验可信任接口，如果没有添加，则无法被请求。我们可以在小程序右上角“详情” -> "本地设置"中勾选不校验合法域名选项（开发环境中就不会有问题）

wx.request({
  url: 'url',
  data: data,
  header: header,
  method: method,
  timeout: 0,
  success: (result) => {},
  fail: (res) => {},
  complete: (res) => {},
})

生命周期函数

onLoad

监听页面加载完成

事件绑定

小程序进行事件绑定，可以在wxml上进行对应的bind操作 bindtap=“page中的函数名”

<button bindtap="tapHandler" data-key="value"> </button>

Page({
  data: {

  },

  tapHandler (e) {
    // e.currentTarget.dataset.key
  }
})

wxs

wxs是一个微信的脚本语言，大致语法和js一致

wxs是用来导出模块，然后我们可以利用wxs标签引入模块

demo.wxs

module.exports = {
  modulename: 值
}

demo.wxml

<wxs src="./demo.wxs" module="自定义模块名"></wxs>

{{自定义模块名.modulename}}

data

在小程序中，如果我们想要获取到对应的data中的数据，需要使用this.data.属性名的操作。

setData

this.setData用于修改设置我们的data中的值，直接修改是不支持动态渲染。

Page({
  data: {
    msg: "消息",
    arr: [1,2,3,4],
    obj: {
      name: '张三'
    },
    obj2: {
      arr: [{name: '李四'}]
    }
  }
})

this.setData({
  msg: '新的值',
  arr: [123,45324,6437],
  'arr[1]': '新的值',
  obj: {新的对象},
  "obj.name": '新的名字',
  "obj2.arr[0].name": "新的名字"
})

setData回调函数

setData是一个异步操作，存在回调函数

this.setData({}, function () {
  // 这个函数会在setData之后执行
})

组件

创建组件需要使用Component构造器，包含组件的js wxml wxss json

Component({
  /* 组件标签上的属性 */
  properties: {
    msg: {
      type: String
    }
  },

  data: {

  },

  methods: {

  }
})

注册组件

在需要使用组件的页面或组件的json文件中，配置usingComponents

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

注册组件后我们就可以在对应的页面或父组件中使用<组件标签名></组件标签名>

组件通信

父子通信

父子通信和vue中父子通信一致，给组件标签上添加属性及值，就可以在组件内部通过properties获取

子父通信

和vue一样，子组件中通过this.triggerEvent触发对应的自定义事件并传递数据

父组件中，给子组件标签上绑定事件bind:自定义事件名="函数"，子组件传递的数据就是e.detail.key