微信小程序开发|宿主环境详解
🖐本节学习目标:
✅深入了解小程序的宿主环境组成
1.小程序的宿主环境
手机微信是小程序的宿主环境,小程序借助宿主环境提供的能力,可以实现许多普通网页不能完成的功能。例如:小程序调用微信提供的 API 实现扫码,支付等功能。
小程序的宿主环境包含的内容:
通信模型
运行机制
组件
API
2.通信模型
1.通信的主体
✋小程序中通信的主体是渲染层和逻辑层,其中:
WXML 模板和 WXSS 样式工作在渲染层
JS 脚本工作在逻辑层
2.小程序的通信模型
✋小程序的通信模型分为两部分:
<font color=blue>渲染层和逻辑层之间的通信</font>
<font color=blue>逻辑层和第三方服务器之间的通信</font>
两者都通过微信客户端进行转发
3.运行机制
1.小程序的启动过程
✋把小程序的代码包下载到本地
✋解析 app.json 全局配置文件
✋执行 app.js 小程序入口文件,<font color=blue>调用 App() 创建小程序实例</font>
✋渲染小程序首页
✋小程序启动完成
2.页面渲染的过程
✋加载解析页面的 .json 配置文件
✋加载页面的 .wxml 模板和 .wxss 样式
✋执行页面的 .js 文件,<font color=blue>调用 Page() 创建页面实例</font>
✋页面渲染完成
4.组件
1.小程序中组件的分类:
✋小程序中的组件也是由<font color=red>宿主环境</font>提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了 9 大类,分别是:
<font color=blue>视图容器</font>
<font color=blue>基础内容</blue>
<font color=blue>表单组件</font>
<font color=blue>导航组件</font>
体组件
map 地图组件
canvas 画布组件
开放能力
无障碍访问
2. 常用的视图容器类组件
🌏view
普通视图区域
类似于 HTML 中的 div,是一个块级元素
常用来实现页面的布局效果
<kbd>🍁例如:使用 flex 实现横向布局。</kbd>
<font color=blue>wxml 代码:</font>
<font color=green>wxss 代码:</font>
<font color=red>实现效果:</font>
🌏scroll-view
可滚动的视图区域
常用来实现滚动列表效果
<kbd>利用 scroll-view 实现上下滚动的效果</kbd>
<font color=blue>wxml 代码:</font>
<font color=green>修改的 wxss 代码:</font>
<font color=red>实现效果:</font>
🌏swiper 和 swiper-item
轮播图容器组件 和 轮播图 item 组件
<kbd>利用这两个组件可以实现轮播图效果:</kbd>
<font color=blue>wxml 代码:</font>
<font color=green>wxss 代码:</font>
<font color=red>实现效果:</font>
3.常用的基础内容组件
🌏text
文本组件
类似于 HTML 中的 span 标签,是一个行内元素
<kbd>实现长按选中文本内容的效果</kbd>
🌏rich-text
富文本组件
支持把 HTML 字符串渲染为 WXML 结构
<kbd>把 HTML 字符串渲染为对应的 UI 结构<kbd>
4.其他常用组件
🌏button
按钮组件
功能比 HTML 中的 button 按钮丰富
通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
🌏image
图片组件
image 组件默认宽度约 300px、高度约 240px
🌏navigator
页面导航组件
类似于 HTML 中的 a 链接,实现页面的跳转
5.API
✋小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,例如:实现支付,扫码等功能。
小程序 API 的 3 大分类:
🌏事件监听 API
特点:<font color=red>以 on 开头,用来监听某些事件的触发</font>
举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
🌏同步 API
特点 1:以 Sync 结尾的 API 都是同步 API
特点 2:<font color=red>同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常</font>
举例:wx.setStorageSync('key', 'value') 向本地存储中写入内容
🌏异步 API
特点:<font color=red>类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果</font>
举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据
6.总结
本节我们学习了小程序的宿主环境以及小程序宿主环境的具体内容。
版权声明: 本文为 InfoQ 作者【陈橘又青】的原创文章。
原文链接:【http://xie.infoq.cn/article/7f3a94000b7fd1c8c94312e59】。文章转载请联系作者。
评论