微信小程序开发学习-1

勤奋的猪先生 2021-11-22 21:12:34

WXML的语法规则：

所有元素都必须闭合标签；

<text>Hello World</text>

所有元素都必须正确嵌套；

<view>（开始标签1）<text>（开始标签2）Hello World</text>（结束标签2）</view>（结束标签1）

属性值必须使用引号包围；

<text id = "myText"（参数值必须使用引号包围） >myText</text>

标签必须使用小写；

<text（小写）>Hello World</text>

WXML中连续多个空格会被合并为1个空格；

<text>Hello（此处7个空格）World</text> <text>Hello（合并为1个空格） World</text>

WXML与HTML的比较

html	wxml

....

	{{area[index]}}
https://bbs.csdn.net/topics/603436232#

关于箭头函数

getUserProfile() {
    wx.getUserProfile({
      desc: '用户注册',
      success: res => {
        console.log("获取用户信息成功", res)
      },
      fail: res => {
        console.log("获取用户信息失败", res)
      }
    })
  },

success: res => {
        console.log("获取用户信息成功", res)
      },
      fail: res => {
        console.log("获取用户信息失败", res)
      }

res是参数名，可以更改这里是只有一个参数所以可以省略（）

success: function(res) {} 类似 success: res => {}

零个参数，括号()不可以省略。

如：() => 3.14

在箭头函数中，如果是一个参数，则可以直接写，括号()可以省略。

如：x => x * x

多个参数，括号()不可以省略。

如：(x, y) => x * x + y * y

如果只有一条语句，则可以不使用花括号而直接写。不使用花括号，则会默认返回语句执行的结果。{ ... }和return可以省略掉。

如：(x, y) => x * x + y * y

如果函数体包括多条语句，则{ ... }和return不可以省略掉。

(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

微信小程序中的setData

定义: 设置数据,更改数据

作用: setData函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data的值（同步）

setData它是微信小程序提供的一个内置的接口,是用于改变逻辑层中 data下的数据的
视图层 view的数据挂载在逻辑层的 data下,发送到视图层中是异步的
改变 this.data是同步,换句话说,若直接修改 this.data 而不调用 this.setData方法,是无法改变页面的状态的，还会造成数据不一致

data:{
    userInfo:null
  },
  getUserProfile() {
    wx.getUserProfile({
      desc: '用户注册',
      success: res => {
        console.log("获取用户信息成功", res.userInfo)
        this.setData({
          userInfo:res.userInfo
        })
      }, 
      fail: res => {
        console.log("获取用户信息失败", res)
      }
    })
  },

data:{
    userInfo:null
  },

是创建一个变量userInfo

this.setData({
          userInfo:res.userInfo
        })

将获取到的用户的数据传给userInfo这个变量

CSS flex-direction 属性

row	默认值。灵活的项目将水平显示，正如一个行一样。
row-reverse	与 row 相同，但是以相反的顺序。
column	灵活的项目将垂直显示，正如一个列一样。
column-reverse	与 column 相同，但是以相反的顺序。
initial	设置该属性为它的默认值。请参阅 https://www.runoob.com/cssref/css-initial.html。
inherit	从父元素继承该属性。请参阅 https://www.runoob.com/cssref/css-inherit.html。