# 原生小程序
# 什么是小程序?
- 无需下载,用完即走(体积太小,刚发布的压缩包体积最大不能超过1M,2017年4月将1M提升2M)
# 小程序特点
- 体积小
- 同app进行互补的,可以实现app基本的功能
- 微信扫一扫或者是搜索就可以去下载
- 开发周期短,成本较低
# 适配方案
- viewport适配 width = device-width
- 单位:rpx
- iphone6:1rpx = 1物理像素 = 0.5px dpr = 物理像素/设备独立像素 = 2
# 重要的文件
- wxml view结构 ---> html
- wxss view样式 ---> css
- js view行为 ---> js
- json文件:数据 && 配置
# 注册小程序
App()
# 注册页面
Page()
# 数据绑定
- 在data中初始化页面需要的数据,在页面可以直接使用
# 事件(冒泡事件 || 非冒泡事件)
- 冒泡事件:bind + 事件名
- 非冒泡事件:catch + 事件名
# 模板template
- 定义:template 属性:name(标识模板)
- 使用:template 属性:is(模板的name)
- 引入模板结构:
<import src='路径'/>
- 引入模板样式:
@import '路径'
- 传参:
data="{...item}"
(*tip:双中括号)
# 列表渲染
- wx:for
- wx:key(为每个个体元素进行标记)
- 遍历的个体:item
- 遍历的下标:index
# 本地缓存(setStorage, setStorageSync)
- 缓存的是用户本地的数据
- 注意:
- 缓存之前应该先去获取之前本地缓存的数据
- 缓存的新数据是在原有数据的基础上进行的
- 当页面加载的时候onLoad中获取本地缓存数据
- 如果storage中没有缓存过,通过key获取的value为空!
- 如果用户之前没有缓存过的话:初始化一个空对象在storage中
# 音乐播放
- 如何知道音乐在播放或者暂停
- 在app全局变量中设置播放音乐的页面状态
# 分享功能(showActionSheet)
- itemList为按钮的文字数组,数组长度最大为 6
- 个人账号无法使用分享功能,使用企业提供的账号
# 转发功能(button组件下的open-type属性)
- share:触发用户转发
# tab切换(tabBar)
- list:tab 的列表,最少 2 个、最多 5 个 tab,tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:
- pagePath:页面路径,必须在 pages 中先定义
- text:tab 上按钮文字
- iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,
- selectedIconPath:选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
- 当 position 为 top 时,不显示 icon。
# 发送ajax请求实现数据交互(wx.request)
- 测试勾选不校验合法域名、web-view(业务域名)、TLS版本以及SSL证书,实际使用需要https请求
- 为了减轻服务器负担,应当设置全局变量缓存获得的数据留作备用
# 路由跳转
- wx.redirectTo与wx.navigateTo方法需要跳转的应用内非 tabBar的页面的路径 (代码包路径), 路径后可以带参数。
- wx.switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数。