国产开发板——香橙派Kunpeng Pro的上手初体验

文章目录

• 1、< template >< / template >
• 2、样式导入
• • i、wxml
  • ii、wxss
• 3、flex布局
• • i、容器属性
  • ii、项目属性

1、< template >< / template >

模板可以重复调用

首先要定义一个模板：

<template name="test">
    <view>{{username}}</view>
    <view>{{password}}</view>
</template>
<!-- 这里定义了一个模板名字为 test 的模板 ，里面包含了两个 view 组件-->

然后才能应用该模板：

<template is="test" data="{{username:'admin',password:'123'}}">
</template>
<!-- 使用 is 引用所要使用的模板名字，同时，使用 data 更新模板中的变量的值 -->
<!-- 另外，也可以在 Page() 中定义 data 的其中一个变量值，以一个结构体的值为例子：

Page({
    data: {
        stu:{
            username:'admin',
            password:'123'
        }
    }
})

然后，在引用该模板的时候可以使用

<template is="test" data="{{...stu}}">
</template>

来给变量赋值

其中 “...stu” 表示将 名字为 stu 的变量展开引用

-->

2、样式导入

i、wxml

<import src="相对路径" />
<include src="相对路径" />

ii、wxss

尺寸单位：rpx根据指定的屏幕自适应

样式导入：

@import "相对路径";

3、flex布局

i、容器属性

flex-direction:

flex-direction: row(默认) | row-reverse | column | column-reverse
/*
row 坐标轴是以容器的左上角为原点，自左向右，自上向下
row-reverse  坐标轴是以容器的左上角为原点，自右向左，自上向下
column 自上向下，自左向右
column-reverse 自下向上，自左向右

flex-wrap:

flex-wrap: nowrap(默认) | wrap | wrap-reverse
/*

nowrap 不换行，如果单行内容过多，项目宽度会被压缩
wrap 当容器单行容不下所有项目时，允许换行
wrap-reverse 与 wrap 相同，只不过，换行方向为 wrap 的反方向

justify-content:

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly ;

还有 align-items（项目在行中的对齐方式）

align-content（项目在非主轴的对齐方式）

ii、项目属性

order:

.item{
    order: 0（默认）;/* 一个整数，表示排列的位置，数值越小越靠前  */
}

flex-shrink:（收缩因子）

.item{
    flex-shrink: 1（默认）;/* 一个非负数 ，也称为 收缩因子*/
}

flex-grow:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

.item {
  flex-grow: 0; /* 非负数 */
}

flex-basis：根据主轴的方向代替，主轴上的宽或者高

默认 auto（其优先级比数值低）如果，不是 auto 而是数字，则优先级大于 项目的宽或者高