微信小程序开发学习-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的比较

htmlwxml

....

       {{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

注意使用前要先定义为弹性盒子

display:flex;

css3自适应布局单位vh、vw的概念及区别

视口单位(Viewport units)

什么是视口?

在PC端,视口指的是在PC端,指的是浏览器的可视区域;

而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport(理想视口)。

视口单位中的“视口”,PC端指的是浏览器的可视区域;移动端指的就是Viewport中的Layout Viewport。

img

根据https://drafts.csswg.org/css-values-3/#viewport-relative-lengths,视口单位主要包括以下4个:

  1. vw:1vw等于视口宽度的1%。

  2. vh:1vh等于视口高度的1%。

  3. vmin:选取vw和vh中最小的那个。

  4. vmax:选取vw和vh中最大的那个。

vh 和 vw:相对于视口的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。

比如:浏览器高度950px,宽度为1920px, 1 vh = 950px/100 = 9.5 px,1vw = 1920px/100 =19.2 px。

vmax相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax。

vmin相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin。

vh与vw

img

...全文
9 9 收藏 1
写回复
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
1_Lina 新手村气氛调节师 7天前

膜拜大佬!!!

回复
相关推荐
发帖
编程新手村
创建于2021-11-01

6.5w+

社区成员

灌水发信息每周送书 灌水发干货每周送惊喜 谁最水过年送大礼 谁最硬核过年送大礼 谁最贡献过年送大礼
帖子事件
创建了帖子
2021-11-22 21:12
社区公告

我们“新手村”社区就是大家的孵化器

你们学习,我来评分

每周最高分送一本书

每月第四周送一份机械键盘

咱们新手村使用一切狂暴手段让优秀的人得到奖励