一、认识小程序
1、什么是小程序?
- 官网解释:微信小程序是一种全新的连接用户和服务的方式,它可以在微信内被便捷的获取和传播,同时具有出色的使用体验
- 理解:小程序是微信生态的一部分,它提供了一种更加方便和高效的用户交互方式
2、小程序的优势
1)用户使用的便捷性
普通app我们的使用过程:下载-打开-注册-使用
小程序:打开(扫码/搜索)- 使用
2)小程序的用户体验,远远高于公众号和h5
3)释放手机内存空间,小程序不需要安装,而且有规定的大小(目前不能超过8M)
4)让手机界面更加简洁
3、小程序开发的必要性
1)由于小程序的各种好处,使用小程序的用户越来越多
2)从公司的角度,有自己的小程序越来越重要
3)为了给用户带来更加便捷的使用体验,需要开发一款对应的小程序
- 开发出来的小程序,用户体验优于h5,并且底层可以调用原生的各种接口
- 可以做到一端开发,多端运行(ios、安卓)
4、Webview的发展和不足
二、小程序的诞生
1、小程序的历史
- 2016年9月21日发布了小程序的内测版本
- 2017年1月9日正式上线
小程序的版本追踪:https://developers.weixin.qq.com/miniprogram/dev/framework/release/
三、开发前准备工作
1、小程序预备知识
2、开发前准备
1)申请AppID
微信公众平台:https://mp.weixin.qq.com
3、小程序开发工具
开发工具选择:官方微信web开发者工具,VSCode
四、小程序的目录结构
五、小程序初体验
1、小程序数据绑定
2、小程序列表渲染
3、小程序事件监听
<!-- 1、小程序的数据绑定 -->
<view>hello {{name}}</view>
<view>我的年龄:{{age}}</view>
<!-- 2、小程序的列表渲染 wx:for-->
<view wx:for="{{students}}">{{item.name}}</view>
<!-- 3、小程序事件监听 -->
<view>当前计数:{{counter}}</view>
<button size="mini" bindtap="handleBtnClick">+</button>
六、小程序的MVVM架构
- DOM Listeners: ViewModel可以将DOM的监听绑定到Model层
- Data Bindings: ViewModel 可以将数据的变量响应式的反映到View层
- MVVM架构将我们从命令式编程转移到声明式编程
1、配置小程序
小程序的很多开发需求被规定在了配置文件中
为什么要这么做呢?
- 有利于我们的开发效率
- 保证开发出来的小程序的某些风格是比较一致的
- 比如导航栏 - 顶部TabBar,以及页面路由等等
常见的配置文件有哪些?
1)project.config.json:项目配置文件,比如项目名称,appid等
(https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html)
2)sitemap.json : 小程序搜索相关
(https://developers.weixin.qq.com/miniprogram/framework/sitemap.html)
3)app.json:全局配置(重要)
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
window配置
"navigationBarBackgroundColor": "#ff5777", //配置导航栏背景颜色
"navigationBarTextStyle": "white", //配置导航栏字体颜色
"navigationBarTitleText": "小晨的商店" //配置小程序标题
tabBar配置:
"selectedColor": "#ff5777", //tabBar字体的背景颜色
"list": [{ //tabBar的每个item
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/assets/tabbar/shop.png", //item图标
"selectedIconPath": "/assets/tabbar/shop_active.png" //被选中时的图标
},{
"pagePath": "pages/about/about",
"text": "分类",
"iconPath": "/assets/tabbar/my.png",
"selectedIconPath": "/assets/tabbar/my_active.png"
}]
4)page.json:页面配置
页面配置会覆盖app.json中的全局配置
2、小程序的双线程模型
3、界面渲染过程
1)初始化渲染
- wxml 可以先转成js对象,再渲染出真正的dom树
2)数据发生变化
3)界面渲染的整体流程
七、小程序的启动流程
1、注册小程序 - 参数解析
每个小程序都需要在app.js中调用App方法注册小程序
- 在注册时,可以绑定对应的生命周期函数,在生命周期函数中,执行对应的代码
- https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html (App中的生命周期函数)
App({
//当小程序初始化完成时
onLaunch: function () {
console.log("小程序初始化完成了")
wx.getUserInfo({ //wx开头的都是微信提供给我们的一些系统api
success: function(res) {
console.info(res);
}
})
},
//小程序界面显示出来后
onShow: function (options) {
},
//小程序界面被隐藏时
onHide: function () {
},
//当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
onError: function (msg) {
}
})
【注意】wx.getUserInfo 将要废弃,通过下面的方式获取用户信息
2、注册APP时做什么事情
1)注册App时,我们一般会做什么?
- 判断小程序的进入场景
- 监听生命周期函数,在生命周期中执行对应的业务逻辑,比如在某个生命周期函数中获取微信用户信息
- 因为App()实例只有一个,并且是全局共享的(单例对象),所以我们将一些共享数据放在这里
2)小程序的后台存活时间
2小时
3)小程序的打开场景
https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html
4)如何确定小程序的打开场景
在APP.js中的onLaunch和onShow声明周期回调函数中会有options参数,其中有scene值(代表着小程序的进入场景)
App({
onLaunch: function (options) {
//options中有小程序的打开场景
},
onShow: function (options) {
//options中有小程序的打开场景
},
onHide: function () {
},
onError: function (msg) {
}
})
3、注册PAGE时做什么?
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
1)在生命周期中发送网络请求,从服务器获取数据
2)初始化一些数据
3)监听wxml中的相关的一些事件
4)其他的一些监听(比如页面的滚动,上拉刷新,下拉加载等)
4、Page实例生命周期
八、小程序组件
1、TEXT组件
https://developers.weixin.qq.com/miniprogram/dev/component/text.html
Text 组件用于显示文本,类似于span标签,是行内元素
<!-- 基本使用 -->
<text>hello 小程序</text>
<!-- 2、selectable: true -->
<!-- 默认情况下,text中的文本长按是不能选中的 -->
<text selectable="{{true}}">小晨要努力变强</text>
<text selectable>小晨要努力变强\n</text>
<!-- 3、space决定文本空格的大小
nbsp: 根据字体设置的空格大小
ensp: 中文字符空格一半大小
emsp: 中文字符空格大小
-->
<text>小晨要努 力变强</text>
<text space="nbsp">小晨要努 力变强</text>
<text space="ensp">小晨要努 力变强</text>
<text space="emsp">小晨要努 力变强</text>
2、Button组件
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
<!-- 1、button的基本使用 -->
<button>注册</button>
<!-- 2、size属性 -->
<!-- 3、type属性 -->
<button size="mini" type="warn">注册</button>
3、view组件
https://developers.weixin.qq.com/miniprogram/dev/component/view.html
视图组价你:块级元素,独占一行,通常用作容器组件
4、image组件
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
image组件用于显示图片
- image组件可以写成单标签,也可以写成双标签
- image组件有自己默认的大小:320 * 240
- image组件是行内块级元素
5、input组件
comfirm-type: 设置键盘右下角按钮的文字
6、Scroll-view
scroll-view 可以实现具备滚动,常见属性如下:
<!-- 1、水平滚动 -->
<scroll-view class="container1" scroll-x>
<view wx:for="{{10}}" class="item1">{{item}}</view>
</scroll-view>
<!-- 2、垂直滚动 -->
<scroll-view class="container1" scroll-y>
<view wx:for="{{10}}" class="item1">{{item}}</view>
</scroll-view>
<!-- 3、事件 bindscroll -->
7、了解组件的共同属性
所有wxml组件都支持的属性称为共同属性,有如下共同属性