小程序中的分包理解和小程序里边的双向绑定和vue的双向绑定有什么区别以及小程序中的组件通信

---

一、小程序里边的双向绑定和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
   })
}
}

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

1. 在根目录下创建utils目录以及request.js文件
2. 在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
}

四、项目启动慢

分包加载

大部分小程序都会由某几个功能组成，通常这几个功能之间是独立的，但会依赖一些公共的逻辑，并且这些功能通常会对应某几个独立的页面。那么小程序代码的打包，大可不必一定要打成一个，可以按照功能的划分，拆分成几个分包，当需要用到某个功能时，才加载这个功能对应的分包。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages.html

目前小程序分包大小的限制：

• 整个小程序所有分包大小不超过 4M

• 单个分包/主包大小不能超过 2M