小程序难点

最新推荐文章于 2024-02-20 21:02:11 发布

只要卷不死，就往死里卷

最新推荐文章于 2024-02-20 21:02:11 发布

阅读量186

点赞数

分类专栏：小程序笔记前端

本文链接：https://blog.csdn.net/weixin_46699908/article/details/110352342

版权

前端同时被 3 个专栏收录

19 篇文章 2 订阅

订阅专栏

笔记

15 篇文章 0 订阅

订阅专栏

小程序

4 篇文章 1 订阅

订阅专栏

一，小程序里边的双向绑定和vue的双向绑定有什么区别？

小程序数据双向绑定：：

1，首先利用bindinput来触发改变input输入框中的值
2，使用data-name来获取改变的数据的内容
3， bindinput触发后在方法中通过e.currentTarget.dataset.name来获取改变后的内容‘
4，通过this.setData()来改变data-name绑定的参数就好了

二、组件通信

1. 父组件传给子组件

父组件写法：
这是通过viewText="{{viewText}}"传向子组件。

<MyToast viewText="{{viewText}}" bind:myEvent="OnViewText"></MyToast>

子组件写法
子组件是通过properties来获取：

  properties:{
            viewText:{    //属性名
              type:Number,    //类型，必填项  目前接受的类型有：String,Number,Boolean,Object,Arrray,null(表示任意类型)
              value:''     //属性初始值(可选)如果未制定，会根据类型选择一个。
            }
          }

接下来就是在methods:方法里边的自定义函数中来取值就好了

methods:{
    //这里是随便一个方法名字
   add(){
     console.log(this.data.viewText);    //这样就可以取道父组件传过来的值了
     }
}

2. 子组件传给父组件

子组件写法
//这里的input是子组件中的某个输入框

<input type="number" bindinput="input" value="{{value}}"></input>

methods:{
    //这里是bindinput的方法名
     input(e){
       this.triggerEvent('myEvent',e.detail.value)   //这里的myEvent是自己自定义的事件名字，需要父组件中通过他来接受，
     }
}

父组件写法
这里我还引用上边父组件的名字，也就是说子组件在触发这个方法后需要在父组件中手动获取就好了。

<MyToast viewText="{{viewText}}" bind:myEvent="OnViewText"></MyToast>

//这里的myEvent是子组件传递过来的自定义事件名称，OnViewText这个是父组件中自定义的事件名称

methods:{
   OnViewText:function(e){
    //这里的这个e就是子组件传过来的值
    this.setData({
         code:e
   })
}
}

三、封装微信小程序的数据请求

在根目录下创建utils目录以及request.js文件
在request.js文件封装请求的方法，请求头

let request = function (url, method = "GET", data = {}) {
    return new Promise((resolve, reject) => {
        wx.showLoading({
            title: '加载中',
        })
        wx.request({
            url,
            data: data,
            header: {
                "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
            },
            method,
            success: (res) => {
                if (res.data.code == 2000) {
                    wx.authorize({
                        scope: 'scope.userInfo',
                        success: (result)=>{
                            console.log('成功');
                        },
                        fail: () => {
                            console.log('失败');
                        },
                        complete: ()=>{}
                    });
                }
                resolve(res)
            },
            fail: (res) => {
                reject(res)
            },
            complete: () => {
                wx.hideLoading();
            }
        });
    })
}
module.exports = {
    request
}