宿主环境(host environment)指的是程序运行所必须的依赖环境。
例如:Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信 App 是不能在 iOS 环境下运行的,所以,Android 是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
手机微信是小程序的宿主环境,如图所示:
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码、微信支付、微信登录、地理定位、etc…
小程序中通信的主体是渲染层和逻辑层,其中:
小程序中的通信模型分为两部分:
① 渲染层和逻辑层之间的通信
② 逻辑层和第三方服务器之间的通信
小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
实现三个图形水平排列
<view class="container1">
<view>Aview>
<view>Bview>
<view>Cview>
view>
/* pages/test/test.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: brown;
}
.container1 view:nth-child(2){
background-color: cadetblue;
}
.container1 view:nth-child(3){
background-color: blue;
}
.container1{
/* 将一个元素设置为弹性容器,使得其内部的子元素可以使用弹性属性进行布局。 */
display: flex;
/* 让子元素在弹性容器中平均分布,并在子元素之间以及容器的两侧留有一定的间距,从而实现一种对称的排列效果。 */
justify-content: space-around;
}
实现如图的纵向滚动效果:
<scroll-view class="container1" scroll-y>
<view>Aview>
<view>Bview>
<view>Cview>
scroll-view>
/* pages/test/test.wxss */
.container1 view{
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.container1 view:nth-child(1){
background-color: brown;
}
.container1 view:nth-child(2){
background-color: cadetblue;
}
.container1 view:nth-child(3){
background-color: blue;
}
.container1{
width: 100px;
/* 给scroll-view一个固定高度 */
height: 120px;
}
实现如图的轮播图效果:
wxml代码
<swiper class="swiper-container"
indicator-dots
indicator-color="white"
indicator-active-color="gray"
autoplay
interval="2000"
circular>
<swiper-item>
<view class="item">Aview>
swiper-item>
<swiper-item>
<view class="item">Bview>
swiper-item>
<swiper-item>
<view class="item">Cview>
swiper-item>
swiper>
wxss代码
.swiper-container{
height: 100px;
}
.item{
height: 100px;
line-height: 100px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: cadetblue;
}
swiper-item:nth-child(2) .item{
background-color: coral;
}
swiper-item:nth-child(3) .item{
background-color: blue;
}
① text
② rich-text
通过 text 组件的 selectable 属性,实现长按选中文本内容的效果:
通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构:
① button
② image
③ navigator
<button>默认按钮button>
<button type="primary">主色调按钮button>
<button type="warn">报警按钮button>
<button size="mini">默认按钮button>
<button size="mini" type="primary">主色调按钮button>
<button size="mini" type="warn">报警按钮button>
<button size="mini" plain>默认按钮button>
<button size="mini" type="primary" plain>主色调按钮button>
<button size="mini" type="warn" plain>报警按钮button>
<image>image>
<image src="/images/高圆圆.jpeg" mode="aspectFill">image>
image{
/* image有默认的宽和高 */
border: 1px solid red;
}
image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的 mode 属性值如下:
小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:获取用户信息、本地存储、支付功能等。
小程序官方把 API 分为了如下 3 大类:
举例:wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容
结束!!!!!!
我们若凭信仰而战斗,就有双重的武装。---柏拉图