微信小程序基础随手笔记

基本样式

行内元素不会独占一行也不能设置宽高

块级元素能设置宽高但它是独占一行的

常用布局

flex-direction：设置当前标签里面的子标签的布局方式

row：从左往右布局，父标签在左

row-reverse：从右往左，父标签在右

colum：从上往下，父标签在上

colum-reverse：从下往上，父标在上

align-item：设置当前和标签子标签的对齐方式

center:居中

text-align:文本左右对齐方式

line-height:设置文本高度

margin：设置外边距

pddding：设置内边距

单行文本溢出隐藏用省略号代替

主要针对块级元素行能元素需要转换成块级元素

display:block//针对行内元素
overflow:hidden
text-overflow:ellipsis
white-space:nowrap

定位

display:flex; 让标签和子标签全部向左浮动，并且会让子标签变成块级元素

阿里icon图标使用

选择图标后点击购物车图标，然后新建项目

双击打开地址，然后复制css加入指定文件中，图标下的代码就就是对应得图标，图标是不是图片而是一种文字格式，

微信小程序中需要将wxss文件在全局配置文件中引用

@import "wxss对应得路径"

使用图标

<text class="iconfont 图标对应代码"></text>

微信小程序存储数据

官网api：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

  /**
   * 页面的初始数据
   */
  data: {
   
    msg:'默认数据',
    d:'默认数据2'
  },

微信小程序在wxml中获取数据：{ {key值}}

<text class="nick">{
  {msg}}</text>

微信小程序修改数据

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    //this.setDate()修改数据
    console.log(this.data.msg);//打印的是上面的数据
    console.log(this.data.d);
    let temp = "msg或者d";
    this.setData({
   
      msg:'修改之后',
      d:'xiugai',