微信小程序基础(二)
单向数据绑定
在默认情况之下,小程序当中的data数据是单向绑定的,也就是说,我们改变了data这个对象里面的数据以后,页上面的数据并不会发生改变,这只是一个单向的过程
而在Vue里面,只要改变data当中的数据,那么,页面必然会发生渲染(除非使用v-once绑定的),小程序默认情况之下它只会渲染一次(相当于Vue当中的v-once),如果要做到数据的双向绑定,我们需要设置特定的方法来改变data里面的值
在此之前,小程序里面,所有的数据都是初次拿到data当中的数据以后再进行渲染(第一次渲染),如果后期改变data里面的数据以后,你希望它重新用这些数据渲染面面,则需要调用一个方法setData
。
this.data.userName="张三";
上面的这种方式,只是单向的设置了data中的值,并不会重新渲染页面,如果需要重新渲染页面,则需要使用setData
这个方法来赋值,代码如下:
this.setData({
userName:"李四"
});
上面这种方式的赋值,它就可以在赋完值以后重新用新的值去渲染页面,这个时候,页面上面显示的就是新的值
经验之谈:在开发小程序的时候,如果仅仅是要改变值而不需要重新渲染页面,我们可以直接使用data.属性名赋值,而要改变页面,则调用setData的方法!
一般input表单会直接使用data属性赋值,其它的地方则使用setData
小程序当中的事件冒泡与阻止事件冒泡
在小程序当中,我们绑定事件通用方法是使用bind关键来进行事件绑定,使用这个方法在进行事件的时候,它会有一个事件冒泡的过程!
在小程序里面,有一套专门用来阻止事件冒泡的处理机制!它使用catch代表bind就可以做到阻止事件冒泡了
<view class='v1' bindtap='v1test'>
<view class='v2' catchtap='v2test'></view>
</view>
在上面的代码当中,我们的bindtap与catchtap的区别就是,catch绑定的事件不会做事件冒泡,而bindtap绑定的事件是会有事件冒泡的,如果想阻止事件冒泡,就应该使用catch进事件绑定
小程序页面跳转
微信小程序本质上面与Vue一样,也是SPA的单页面开发,它的每个页面其实就是封装好的一系列组件,那么,在小程序里面,我们如何做到页面的跳转呢?
在小程序当中,要做到页面跳转有以下几种情况
-
直接跳转【导航】
wx.navigateTo({ url: '/pages/b/b' });
这一种跳转方式非常好,它不关闭之前的页面,而去打开一个新的页面,可以通过头的返回直接返回到上级页面
缺点:它最多只能打开6个
-
重定向跳转
wx.redirectTo({ url: '/pages/b/b' });
这一种方式的跳转是关闭当前页面,打开新的页面
缺点:它把之前的页面把它关闭掉了
-
页面切换跳转
一个页面,如果配置在了tabBar的list里面,这个时候无论你是用
navigateTo
或是redirectTo
这两种方式,你都是跳不过去的,需要使用一个特殊的方法去跳转wx.switchTab({ url: '/pages/cinemalList/cinemalList' });
说明:
switchTab
这个方法只能够使用于在tabBar里面配置的在页面,其它的页面也不能使用它
页面之间的传值
微信小程序在跳转页面的时候,它们两个页面之间也可以做一些传值操作,传值方式多种多样,其中,最主要的有以下两种:
说明:页面传值不受页面跳转方式的限制,上面的三种方式都可以做到页面传值
-
get传值
这一种传值方式非常普遍,与Vue当中的的路由的query传值非常相像,下面请看具体例子
A页面发送值
var userName=this.data.userName; //拿到保存的值 var pwd=this.data.pwd; wx.navigateTo({ url: '/pages/b/b?userName='+userName+'&pwd='+pwd, });
B页面接收值
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //这个options就是之前的页面通过get方式传递过来的值 console.log(options); }
直接在页面的后面加上
?
,然后再通过参数名与参数值对应上面的发送值的页面的url我们可以通过模板字符串进行一个简单的拼接
var userName=this.data.userName; //拿到保存的值 var pwd=this.data.pwd; wx.navigateTo({ url: `/pages/b/b?userName=${ userName}&pwd=${ pwd}`, //模板字符串 });
-
缓存传值
在HTML5里面,我们有一个东西叫
localStorage
它可以保存数据 ,同样,在小程序里面,也有一个类似于这样的东西,可以做到数据存储,它与localStorage
一样,也是可以跨页面存取数据的,它叫微信小程序缓存A页面发送值
wx.setStorageSync("userName", userName); wx.setStorageSync("pwd", pwd); wx.navigateTo({ url: '/pages/b/b' })
B页面接收值
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //这个options就是之前的页面通过get方式传递过来的值 // console.log(options); var userName = wx.getStorageSync("userName"); var pwd=wx.getStorageSync("pwd"); console.log(userName,pwd); }
这一个地方的Sotrage的用法,与HTML5里面的localStorage的用法基本相同,但功能强大一些,它可以存放数组,字符串,数字,对象等,页localStorage只能存放字符串
var obj={ userName:"杨标", age:18, sex:"男" }; wx.setStorageSync("userInfo", obj);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O0bXBxY7-1603440839834)(assets/1524538120495.png)]
页面与用户的交互操作
-
提示
wx.showToast({ title: '这是提示信息', icon:"none" });
上面的参数title代表的是提示信息,icon代表的是显示的图标,这个icon有三个参数值
success
,loading
,none
-
弹窗
//弹窗提示 wx.showModal({ title: '警告', content: '这是一个微信小程序', //showCancel:false, //是否显示取消按钮 success:function(res){ if(res.confirm){ console.log("用户点击确定"); } if(res.cancel){ console.log("用户点击取消"); } } });
在弹窗的时候,我们默认会显示两个按钮,如果只想显示确定,则需要添加showCancel为false,
同时,接口接收一个success的回调,用于判断用户点击的是确定还是取消
-
等待
微信小程序当中,要加载一个loading等待非常简单,只需要调用下面代码即可
wx.showLoading({ title: '拼命加载中' });
但是,这个loading一旦打开以后,我们需要手动的调用关闭的方法
wx.hideLoading(); //关闭等待动画
-
actionSheet操作选择
wx.showActionSheet({ itemList: ["删除","编辑"], //这是es6的箭头函数 success: res=>{ switch (res.tapIndex){ case 0: console.log("你点了删除"); break; case 1: console.log("你点了编辑"); break; } } })
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MoNHV95a-1603440839840)(assets/1524539406530.png)]
小程序tabBar的配置
在小程序里面,我们可以通过配置app.json文件里面的tabBar这个属性来配置页面的底部导航
{
"pages": [
"pages/movieList/movieList",
"pages/cinemalList/cinemalList"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
//配置下面的导航信息
"tabBar": {
"list": [{
"pagePath": "pages/movieList/movieList", //代表这个导航的页面
"text": "影片", //显示的名子
"iconPath": "/images/movie.png", //普通的图标
"selectedIconPath": "/images/movie_active.png" //选中这个导航的图标
},{
"pagePath": "pages/cinemalList/cinemalList",
"text": "影院",
"iconPath": "/images/cinemal.png",
"selectedIconPath": "/images/cinemal_active.png"
}]
}
}
说明:配置在tabBar里面的页面,只能够通过switchTab这个方法来进行切换,不能使用navigateTo和rediredtTo这两种方法