学习一下miniprogram

微信小程序

一、小程序初体验

1】小程序的数据绑定

和vue一样使用的是双大括号来在wxml中绑定js中的变量

// pages/home/home.js
Page({
   
  data: {
   
    name:'rayhomie',
  }
})

<!--pages/home/home.wxml-->
<!--1. 小程序的数据绑定 -->
<view>hello {
  {name}}</view>

注意：在小程序中不能在js中操作dom

2】小程序的列表渲染

// pages/home/home.js
Page({
   
  data: {
   
    students:[
      {
   id: 1,name:'zhangsan', age:18 },
      {
   id: 2, name: 'lisi', age: 20 },
      {
   id: 3, name: 'wangwu', age: 10 },
      {
   id: 4, name: 'liuqi', age: 15 }
    ]
  }
})

<!--pages/home/home.wxml-->
<!--2.列表渲染 wx:for -->
<view wx:for='{
    {students}}'>{
  {item.id}}-{
  {item.name}}-{
  {item.age}}</view>
//需要使用默认的item来指定展示每个对象里不同属性值

3】小程序的事件监听改变data

不是响应式的，需要setData

在小程序js的page中直接写函数，不需要创建methods属性，而且函数中的this指向的是PageOptions

// pages/home/home.js
Page({
   
  data: {
   
    counter:0
  },
  handleBtnClick(){
   
    //1.错误的，这不像vue，它是不是响应式的双向绑定
    //this.data.counter=this.data.counter+1
    //console.log(this.data.counter)
    //2.使用this.setDate()直接更改data中的数据的值
    this.setData({
   
      counter:this.data.counter+1
    })
    }
})

<!--pages/home/home.wxml-->
<!--3.事件监听改变