-
什么是宿主环境？
程序运行所必须的依赖环境
-
小程序的宿主环境
手机微信是小程序的宿主环境
借助宿主环境提供能力，完成许多普通网页无法完成的饿功能-
1.通信模型
-
渲染层
wxml与wxss
-
逻辑层
js脚本
-
渲染层与逻辑层的通信
微信客户端转发
-
逻辑层和第三方服务器之间的通信
微信客户端转发
-
-
2.运行机制
-
启动过程
1.把小程序代码包下载到本地 2.解析app.json全局配置文件 3.执行app.js入口文件 4.渲染小程序首页 5.小程序启动完成 -
页面渲染过程
1.加载解析页面的json配置文件 2.加载页面的wxml鱼wxss文件 3.执行页面js文件，创建页面实例 4.页面渲染完成
-
-
3.组件
-
组件的分类
1.视图容器 2.基础内容 3.表单组件 4.导航组件 5.媒体组件 6.map地图组件 7.canvas组件 8.开放能力 9.无障碍访问- 视图容器组件
1.view 普通视图区域 块级元素 实现页面布局 2.scroll-view 可滚动区域 常用来实现滚动列表效果 3.swiper和swiper-item 轮播图容器组件 轮播图item项组件
- 视图容器组件
-
view基本使用
flex横向布局效果
<view class="container1"> <view>1</view> <view>2</view> <view>3</view> </view>样式
/**index.wxss**/ .container1 view { width: 100px; height: 100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1) { background-color: lightgreen; } .container1 view:nth-child(2) { background-color: lightskyblue; } .container1 view:nth-child(3) { background-color: red; } .container1 { display: flex; justify-content: space-around; } -
scorll-view基本使用
实现滚动效果
<scroll-view class="container1" scroll-y> <view>1</view> <view>2</view> <view>3</view> </scroll-view>样式
/**index.wxss**/ .container1 view { width: 100px; height: 100px; text-align: center; line-height: 100px; } .container1 view:nth-child(1) { background-color: lightgreen; } .container1 view:nth-child(2) { background-color: lightskyblue; } .container1 view:nth-child(3) { background-color: red; } .container1 { height: 120px; /* 设置固定高度 */ border: 1px solid black; width: 100px; } -
swiper常用属性
indicator-dots 底部小圆点 indicator-color 设置未激活小原点颜色 indicator-active-color 设置激活小原点颜色 autoplay 是否自动切换 interval 自动切换时间间隔 circular 是否采用衔接滑动wxml
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" > <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>wxss
/**index.wxss**/ .swiper-container swiper-item { width: 100px; height: 100px; text-align: center; line-height: 100px; } .swiper-container swiper-item:nth-child(1) { background-color: lightgreen; } .swiper-container swiper-item:nth-child(2) { background-color: lightskyblue; } .swiper-container swiper-item:nth-child(3) { background-color: red; } -
常用的基础内容组件
- text
文本组件 行内元素长按选中效果
<view> <text selectable>111</text> </view> - rich-text
富文本组件将html字符串渲染为wxml结构
通过nodes指定<view> <rich-text nodes="<h1>aaa</h1>"></ritext> </view>
- text
-
其他常用组件
-
button
按钮组件
open-type可以调用微信提供各种功能type 指定色调类型属性 size 尺寸 mini 小 plain 镂空的按钮 -
image
图片组件
默认宽度300px，高度240pxmode: 用来指定图片的裁剪和缩放模式 scaleToFill 默认，不保持纵横比缩放图片 aspectFit 保持纵横比，完整显示图片，会有多余部分 aspectFill 保持纵横比，短边完全显示，长边截取 widthFix 宽度不变，高度自适应 heightFix 高度不变，宽度自动变化
-
-
-
4.API
获取用户信息、本地存储、支付功能
-
事件监听API
on来监听事件触发 wx.onWindowResize监听窗口尺寸变化事件 -
同步API
Sync结尾 wx.setStorageSync('key', 'value') -
异步API
类似jQuery的$.ajax(options)，需要success，fail、complete接收调用结果 wx.request()发起网络请求success回调函数接收数据
-
-