宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:

Android系统和IOS系统是两个不同的宿主环境。安卓版的微信App是不能在IOS环境下运行的,所以,Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!

小程序的宿主环境

手机微信是小程序的宿主环境,如图所示:

小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码,微信支付,微信登录,地里定位,etc等。

小程序宿主环境包含的内容

  1. 通信模型
  2. 运行机制
  3. 组件
  4. API

通信主体

小程序中通信的主体是渲染层和逻辑层,其中:

  1. WXML模板和WXSS样式工作在渲染层
  2. JS脚本工作在逻辑层

小程序的通信模型

小程序的通信模型分为两部分

  1. 渲染层和逻辑层之间的通信

    • 由微信客户端进行转发
  2. 逻辑层和第三方服务器之间的通信

    • 由微信客户端进行转发

小程序启动的过程

  1. 把小程序的代码包下载到本地
  2. 解析app.json全局配置文件
  3. 执行app.js小程序入口文件,调用App()创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成

页面渲染的过程

  1. 加载解析页面的.json配置文件
  2. 加载页面的.wxml模板和.wxss样式
  3. 执行页面的.js文件,调用Page()创建页面实例
  4. 页面渲染完成

小程序中的组件

小程序中的组件也是由宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构,官方把小程序的组件分为了9大类,分别是:

视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问。

常用的视图容器类组件

view

  • 普通视图区域
  • 类似于HTML中的div,是一个块级元素
  • 常用来实现页面的布局效果

scroll-view

  • 可滚动的视图区域
  • 常用来实现滚动列表效果

swiper 和 swiper-item

  • 轮播图容器组件 和 轮播图item组件

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

  • 按钮组件
  • 功能比HTML中的button按钮丰富
  • 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

image:

  • 图片组件
  • image组件默认宽度约为300px、高度约为240px

image组件的mode属性用来指定图片的裁剪和缩放模式,常用的mode属性如下:

navigator:

  • 页面导航组件
  • 类似于HTML中的a链接

小程序API

官方把API分为如下3大类:

事件监听API

  • 特点:以on开头,用来监听某些事件的触发
  • 举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件

同步API

  • 特点1:以Sync结尾的API都是同步API
  • 特点2:同步API的执行结构,可以通过函数返回值直接获取,如果执行出错会抛出异常
  • 举例:wx.setStorageSync('key','value')向本地存储中写入内容

异步API

  • 类似于Jquery中的$.ajax(options)函数,需要通过successfailcomplete接收调用的结果
  • 举例:wx.request()发起网络数据请求,通过success回调函数接收数据
End
最后修改:2023 年 03 月 15 日
如果觉得我的文章不错,请随手点赞~