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回调函数接收数据