小程序基本构成 / 小程序设计与开发 #3

组件

由一个个组件来构成页面的样式，好比房子的地基、墙体、门、窗等。
常用的组件是 view、 text、 image、 video、 map

输入时：view，然后按 tab, 会智能被全代码。

<text>这是文本</text>

<view> hello world! </view>

<image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>

<icon class="icon-box-img" type="success" size="93"></icon>
<icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon>

<input class="weui-input" auto-focus placeholder="请输入"/>

页面的生命周期

页面从产生到销毁的过程，主要是生命周期函数(钩子函数)，是自动调用的。

onLoad: 页面加载,一个页面只会调用一次，常用于获取调用的query参数、数据库访问。
eg:

onLoad: function (options) {
  console.log(1, "onload, 加载数据")
},

onShow: 页面显示,每次打开页面都会调用一次。
onReady: 页面初次渲染完成,一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏,当navigateTo或底部tab切换时调用。
onUnload: 页面卸载,当redirectTo或navigateBack的时候调用。

WXSS（类似css样式）

WXSS主要控制页面的样式，比如页面的布局，字体大小、颜色、阴影等。

文档 |
css文档

@import  ‘./assets.wxss’;  //导入样式表

.reader{
 font-size: 19px;
 padding-bottom: 10rpx;
 border-bottom: 1rpx solid rgb(150, 148, 148); 
 }

.image{
  display:flex;
  width: 100%;
  margin: auto;
}