1-2宿主环境

什么是宿主环境

• 指的是程序运行所必须的依赖环境。
• Android系统和ios系统是两个不同的宿主环境，安卓版的app是不能在ios系统上运行的。

小程序的宿主环境

🍕🍕🍕

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

通信的主体

🍔🍔🍔

• 渲染层、逻辑层
• Wxml模板和wxss样式是工作在渲染层的
• js脚本工作在逻辑层
  

通信模型

• 🐱‍🏍🐱‍🏍🐱‍🏍渲染层和逻辑层之间的通信
• 逻辑层和第三方服务器之间的通信
• 都是通过微信客户端进行转发
  

启动的过程

• 🍔🍔🍔代码包下载到本地
• 解析app.json全局配置文件
• 执行app.js入口文件，调用App()创建小程序实例
• 渲染首页

组件的分类

• 🚜🚜🚜官方分为了9大类，宿主环境提供的。
• 视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布、开放能力、无障碍访问

常用的视图容器类组件

• 🤣🤣🤣view、普通视图区域，类似于html的div,是一个块级元素。
• scroll-view，可滚动的视图区域，常用来实现滚动列表效果
• swiper和swiper-item，轮播图容器组件和轮播图item组件

view组件的基本使用

• list.wxml

<view class="container1"><view>1</view><view>2</view><view>3</view>
</view>

• list.wxss

.container1{margin-top: 50px;
}
.container1 view{width: 100px;height: 100px;text-align: center;
}

scroll-view基本使用

<scroll-view class="container1" scroll-y><view>1</view><view>2</view><view>3</view>
</scroll-view>

• scroll-y 属性控制滚动方向

swiper和swiper-item基本使用

• swiper 标签包裹其他元素

<swiper class="swiper-container" indicator-dots><swiper-item><view class="item"> 1</view></swiper-item><swiper-item><view class="item">2</view></swiper-item><swiper-item><view class="item">3</view></swiper-item>
</swiper>

• 🧨🧨🧨 indicator-dots 属性控制是否显示小圆点
• autoplay属性控制是否自动切换
• interval属性控制间隔时间
• circular属性控制是否衔接滑动

基础内容组件

• 🍳🍳🍳text:文本组件、类似于html中的span标签，一个行内元素
• rich-text：富文本组件，支持把html字符串渲染为wxml结构

其它常用组件

• button:可以通过open-type属性调用微信提供的各种功能(客服、转发、获取用户授权、用户信息等)
• image:图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。使用 svg 格式且 mode=scaleToFill 时，WebView 会居中（除非 svg 里加上preserveAspectRatio=“none”），Skyline 则会撑满。svg 格式不支持百分比单位。svg 格式不支持

<image src='https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg' mode="scaleToFill"/> 
//mode 属性控制图片裁剪、缩放的模式,

小程序Api

• 🚜🚜🚜是由宿主环境提供的，通过这些丰富的小程序api，可以方便的调用微信提供的能力，如：获取用户信息，本地存储，支付功能等。

分为三大类

• 事件监听api

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

• 同步api

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

• 异步api

• 特点：类似于jquery中的$.ajax(options)函数，需要通过 success/fail/complete 接收调用的结果
• wx.request() 发起网络请求，通过success回调函数接收数据