微信小程序基础心得(二)

微信小程序基础(二)

单向数据绑定

在默认情况之下，小程序当中的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的单页面开发，它的每个页面其实就是封装好的一系列组件，那么，在小程序里面，我们如何做到页面的跳转呢？

在小程序当中，要做到页面跳转有以下几种情况

1. 直接跳转【导航】

   wx.navigateTo({
         
         
       url: '/pages/b/b'
   });
   

   这一种跳转方式非常好，它不关闭之前的页面，而去打开一个新的页面，可以通过头的返回直接返回到上级页面

   缺点:它最多只能打开6个

2. 重定向跳转

   wx.redirectTo({
         
         
       url: '/pages/b/b'
   });
   

   这一种方式的跳转是关闭当前页面，打开新的页面

   缺点:它把之前的页面把它关闭掉了

3. 页面切换跳转

   一个页面，如果配置在了tabBar的list里面，这个时候无论你是用navigateTo或是redirectTo这两种方式，你都是跳不过去的，需要使用一个特殊的方法去跳转

   wx.switchTab({
         
         
       url: '/pages/cinemalList/cinemalList'
   });
   

   说明：switchTab这个方法只能够使用于在tabBar里面配置的在页面，其它的页面也不能使用它

页面之间的传值

微信小程序在跳转页面的时候，它们两个页面之间也可以做一些传值操作，传值方式多种多样，其中，最主要的有以下两种：

说明：页面传值不受页面跳转方式的限制，上面的三种方式都可以做到页面传值

1. 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}`,  //模板字符串
   });
   

2. 缓存传值

   在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)]

页面与用户的交互操作

1. 提示

   wx.showToast({
         
         
       title: '这是提示信息',
       icon:"none"
   });
   

   上面的参数title代表的是提示信息，icon代表的是显示的图标，这个icon有三个参数值success,loading,none

2. 弹窗

   //弹窗提示
   wx.showModal({
         
         
       title: '警告',
       content: '这是一个微信小程序',
       //showCancel:false,    //是否显示取消按钮
       success:function(res){
         
         
           if(res.confirm){
         
         
               console.log("用户点击确定");
           }
           if(res.cancel){
         
         
               console.log("用户点击取消");
           }
       } 
   });
   

   在弹窗的时候，我们默认会显示两个按钮，如果只想显示确定，则需要添加showCancel为false,

   同时，接口接收一个success的回调，用于判断用户点击的是确定还是取消

3. 等待

   微信小程序当中，要加载一个loading等待非常简单，只需要调用下面代码即可

   wx.showLoading({
         
         
       title: '拼命加载中'
   });
   

   但是，这个loading一旦打开以后，我们需要手动的调用关闭的方法

   wx.hideLoading();   //关闭等待动画
   

4. 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这两种方法