小程序的宿主环境-宿主环境简介
小程序的宿主环境-宿主环境简介
1.什么是宿主环境
宿主环境(host environment)指的是程序运行所必须的依赖环境。例如:
Android系统和iOS系统是两个不同的宿主环境。安卓版的微信App是不能在iOs环境下运行的,所以,Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!
2.小程序的宿主环境
手机微信是小程序的宿主环境。
小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能,例如:微信扫码、微信支付、微信登录、地理定位、etc…
3.小程序宿主环境包含的内容
1.通信的主体
小程序中通信的主题是渲染层和逻辑层,其中:
- WXML模板和WXSS样式工作在渲染层
- JS脚本工作在逻辑层
2.小程序的通信模型
小程序中的通信模型分为两部分:
- 渲染层和逻辑层之间的通信
- 由微信客户端进行转发
- 逻辑层和第三方服务器之间的通信
- 由微信客户端进行转发
小程序的宿主环境-运行机制
1.小程序启动的过程
- 把小程序的代码包下载到本地
- 解析 app.json 全局配置文件
- 执行 app.js 小程序入口文件,调用App()创建小程序实例
- 渲染小程序首页
- 小程序启动完成
2.页面渲染的过程
- 加载解析页面的 .json 配置文件
- 加载页面的 .wxml 模板和 .wxss 样式
- 执行页面的 .js 文件,调用 Page() 创建页面实例
- 页面渲染完成
小程序的宿主环境-组件
1.小程序中组件的分类
小程序中的组件也是有宿主环境提供的,开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类,分别是:
- 视图容器
- 基础内容
- 表单组件
- 导航组件
- 媒体组件
- map地图组件
- canvas 画布组件
- 开放能力
- 无障碍访问
2.常用的视图容器类组件
- view
- 普通视图区域
- 类似于 HTML 中的 div,是一个块级元素
- 常用来实现页面的布局效果
- scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
- swiper 和 swiper-item
- 轮播图容器组件 和 轮播图 item 组件
3.view 组件的基本使用
<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: chartreuse;
}
.container1 view:nth-child(2) {background-color: cornflowerblue;
}
.container1 view:nth-child(3) {background-color: lightpink;
}
.container1 {display: flex;justify-content: space-around;
}
4. scroll-view 组件的基本使用
scroll-y: 竖着滚动
<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: chartreuse;
}
.container1 view:nth-child(2) {background-color: cornflowerblue;
}
.container1 view:nth-child(3) {background-color: lightpink;
}
.container1 {border: 1px solid red;width: 100px;height: 120px;
}
5.swiper 和swiper-item组件的基本使用
实现轮播图
<!-- 轮播图的结构 -->
<swiper class="swiper-container"><!-- 第一个轮播图 --><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: 150px;text-align: center;
}swiper-item:nth-child(1) {background-color: red;
}
swiper-item:nth-child(2) {background-color: royalblue;
}
swiper-item:nth-child(3) {background-color: seagreen;
}
6.swiper 组件的常用属性
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
indicator-dots | boolean | false | 是否显示面板指示点 |
indicator-color | color | ragb(0, 0, 0, .3) | 指示点颜色 |
indicator-active-color | color | #000000 | 当前选中的指示点颜色 |
autoplay | boolean | false | 是否自动切换 |
interval | number | 5000(毫秒) | 自动切换时间间隔 |
circular | boolean | false | 是否采用衔接滑动 |
7.常用的基础内容组件
- text
- 文本组件
- 类似于 HTML 中的 span 标签,是一个行内元素
- rich-text
- 富文本组件
- 支持把 HTML 字符串渲染为 WXML 结构
8.text组件的基本使用
通过text组件的selectable属性,实现长按选中文本内容的效果:
<view>手机号支持长按选中效果<text selectable>12378126812548172</text>
</view>
9.rich-text 组件的基本使用
通过 rich-text 组件的 nodes属性节点,把HTML字符串渲染为对应的UI结构:
常用于渲染来自后端的html文件
<rich-text nodes="<h1 style='color:red'>标题</h1>"></rich-text>
10.其它常用组件
- button
- 按钮组件
- 功能比HTML中的 button 按钮丰富
- 通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
- image
- 图片组件
- image组件默认宽度约 300px、高度约 240px
- navigator
- 页面导航组件
- 类似于 HTML 中的 a 链接
11.button的基本使用
<!-- 按钮组件的基本使用 -->
<!-- 通过 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>
12.image 组件的基本使用
<!-- image 图片组件 -->
<image></image>
<image src="/images/0.0485406259803467.jpg" alt=""/>
13.image 组件的 mode 属性
image 组件的 mode 属性用来指定图片的裁剪和缩放模式,常用的mode属性值如下:
mode值 | 说明 |
---|---|
scaleToFill | (默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素 |
aspectFit | 缩放模式,==保持纵横比缩放图片,使图片的长边能完全显示出来。==也就是说,可以完整的将图片显示出来。 |
aspectFill | 缩放模式,==保持纵横比缩放图片,只保证图片的短边能完全显示出来。==也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
小程序的宿主环境-API
1.小程序API概述
小程序中的API是由宿主环境提供的,通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力,
例如:获取用户信息、本地存储、支付功能等。
2.小程序API的3大分类
小程序官方把API分为了如下 3 大类:
- 事件监听API
- 特点:以on开头,用来监听某些事件的触发
- 举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
- 同步API
- 特点1:以Sync结尾的API都是同步API
- 特点2:同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
- 举例:wx.setStorageSync(‘key’,‘value’)向本地存储中写入内容
- 异步API
- 特点:类似于jquery中的==$.ajax(options)==函数,需要通过success、fail、complete接收调用的结果
- 举例:wx.request()发起网络数据请求,通过sucess回调函数接收数据
小程序的宿主环境-宿主环境简介相关推荐
- 微信小程序 一 小程序的创建、宿主环境、常用组件、开发上线等
小程序简介 1. 小程序与普通网页开发的区别 运行环境不同 网页运行在浏览器环境中 小程序运行在微信环境中 API 不同 由于运行环境的不同,所以小程序中, 无法调用 DOM 和 BOM 的 API. ...
- 微信小程序开发系列一:微信小程序的申请和开发环境的搭建
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...
- 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 1
我最近也刚刚开始微信小程序的开发,想把我自学的一些心得写出来分享给大家. 这是第一篇,从零开始学习微信小程序开发.主要是小程序的注册和开发环境的搭建. 首先我们要在下列网址申请一个属于自己的微信小程序 ...
- 如何才能防止小程序在激烈的市场环境中不被出局
微信小程序发布至今,已有接近两年.在这两年之中,微信小程序的数量呈爆发式增长,应用数已经过百万个,日活跃用户已经达到了惊人的两亿以上.微信小程序也已经由当初的"蓝海"转入" ...
- 【微信小程序】根据当前运行环境调用不同的接口地址的一些方法
问题描述 在项目的不同阶段,需要调用不同环境的接口,然后小程序目前并未提供这个很重要的功能. 解决方法 目前没有找到非常满意的方法,提供两个妥协方案 1.不同环境配置不同的域名,通过全局变量控制,发布 ...
- Mpvue+koa开发微信小程序——腾讯云开发环境的搭建及部署实现真机测试
为什么写这篇文章? 之前写过一篇文章:微信小程序开发错误:LoginError {type: "ERR_WX_GET_USER_INFO"}解决方法 有的伙伴在这篇文章中评论为什么 ...
- ieda ts文件报错_使用TS开发微信小程序(1):环境搭建——VSCode+TS
前言 现在接到小程序需要改版的需求,由于使用Ionic的经验,希望以后能够统一开发语言降低开发成本,所以想使用TypeScript进行开发. 开发前准备工作 先是看官网,在微信小程序的官方开发文档中找 ...
- 小程序Windows和linux,改进后的《自动显示天气预报》小程序(Linux和Windows环境都可以)...
改进后的<自动显示天气预报>小程序(Linux和Windows环境都可以) 时间:2006/7/19 6:30:34 作者:佚名 人气:60 这次改进,主要是增加了图象的获取,并提供了一个 ...
- 微信小程序云开发-微信小程序账号申请及新手环境配置
申请一个微信小程序账号 在微信开发时,我们yx时候可能需要用到微信小程序,微信小程序云开发需要使用注册的小程序appid,测试和游客进入是没有云开发的功能,所以我们需要注册一个微信小程序账号.在注册账 ...
- 钉钉小程序如何判断其当前环境
前段时间公司要做一个内部给销售用的钉钉小程序,因为之前刚做了一个微信小程序(也是一边学一边做,各种采坑,后面会总结一些踩过的坑,大家一起学习),本以为也就差不多,结果-一言难尽,今天就来说说我查了半天 ...
最新文章
- Maven配置JRE版本
- Oracle 快速插入1000万条数据的实现方式
- python字符串中某个字符修改_Python中修改字符串的四种方法
- Java 如何将String转化为Int
- [转]HTTP协议及其请求头分析
- HDU - 3804 Query on a tree(树链剖分+线段树+离线处理)
- web service design time table
- python字典的值可以是字典吗_python字典的值可以是字典吗
- 「初步」Spring与commons的BeanUtil.copyProperties
- qt判断读入的字符串是否含有英文_重复的子字符串
- Java新手学习路线
- SpringCloud实现集群和负载均衡
- Infor 成功举办 Infor Next China
- c:forEach无法显示信息的可能原因以及需要注意的地方
- 信息安全密码学期末复习重点总结
- 激光扫描测距仪的实质就是3D激光雷达
- python矩阵和向量乘法总结
- 卫星图瓦片爬取之google卫星图偏移的问题
- 戴森向小狗下刀,吸尘器市场中外乱战开启?
- PLA在计算机领域是什么意思,pla(pla是什么工作)
热门文章
- 基于 Retina-GAN 的视网膜图像血管分割
- 是什么撑起了极兔快递近200亿美元的估值?
- 编程之美4.7蚂蚁爬杆扩展问题附猎人抓狐狸(必胜策略)
- 游戏的分类及相关热点
- 正版星界边境服务器,《星界边境(Starbound)》正式版联机教程
- 我走进了微缩的“物联国”
- OSChina 周六乱弹 —— 我媳妇是条蛇
- 解决vue项目运行npm run serve报错的问题
- 转:马明哲:拥有执行力才能让你强大
- linux删除 grub rescue,删除Ubuntu后 开机grub rescue无法进入BIOS