微信小程序之旅
- 一 、小程序简介
- 二、小程序的作用
- 三、准备相关材料
- 四、开发小程序必备知识
- 五、Vxml语法
- 1.数据绑定
- 生命周期钩子函数
- 2.事件绑定
- 3.模板使用
- 4.数据存储
- 5.事件委托&事件数据传递
- 轮播图片点击跳转
- 传递事件数据
- currentTarget和target的区别
- 6.数据交互
- 7.不同页面之间通信
一 、小程序简介
1.[微信](file:///https://baike.baidu.com/item/微信/3905974)小程序(wei xin xiao cheng xu),简称[小程序](file:///https://baike.baidu.com/item/小程序),英文名Mini Program,是一种不需要下载安装即可使用的[应用](file:///https://baike.baidu.com/item/应用) ( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )
- 小程序刚发布的时候要求压缩包的体积不能大于1M,,否则无法通过,在2017年4月做了改进,由原来的1M提升到2M;
- 2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。
二、小程序的作用
- 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用
- 通过扫一扫或者在微信搜索即可下载
- 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选
- 连接线上线下
- 开发门槛低, 成本低
三、准备相关材料
- 微信开发者工具
- 官网:[https://mp.weixin.qq.com/](file:///https://mp.weixin.qq.com/)
- 下载地址[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315](file:///https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315)
- 准备小程序账号
四、开发小程序必备知识
- 小程序没有DOM对象,
- 组件化开发,具备特定功能效果的代码集合
- 体积小,单个压缩包体积不能大于2M,否则无法上线
- 小程序的四个重要文件的文件
- *.js
- *.wxml —> view结构 ----> html
- .wxss —> view样式 -----> css
- . json ----> view 数据 -----> json文件
- 小程序适配方案:rpx(response pixel)响应式像素单位
- 小程序适配单位:rpx
- 规定任何屏幕下宽度为750rpx
- 小程序会根据屏幕的宽度不同自动计算rpx值的大小
- iphone6下:1rpx = 1物理像素 = 0.5px
设备 | rpx换算px(屏幕宽度/750) | px换算rpx(750/屏幕宽度) |
IPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
IPhone6 | 1rpx = 0.5px | 1px = 2rpx |
IPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
- 必备知识
- 理解事件机制
- 理解组件化
- 理解数据绑定
- Flex布局
- 移动端适配方案
五、Vxml语法
1.数据绑定
**概念:**和Vue一样数据可以初始化在当前页面的管理内存的data中,页面中使用的数据会自动去data里找
初始化数据
*.js文件中的data选项中。
使用数据
模板结构中使用双大括号{{message}}
注意事项:小程序中为单项数据流 model ---->> view
修改数据
生命周期钩子函数
2.事件绑定
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递
冒泡事件列表:网络地址 [https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html](file:///https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html)
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递
非冒泡事件:表单事件和自定义事件通常是非冒泡事件
[https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html](file:///https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html)
- bind绑定:事件绑定不会阻止冒泡事件向上冒泡
- catch绑定:事件绑定可以组织冒泡事件向上冒泡
3.模板使用
组件
模板
1). 定义模板:name=‘模板名字’
2). 使用模板
3). 使用模板样式
4.数据存储
- 存数据:setStorage, 同步: setStorageSync
- 获取数据:getStorage 同步: getStorageSync
5.事件委托&事件数据传递
轮播图片点击跳转
事件委托给父元素
传递事件数据
data-’传递数据key’ = value
currentTarget和target的区别
- target指向的是触发事件的元素
- currentTarget指向的是捕获事件的元素currentTarget 和target的区别
6.数据交互
发送请求
7.不同页面之间通信
1.a页面
2.b页面