实训日记·twoday

最新推荐文章于 2022-05-18 20:48:58 发布

Skeram_Huang

最新推荐文章于 2022-05-18 20:48:58 发布

阅读量392

点赞数

本文链接：https://blog.csdn.net/Huangxu_MIKU/article/details/92801387

版权

JS-JDK微信开发ide
闪白功能仍未对外开放，且每个用户只分配5m的内存
没有API，视图层与逻辑层分离（逻辑层在jscore（ios）引擎编译 V8（安卓） nwjs（ide））

视图层 wxml wxss
逻辑层 js

project.config.json 全局配置文件，项目继承
app.json 小程序页面配置文件，可以重写覆盖
app.wxss 小程序全局样式文件，可以重写覆盖（！important优先级最高，elemen最低）

homework01：骰子布局（Flex）
homework02：微信分页（跳转页面）

wxml数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

<block>标签，注意该标签仅是一个包装元素，并不是一个组件，在编译时不会进行页面渲染（不是一个视觉组件）

主要配合wx：if、wx：key与wx：for等属性使用。作用是进行列表渲染，标示if、for的使用范围。

生命周期详解

！Add（）注册小程序 Page（）注册页面，两个作用对象不同

1）app.js

onLaunch （钩子）生命周期函数--监听小程序初始化当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onShow 生命周期函数--监听小程序显示当小程序启动，或从后台进入前台显示，会触发 onShow

onHide 生命周期函数--监听小程序隐藏当小程序从前台进入后台，会触发 onHide

onError 错误监听函数当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

2）在page页面中定义的生命周期方法

onLoad 生命周期函数--监听页面加载

onReady 生命周期函数--监听页面初次渲染完成

onShow 生命周期函数--监听页面显示

onHide 生命周期函数--监听页面隐藏

onUnload 生命周期函数--监听页面卸载

！App() 必须在 app.js 中注册，且不能注册多个。
不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
通过 getApp() 获取实例之后，不要私自调用生命周期函数。

flex布局（display：flex）

一、语法

水平的主轴main axis（x轴）垂直的交叉轴cross axis（y轴）
单项目的占据空间由主轴空间（main size）和交叉轴空间（cross size）组成。

容器的属性

1）flex-direction属性：决定主轴的方向（项目的排列方向）

四个值：

row（默认）：水平左端
row-reverse：水平右端
column：垂直上沿
colum-reverse：垂直下沿

2）flex-wrap属性：定义项目换行方式

三个值：

nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

3）flex-flow属性：direction属性和wrap属性的简写形式，默认值为row nowrap

使用格式：
flex-flow：<flex-direction><flex-wrap>

4）justify-content属性：定义项目在主轴上的对齐方式

五个值：

flex-start（默认）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目间距相等
space-around：单项目两侧的间隔相等，项目间的距离等于间隔之和

5）align-items属性：定义项目在交叉轴上的对齐方式

五个值，注意：具体的对齐方式与交叉轴的方向有关，此处cross axis假设为自上而下

stretch（默认）：如果项目未设置高度或设置为auto，将占满整个容器高度
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴终点对齐
baseline：项目的第一行

6）align-content属性：定义多根轴线的对齐方式，若只有一根轴线，该属性不起作用

六个值：

stretch（默认）：轴线占满交叉轴
flex-start：与交叉轴起点对齐
flex-end：与交叉轴终点对齐
center：与交叉轴中点对齐
space-between：与交叉轴两端对齐，轴线间的间隔平均分布
space-around：每根轴线两侧的间隔相等

项目属性

1）order属性：定义一吸纳灌木的排列属性，数值越小越靠前，默认0

order：<integer>;

2）flex-grow属性：定义项目的放大比例，默认0（不放大）

flex-grow:<number>;

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3) flex-shrink属性：定义项目的缩小比例，默认1（若空间不足则缩小该项目）

flex-shrink:<number>;

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。

4）flex-basis属性定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

flex-basis：<length>/auto;

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

5）flex属性：grow、shrink、basis的简写，默认（0 1 auto）后两个属性可以选择。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6）align-self属性：

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

homework1&2

结果：

关键代码：

//app.js
{
  "pages": [
    "pages/one/one",
    "pages/two/two",
    "pages/many/many"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#cccccc",
    "navigationBarTitleText": "Demo",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh":true,
    "backgroundColorTop":"#c0c0c0"
  },
  "tabBar":{
    "color":"#c0c0c0",

    "list": [
      {
        "iconPath":"img/tabBar/one.png",
        "selectedIconPath":"img/tabBar/select.png",
        "pagePath": "pages/one/one",
        "text": "单项目"
      },
      {
        "iconPath": "img/tabBar/two.png",
        "selectedIconPath": "img/tabBar/select.png",
        "pagePath": "pages/two/two",
        "text": "两项目"
      },
      {
        "iconPath": "img/tabBar/many.png",
        "selectedIconPath": "img/tabBar/select.png",
        "pagePath": "pages/many/many",
        "text": "多项目"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

//many.wxml
<!--pages/many/many.wxml-->
<view class='box'>
<view class="box1">
	<view class="box11"><view class="item"></view><view class="item"></view></view>
  <view class="box12"><view class="item"></view><view class="item"></view></view>
</view>
<view class="box2">
	<view class="box12"><view class="item"></view></view>
  <view class="box12"><view class="item"></view><view class="item"></view></view>
</view>
</view>

<view class='box'>
<view class="box1">
<view class="item"></view>
<view class="item2"></view>
<view class="item3"></view>
</view>
<view class="box4">
   <view class="box41"><view class="item"></view></view>
   <view class="box41"><view class="item"></view></view>
   <view class="box42"><view class="item"></view></view>
</view>
</view>

<view class='box'>
<view class="box5">
	<view class="box51"><view class="item"></view><view class="item"></view><view class="item"></view></view>
  <view class="box52"><view class="item"></view></view>
  <view class="box53"><view class="item"></view><view class="item"></view></view>
</view>
<view class="box6">
	<view class="box51"><view class="item"></view><view class="item"></view></view>
  <view class="box52"><view class="item"></view></view>
  <view class="box53"><view class="item"></view><view class="item"></view><view class="item"></view></view>
</view>
</view>

<view class='box'>
<view class="box5">
	<view class="box51"><view class="item"></view><view class="item"></view><view class="item"></view></view>
  <view class="box51"><view class="item"></view><view class="item"></view><view class="item"></view></view>
  <view class="box51"><view class="item"></view><view class="item"></view><view class="item"></view></view>
</view>
<view class="box5">
	<view class="box51"><view class="item"></view><view class="item"></view><view class="item"></view></view>
  <view class="box51"><view class="item"></view><view ></view><view class="item"></view></view>
  <view class="box51"><view class="item"></view><view class="item"></view><view class="item"></view></view>
</view>
</view>


//many.wxss
/* pages/many/many.wxss */
/* pages/two/two.wxss */
.box{
  display: flex;
  justify-content:center;
}
.box1{
	display: flex;
	background-color:#999999;
  width: 150px;
	height:150px;
	border-radius:10%;
	padding: 10px;
  margin: 10px;
}
.box11{
	display: flex;
  flex-wrap: wrap;
  
}
.box12{
	display: flex;
  flex-basis: 100%;
  justify-content: space-between;
}
.box2{
	display: flex;
	background-color:#999999;
  width: 150px;
	height:150px;
	border-radius:10%;
	padding: 10px;
  flex-wrap: wrap;
  align-content: space-between;
  margin: 10px;
}
.box3{
	display: flex;
  justify-content: space-between;
	background-color:#999999;
  width: 150px;
	height:150px;
	border-radius:10%;
	padding: 10px;
  margin: 10px;
}
.box31{
	display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box32{
	display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box4{
	display: flex;
	background-color:#999999;
  align-items: flex-end;
  width: 150px;
	height:150px;
	border-radius:10%;
	padding: 10px;
  margin: 10px;
}
.box41{
	display: flex;
  flex-basis: 100%;
  justify-content: space-between;
	background-color:#999999;
}
.box42{
	display: flex;
  flex-basis: 100%;
	background-color:#999999;
}
.box5{
	display: flex;
  flex-wrap: wrap;

	background-color:#999999;
  width: 150px;
	height:150px;
	border-radius:10%;
	padding: 10px;
  margin: 10px;
}
.box51{
  display: flex;
  flex-basis: 100%;
  justify-content: space-between;
}
.box52{
  display: flex;
  flex-basis: 100%;
  justify-content: center;
}
.box53{
	display: flex;
  flex-basis: 100%;
  justify-content: space-between;
}
.item{
	height:41px;
	width: 41px;
	border-radius: 50%;
	background-color: #000000;
}
.item2{
	height:41px;
	width: 41px;
	border-radius: 50%;
	background-color: #000000;
  align-self: center;
}
.item3{
	height:41px;
	width: 41px;
	border-radius: 50%;
	background-color: #000000;
  align-self:flex-end;
}