一、宿主环境
1、宿主环境:宿主环境指的是程序运行时所必须的依赖环境。比如Android和iOS系统是两种不同的宿主环境。安卓版的微信APP是不能在iOS环境中运行的,因此微信小程序一直加载中?,Android是安卓版软件的宿主环境。
2、小程序宿主环境:手机微信是小程序的宿主环境。小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,比如:微信扫码、微信登录、地理位置、微信支付等等。
3、小程序宿主环境包含的内容:(1)通信模型;(2)运行机制;(3)组件;(4)API
二、通信模型
1、通信主体:小程序中的通信主体是渲染层和逻辑层。(1)WXML模板和WXSS样式工作在渲染层;(2)JS脚本工作在逻辑层。
2、小程序通信模型:(1)渲染层和逻辑层之间的通信,由微信客户端进行转发;(2)逻辑层和第三方服务器之间的通信,由微信客户端进行转发。
三、运行机制
1、小程序启动过程:(1)把小程序的代码包下载到本地;(2)解析app.json全局配置文件;(3)执行app.js小程序入口文件,调用App()创建小程序实例;(4)渲染小程序首页;(5)小程序启动完成。
2、小程序页面渲染过程:(1)加载解析页面的.json配置文件;(2)加载页面的.wxml模板和.wxss样式;(3)执行页面的.js文件,调用Page()创建页面实例;(4)页面渲染完成。
四、组件
1、常用组件:view、scroll-view、swiper、swiper-item、image、button、navigator等等。
view:普通视图区域,类似 于HTML中div,是一个块级元素。
sroll-view:可滚动的视图区域,常用来实现滚动列表效果。
swiper和swiper-item:轮廓图容器组件和轮廓图item组件。
button:按钮组件微信小程序一直加载中?,功能比HTML中的button按钮丰富,通过open-type属性可以调用微信提供的各种功能,比如客服、转发、获取用户授权、获取用户信息等等。
image:图片组件,image组件默认宽度300px,高度约240px。
navigator:页面导航组件,类似于HTML的a链接。
swiper组件代码
swiper组件效果样例
image组件代码
image效果图
button组件及效果图
版权声明
本文仅代表作者观点。
本文系作者授权发表,未经许可,不得转载。
发表评论