微信小程序-宿主环境

25-36

目录

宿主环境

宿主环境包含的内容

通信模型

运行机制

1.启动过程

2.页面渲染的过程

组件

九大类

一、 视图容器

        ①view

        ② scroll-view滚动

        ③ swiper 和 swiper-item轮播

二、基础内容

        ①text长按选中

        ②rich-text 标题

三、表单组件

四、导航组件

十、其他常用组件

        ①button按钮

        ②image照片

        ③navigator（后期讲）

API

三大类

        ①事件监听API

        ②同步 API

        ③异步API

---

宿主环境

 是指的是程序运行所必须的依赖环境

Android系统和iOS系统是两个不同的宿主环境。脱离了宿主环境的软件是没有任何意义的！

手机微信是小程序的宿主环境

借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登陆、地理定位、etc…

宿主环境包含的内容

通信模型

运行机制

组件

API

通信模型

        通信的主体是渲染层和逻辑层

                        ① WXML模板和WXSS样式工作在渲染层

                        ② JS脚本工作在逻辑层

                

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

① 渲染层和逻辑层之间的通信

        由微信客户端进行转发

② 逻辑层和第三方服务器之间的通信

         由微信客户端进行转发

运行机制

1.启动过程

① 把小程序的代码包下载到本地

② 解析app.json全局配置文件

③ 执行局app.js小程序入口文件，调用App()创建小程序实例

④ 渲染小程序首页

⑤ 小程序启动完成

2.页面渲染的过程

① 加载解析页面的.json配置文件

② 加载页面的.wxml 模板和.wxss样式

③ 执行页面的.js 文件，调用Page()创建页面实例

④页面渲染完成

组件

九大类

一、 视图容器

        常见的

        ①view

                普通视图区域

                类似于HTML 中的 div，是一个块级元素

                常用来实现页面的布局效果

        使用

                

<view class="container1">

 <view>A</view>

 <view>B</view>

 <view>C</view>

</view>

.container1 view {

  width:100px;

  height:100px;

  text-align:center;

  line-height:100px;

}

.container1 view:nth-child(1){

  background-color: lightgreen;

}

.container1 view:nth-child(2){

  background-color: lightskyblue;

}

.container1 view:nth-child(3){

  background-color: lightcoral;

}

.container1 {

  display: flex;

  justify-content: space-around;

}

        ② scroll-view滚动

                可滚动的视图区域

                常用来实现滚动列表效果

                

使用：

<scroll-view class="container1" scroll-y>

 <view>A</view>

 <view>B</view>

 <view>C</view>

</scroll-view>

.container1 view {

  width:100px;

  height:100px;

  text-align:center;

  line-height:100px;

}

.container1 view:nth-child(1){

  background-color: lightgreen;

}

.container1 view:nth-child(2){

  background-color: lightskyblue;

}

.container1 view:nth-child(3){

  background-color: lightcoral;

}

/*.container1 {

  display: flex;

  justify-content: space-around;

}*/

.container1 {

  border: 1px solid red;

  width :100px;

  height:120px;

}

        ③ swiper 和 swiper-item轮播

属性        类型        默认值        说明

indicator-dots        boolean        false        是否显示面板指示点

indicator-color        color        rgba(0,0,0,3)       指示点颜色

indicator-active-color        color        #000000        当前选中的指示点颜色

autoplay        boolean        false        是否自动切换

interval        number        5000        自动切换时间间隔

circular        boolean        false        是否采用衔接滑动

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

                

<!--pages/list/list.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-container{

  height:150px; /*轮播图容器的高度*/

}

.item{

  height: 100%;

  line-height: 150%;

  text-align: center;

}

swiper-item:nth-child(1) .item{

  background-color: lightgreen;

}

swiper-item:nth-child(2) .item{

  background-color: lightskyblue;

}

swiper-item:nth-child(3) .item{

  background-color: lightcoral;

}

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>

二、基础内容

        ①text长按选中

                文本组件

                类似于HTML中的span标签，是一个行内元素

<view>

  手机号支持长按选中效果

  <text selectable>13800005056</text>

</view>

        ②rich-text 标题

                富文本组件

                支持把HTML字符串渲染为WXML结构

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

三、表单组件

四、导航组件

⑤ 媒体组件

⑥ map 地图组件

⑦ canvas 画布组件

⑧ 开放能力

⑨ 无障碍访问

十、其他常用组件

        ①button按钮

                按钮组件

                功能比HTML中的button按钮丰富

                通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

<!-- 通过type 属性指定按钮颜色类型-->

<button>普通按钮</button>

<button type="primary">主色调按钮</button>

<button type="warn">警告按钮</button>

<!--size="mini"小尺寸按钮-->

<button size="mini">普通按钮</button>

<button type="primary" size="mini">主色调按钮</button>

<button type="warn" size="mini">警告按钮</button>

<!--plain镂空按钮-->

<button size="mini" plain>普通按钮</button>

<button type="primary" size="mini" plain>主色调按钮</button>

<button type="warn" size="mini" plain>警告按钮</button>

        ②image照片

                图片组件

                image组件默认宽度约300px、高度约240px

<image src="/image/8637823.jpg" mode="heightFix"></image>

        ③navigator（后期讲）

                页面导航组件

                类似于HTML中的a链接

API

方便的调用微信提供的能力

例如：获取用户信息、本地存储、支付功能等。

三大类

        ①事件监听API

        特点：以on开头，用来监听某些事件的触发

        举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

        ②同步 API

        特点1：以Sync结尾的API都是同步API

        特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常

        举例：wx.setStorageSync('key','value')向本地存储中写入内容

        ③异步API

        特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fall、complete接收调用的结果

        举例：wx.request()发起网络数据请求，通过success回调函数接收数据