小程序---续(2)
小程序2
响应事件
事件都是bind开头
- bindtap 点击事件
- bindinput 表单的值发生变化
- bindchange
事件触发
监听事件
bindtap="事件名字"
<view bindtap="showMSG">事件响应1</view>
在js文件中定义事件响应函数
- 与生命周期同级,逗号分开
// 事件响应
showMSG() {
console.log("HI 小程序");
},
事件传参
<view 事件类型名="事件名" data-参数名="参数值">事件参数3</view>
- 使用:
e.target.dataset.参数名
获取事件参数
<view bindtap="showCan" data-msg="我欣赏你">事件参数3</view>
// 自定义参数
showCan(e) {
wx.showToast({
title : e.target.dataset.msg
})
},
双向绑定原理
监听
value
表单的值bindinput
当input的值改变的时候触发事件
<!-- 双向绑定原理 -->
<view class="title">双向绑定原理</view>
<input bindinput="inputHD" value="{{msg}}"></input>
<view>{{msg}}</view>
响应事件
this.setDate
设置data的值e.detail.value
获取表单的值
// 双向绑定
inputHD(e) {
this.setData({msg : e.detail.value})
},
图片组件
image
图片标签src
图片地址属性- mode 图片设置的模式,具体参考官方文档
- image官方文档
<image src="./img/icon1.png"></image>
常用API
设置标题
- wx.setNavigationBarTitle 设置对应页面的标题
// 设置标题
wx.setNavigationBarTitle({
title: '笑话百科',
});
设置本地储存数据
wx.setStorageSync('储存数据的名字', 数据);
// 储存数据到storage中,
wx.setStorageSync('list', list);
获取本地存储数据
wx.getStorageSync('获取数据的名字');
wx.getStorageSync('list');
消息提示
wx.showToast({title : "消息提示信息"});
wx.showToast({title : "hello world"});
网络请求
wx.request(....);
详情见下
停止下拉刷新
wx.stopPullDownRefresh();
- 用于下拉刷新完毕时
网络请求
wx.request 网络请求数据
wx.request({url : "请求数据的地址",method : "请求方式",success : ()=>{成功的回调},fail : ()=>{失败的回调}});
获取数据
// 获取笑话数据
getJoksData() {
wx.request({
// 请求数据地址
url: 'http://www.520mg.com/mi/list.php',
// 成功的回调
success : (res) => {
this.setData({
list : res.data.result
})
console.log(res,"请求成功");
},
// 失败的回调
fail : (err) => {
console.log(err,"请求失败");
},
})
},
调用
- 在生命周期onload中调用获取数据的事件
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 执行获取数据
this.getJoksData();
},
下拉刷新
-
必须在
.json
文件中配置"enablePullDownRefresh": true
才能下拉刷新 -
在对应页面的下拉刷新事件中,进行逻辑实现
-
当下拉刷新完毕之后,必须停止
wx.stopPullDownRefresh();
-
设置颜色
"backgroundTextStyle": "dark"
值只有,light
,dark
两种
tabbar
默认的tabbar
在app.json
文件中设置tabBar
- 具体参考官方文档
- tabBar文档
// 一下是json文件,不能注释,最后一项不能有逗号
// tabBar 属性对象
"tabBar": {
// 字体颜色
"color":"#484848",
// 选中时字体颜色
"selectedColor": "#4395ff",
// 上边框颜色
"borderStyle" : "#000",
// tabBar的列表,最少两个
"list": [{
// 对应tabbar的跳转路径
"pagePath": "pages/index/index",
// 对应标题
"text": "首页",
// 未选中的图片,或者icon地址
"iconPath": "images/home.png",
// 选中时的图片,icon地址
"selectedIconPath": "images/home-h.png"
},
{
"pagePath": "pages/todo/todo",
"text": "清单",
"iconPath": "images/study.png",
"selectedIconPath": "images/study-h.png"
},
]
},
自定义tabBar
在app.json
中设置 "custom": true,
启动自定义tabBar组件
- 具体参考官方文档
- 自定义tabBar文档
导航
navigator 标签
<navigator url="地址">笑话</navigator>
url 属性
- 用来设置跳转的地址
<navigator url="/pages/jok/jok">笑话</navigator>
open-type 属性
-
navigate
默认跳转 -
navigate
切换小程序
<navigator target="miniProgram" open-type="navigate" app-id="小程序ID">题目</navigator>
switchTab
切换底部栏
<navigator url="/pages/jok/jok" open-type="switchTab" ">切换tabbar</navigator>
redirect
重定向
<navigator url="/pages/jok/jok" open-type="redirect" ">重定向</navigator>
relunch
重启
<navigator url="/pages/jok/jok" open-type="relunch" ">重启</navigator>
navigateBack
返回
<navigator url="/pages/jok/jok" open-type="navigateBack" ">返回</navigator>
exit
退出
<navigator url="/pages/jok/jok" open-type="exit" ">退出小程序</navigator>
js 切换页面
js切换
wx.navigateTo({rul : "地址"});
跳转
// 页面跳转
wx.navigateTo({
url: '/pages/logs/logs',
})
-
wx.navigateBack()
返回 -
wx.redirectTo({url : "地址"});
重定向
bindViewTap: function() {
wx.redirect({
url: '../jok/jok'
})
},
wx.switchTab({ url : "地址"});
切换底部栏
openToDo() {
wx.switchTab({
url: '/pages/todo/todo',
})
},
导航传参
url
传参
在url中定义参数
url="/pages/logs/logs?name=momo&age=18"
路由加参数name=momo&age=18
定义的参数?
后面的都是
<navigator url="/pages/logs/logs?name=momo&age=18">传递momo参数</navigator>
在生命周期onLoad
中的options
中含有对应的传递过来的参数
-
为了跟vue相像,所以可以设置
this.setData({query : options});
-
在页面中使用
{{query.参数名}}
获取数据值
js 传参
在使用js跳转时给路由地址传参
- 在需要跳转的js,url中传入参数
openC(){
wx.navigateTo({
// 传递的参数 name=hua&age=19
url: '/pages/logs/logs?name=hua&age=19',
})
},
-
在接收的页面,生命周期
onLoad
中的参数options
中含有对应的传递过来的参数 -
为了跟vue相像,所以可以设置
this.setData({query : options});
-
在页面中使用
{{query.参数名}}
获取数据值
onLoad: function (option) {
console.log(option);
this.setData({
query : option
})
}
注意 wx.switchTab({url : "地址"})
不能夸页面传参
- 此情况推荐全局
页面栈
- 页面栈大小为5
wx.navigateTo
会增加页面栈大小,直到页面栈大小为5wx.redirectTo
不会增加页面栈大小wx.navigateBack
会减少页面栈大小,直到页面栈大小为1
生命周期
app.js 中的生命周期(即:小程序本身的生命周期
)
onLaunch
用户首次打开小程序,触发 (全局只触发一次)。onShow
小程序初始化完成后,触发,监听小程序显示。onHide
小程序从前台进入后台,触发 。onShow
小程序从后台进入前台显示,触发 。- 小程序后台运行一定时间,或系统资源占用过高,会被销毁。
onError
小程序出错,触发
//app.js
App({
onLaunch: function() {
//小程序初始化(全局只触发一次)
},
onShow: function() {
//小程序显示--前台
},
onHide: function() {
//小程序隐藏--后台
},
onError: function(msg) {
//小程序错误
},
})
//其他 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问
pages 中的生命周期
onLoad
小程序注册完成后,加载页面,触发。onShow
页面载入后触发方法,显示页面。onReady
首次显示页面,触发,渲染页面元素和样式,一个页面只会调用一次。onHide
当小程序后台运行或跳转到其他页面时,触发。- 当
navigateTo
或底部tab切换
时调用
- 当
onShow
当小程序有后台进入到前台运行或重新进入页面时,触发。onUnload
页面卸载- 当使用重定向方法
wx.redirectTo(OBJECT)
或关闭当前页返回上一页wx.navigateBack()
,触发
- 当使用重定向方法
//index.js
Page({
onLoad: function(options) {
//页面加载-----(一个页面只会调用一次)
},
onReady: function() {
//页面渲染-----(一个页面只会调用一次)
},
onShow: function() {
//页面显示-----(每次打开页面都会调用一次)
},
onHide: function() {
//页面隐藏-----(当navigateTo或底部tab切换时调用)
},
onUnload: function() {
//页面卸载-----(当redirectTo或navigateBack的时候调用)
},
})
//其他 开发者可以添加任意的函数或数据到 object 参数中,在页面的函数中用 this 可以访问
小程序的限制
程序限制
- 脚本内不能使用
window
等对象 - zepto/jquery 会使用到
window
对象和document
对象,所以无法使用。 - 样式表
不支持级联选择器
- 本地资源
无法通过 css 获取
background-image
可以使用网络图片,或者base64
,或者使用标签 - 不支持
a
标签,无法打开普通网页
数量限制
- 底部或顶部可以添加tab按钮区域
tabBar
是一个数组,只能配置最少2个、最多5个 tab,tab按数组的顺序排序。 - 一个应用同时只能打开5个页面
- 小程序的
wx.request
请求最开始最大并发数是5
个,后来,估计随着用小程序的越来越多,总之,就是增加到了10
个
大小限制
tabBar
上面的按钮iconPath
图片路径,icon
大小限制为40kb
tabBar
上面的按钮selectedIconPath
选中时的图片路径,icon
大小限制为40kb
setData
页面传递数据单次设置的数据不能超过1024kB
setStorage
本地缓存最大为10MB
- 小程序源码打包后的大小限制为
1M
全局数据的状态管理
在app.js
中的 globalData({})
中定义全局数据
- 在
globalData({})
中设置数据
globalData: {
num : 1
}
在需要使用全局数据的页面进行调用
导入全局的getApp()
const 名字 = getApp();
导入全局app.js中的数据或方法;名字
: 自定义的名字,用来代表app.js中的数据的
调用全局的数据
- 使用对应的数据或方法
名字.globalData.数据名字
this.setData({
num : app.globalData.num
})