小程序的宿主环境

Fade_VV
307 阅读4分钟

宿主环境简介

  • 1.什么是宿主环境 宿主环境（host environment）指的是程序运行所必须的依赖环境。例如：Android 系统和iOS 系统是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的，所以，android是安卓软件的宿主环境，脱离了宿主环境的软件是没有任何意义的。
  • 2.小程序的宿主环境
    image.png 手机微信是小程序的宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位、etc...
  • 3.小程序宿主环境包含的内容
    • 1.通信模型
    • 2.运行机制
    • 3.组件
    • 4.API

通信模型

  • 1.通信的主体
    小程序中通信的主体是渲染层和逻辑层，其中：
    • 1.WXML模板和WXSS样式工作在渲染层
    • 2.JS脚本工作在逻辑层 image.png
  • 2.小程序的通讯模型
    小程序中的通信模型分为两个部分：
    • 1.渲染层和逻辑层之间的通信
      • 由微信客户端进行转发
    • 2.逻辑层和第三方服务器之间的通信
      • 由微信客户端进行转发

image.png

运行机制

  • 1.小程序启动的过程

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

  • 2.常用的视图容器类组件

    • 1.view
      • 普通视图区域
      • 类似于HTML中的div，是一个块级元素
      • 常用于实现页面的布局效果
    • 2.scroll-view
      • 可滚动的视图区域
      • 常用来实现滚动列表效果
    • 3.swiper和swiper-item
      • 轮播图容器组件和轮播图item组件

  • 3.view组件的基本使用

    • 实现如图的flex横向布局效果
      image.png

  • list.wxml部分代码

//这里是 定义了一个view元素，class类为container1,这个css类不是微信提供的，而是我们自己开发的，位于文件list.wxss里：
<view class="container1">
    <view>a</view>
    <view>b</view>
    <view>c</view>
</view>
  • list.wxss部分代码
    注： :nth-child(n)  指的是 选择父元素的第n个子元素  n大于0 从1开始
.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 50px;
}
.container1 view:nth-child(1){
    background-color: red;
}
.container1 view:nth-child(2){
    background-color: orange;
}
.container1 view:nth-child(3){
    background-color: yellow;
}
.container1{
    display: flex;
    justify-content: space-around;
}
  • 4.scroll-view组件的基本使用 如图：
    image.png

list.wxml

<scroll-view class="container1" scroll-y>
    <view>a</view>
    <view>b</view>
    <view>c</view>
</scroll-view>

list.wxss

.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 50px;
}
.container1 view:nth-child(1){
    background-color: red;
}

.container1 view:nth-child(2){
    background-color: orange;
}
.container1 view:nth-child(3){
    background-color: yellow;
}
.container1{
    border: 1px solid green;
    width: 100px;
    height: 120px;
}

5.swiper 和 swiper-item 组件的基本使用 如图：

image.png swiper.wxml

<!--pages/swiper/swiper.wxml-->
<swiper class="swiper-container" indicator-dots>
<!-- 第一项 -->
<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.wxss

/* pages/swiper/swiper.wxss */
.swiper-container{
    height: 150px; /*轮播容器的高度*/
}
.item{
height: 100%;
line-height: 150px;
    text-align: center;
}
swiper-item:nth-child(1) .item{
    background-color: lightblue;
}
swiper-item:nth-child(2) .item{
    background-color: lightgreen;
}
swiper-item:nth-child(3) .item{
    background-color: lightgray;
}
  • 6.swiper组件的常用属性

image.png

<swiper class="swiper-container" 
indicator-dots 
indicator-color="white" 
indicator-active-color="red"
autoplay
interval="3000"
circular>
  • 7.常用的基础内容组件
    • 1.text
      • 文本组件
      • 类似HTML中的span标签，
    • 2.rich-text
      • 富文本组件
      • 支持把HTML字符串渲染成WXML结构
  • 8.text组件的基本使用
    • 通过text组件selectable属性，实现长按选中文本内容效果：
<view>
手机号支持长按选中效果
    <!-- <text selectable>18957146775</text> -->
    <text user-select>18957146775</text>
</view>
  • 9.rich-text组件的基本使用
<rich-text nodes="<h1 style='color : red;'>标题</h1>"></rich-text>
  • 10.其它常用组件
    • button
      • 按钮组件
      • 功能比HTML中的button按钮丰富
      • 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
    • image
      • 图片组件
      • image组件默认宽度约300px、高度约240px
    • navigator（）
      • 页面导航组件
      • 类似于HTML中的a链接
  • 11.button组件的基本使用

image.png

<view>----------通过type指定按钮类型----------</view>
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<view>----------小尺寸按钮----------</view>
<button size="mini">小尺寸按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>

<view>----------镂空按钮----------</view>
<button size="mini" plain>小尺寸按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>
  • 12.image组件的基本使用
<image></image>
<image src="/images/1.png"></image>

image.png 如：<image src="/images/1.png" mode ="aspectFit"></image>

API

  • 1.小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地保存、支付功能。

  • 2.小程序API的3大分类

    • 1.事件监听API
      • 特点：以on开头，用来监听事件的触发
      • 举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
    • 2.同步API
      • 特点1：以Sync结尾的API都是同步API
      • 特点2：同步API的执行结果，可以通过函数方返回值直接获取，如果执行出错会抛出异常
    • 3.异步API
      • 特点：类似于JQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
      • 举例：wx.requery()发起网络数据请求，通过success回调函数接收数据。
avatar
文章
阅读
粉丝