小程序---续（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大小限制为40kbtabBar上面的按钮selectedIconPath选中时的图片路径，icon大小限制为40kbsetData页面传递数据单次设置的数据不能超过1024kBsetStorage本地缓存最大为10MB- 小程序源码打包后的大小限制为
1M
全局数据的状态管理
在app.js 中的 globalData({}) 中定义全局数据
- 在
globalData({})中设置数据
globalData: {
num : 1
}
在需要使用全局数据的页面进行调用
导入全局的getApp()
const 名字 = getApp();导入全局app.js中的数据或方法；名字: 自定义的名字，用来代表app.js中的数据的
调用全局的数据
- 使用对应的数据或方法
名字.globalData.数据名字
this.setData({
num : app.globalData.num
})