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

悠悠 2022-12-17 11:56 216阅读 0赞

## 微信小程序基础(二) ##

### 单向数据绑定 ###

在默认情况之下，小程序当中的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就可以做到阻止事件冒泡了

> 在上面的代码当中，我们的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这两种方法