宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:
Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在IOS环境下运行的,所以,Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
手机微信是小程序的宿主环境,如图所示:
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码,微信支付,微信登录,地里定位,etc等。
小程序中通信的主体是渲染层和逻辑层,其中:
小程序的通信模型分为两部分
app.json
全局配置文件app.js
小程序入口文件,调用App()
创建小程序实例.json
配置文件.wxml
模板和.wxss
样式.js
文件,调用Page()
创建页面实例小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构,官方把小程序的组件分为了9大类,分别是:
视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问。
view
scroll-view
swiper 和 swiper-item
<!-- 轮播图的结构 -->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray">
<!-- 第一个轮播图 -->
<swiper-item>
<view class="item">
A
</view>
</swiper-item>
<!-- 第二个轮播图 -->
<swiper-item>
<view class="item">
B
</view>
</swiper-item>
<!-- 第三个轮播图 -->
<swiper-item>
<view class="item">
C
</view>
</swiper-item>
</swiper>
/* 轮播图样式 */
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightgreen;
}
swiper-item:nth-child(2) .item{
background-color: lightblue;
}
swiper-item:nth-child(3) .item{
background-color: lightpink;
}
swiper组件的常用属性
text:文本组件,类似于HTML中的span标签,是一个行内元素。
通过text
组件的selecttable
属性,实现长按选中文本内容的效果:
<view class="textsj">
手机号(长按选中):
<text selectable>18888888888</text>
</view>
rich-text:富文本组件,支持把HTML字符串渲染为WXML结构。
通过rich-text
组件的nodes
属性节点,把HTML字符串渲染为对应的UI结构:
button:
button
按钮丰富open-type
属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)image:
image组件的mode属性用来指定图片的裁剪和缩放模式,常用的mode
属性如下:
navigator:
a
链接官方把API分为如下3大类:
on
开头,用来监听某些事件的触发wx.onWindowResize(function callback)
监听窗口尺寸变化的事件Sync
结尾的API都是同步APIwx.setStorageSync('key','value')
向本地存储中写入内容Jquery
中的$.ajax(options)
函数,需要通过success
、fail
、complete
接收调用的结果wx.request()
发起网络数据请求,通过success
回调函数接收数据