小程序request三层封装和分包以及路由和组件传参

1. 工程化的概念
2. 工程化API封装 【重点】30%
3. 工程化组件封装 【重点】30%
4. 小程序路由【重点】30%
5. 上架
6. 小程序分包【重点】10%

1. 工程化的概念

在开发小程序时，需要将自己的代码进行封装，命名要规范，位置要规范，以达到代码复用，可以大量生产的效果

2. request三层封装

对 wx.request() 发请求的API进行三层封装

2.1 工具函数层

utils/request.js 对 wx.request进行封装

//封装第一层，对wx.request进行封装
const baseURL="http://www.look518.com";

const request = (options) => {
    return new Promise((resolve, reject)=>{
        wx.request({
            ...options,
            url: baseURL + options.url,
            success(res){
                //将异步操作的结果通过resolve传递出去
                resolve(res)
            },
            fail(err){
                //将失败的信息传递出去
                reject(err)
            }
        })
    })
}

module.exports = request;

2.2 接口函数层

api/film.js 对接口进行封装

//封装第二层，对接口进行封装
const request = require('../utils/request.js');

//获取电影列表
const getList = (data)=>{
    return request({
        method:'get',
        url:'/api/film.php?a=list',
        data,
    })
}

module.exports={
    getList,
}

2.3 应用层

在 index.js 页面逻辑上进行调用

let {getList}=require('../../api/film.js');

async onLoad(){
    let res=await getList({page:1, pagesize:5})
    console.log(res.data.data);
}

3. 自定义组件【重点】

3.1 创建和使用组件

第一步：创建组件

新建 components 文件夹，在里面新建组件文件夹，再点 鼠标右键 => "新建 Component"

在 .wxml 中写组件的内容

第二步：使用组件

在 index.json 中注册组件

"usingComponents": {
  "my-button":"../../components/my-button/my-button"
}

在 index.wxml 中使用组件

<my-button></my-button>

3.2 组件的生命周期

组件的生命周期写在 .js 中的 lifetimes 属性中

//生命周期函数
lifetimes:{
    created(){
        console.log('1. 组件创建了')
    },

    attached(){
        console.log('2. 组件渲染完成了')
    },

    detached(){
        console.log('3. 组件被干掉了');
    }
}

3.3 参数父传子

将父组件的数据传递给子组件

第一步：在父组件中设置自定义属性，将数据传递给子组件

<!-- 数据父传子 -->
<my-button txt="普通按钮"></my-button>
<my-button txt="马上注册新会员"></my-button>
<my-button></my-button>

第二步：在子组件中接收数据

properties: {
    txt:{
        type:String,  #数据类型
        value:'我是按钮', #默认值
    },
    ...
},

3.4 参数子传父

将子组件的数据传递给父组件

第一步：在子组件中触发自定义事件，并传参数

//数据子传父
this.triggerEvent('toFather', this.data.num)

第二步：在父组件中使用子组件时，设置自定义事件，接收参数

<my-button txt="普通按钮" bind:toFather="getData"></my-button>

//接收子组件传回的数据
getData(obj){
    console.log(obj.detail);
},

4. 小程序的路由【重点】

4.1 配置路由

在 app.json 全局配置中配置路由

"pages": [
    "pages/index/index",
    "pages/list/list"
],

4.2 配置 tabBar

在 app.json 全局配置中，可以添加 tabBar 实现底部导航

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath":"images/home1.png",
      "selectedIconPath": "images/home2.png",
      "text": "首页"
    }, {
      "pagePath": "pages/list/list",
      "text": "列表"
    }, {
        "pagePath": "pages/news/news",
        "text": "新闻"
    }]
},

4.3 路由的API

switchTab切换tab，只能切换出现在 tabBar 上面的页面

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

reLaunch，清空全部页面，跳转到指定的页面

wx.reLaunch({url: '/pages/list02/list02'})

redirectTo，关闭当前页面，跳转到指定的页面

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

navigateTo，保留当前页面，跳到下一个页面

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

navigateBack，后退一个页面

wx.navigateBack()

5. 小程序上架

小程序上架必须按公众平台的上线流程，完成每一个步骤

第一步：完善信息

第二步：开发小程序

第三步：上传到微信服务器， 开发版本 》 审核版本 》 上线版本

注意：不要上传demo，即使上传了demo也不要提交审核

6. 小程序分包

小程序单包大小限制为 2M，如果开发的项目大于2M就需要分包

第一步：配置 app.json ，添加子包的设置

"subpackages": [
    {"root":"pageA", "pages":["index/index"]},
    {"root":"pageB", "pages":["home/home"]}
],

第二步：在主包中跳转过去

第三步：上传

注意事项：

1. tabBar 页面必须在主包内
2. subpackage 的根目录不能是另外一个 subpackage 内的子目录
3. 每个子包是独立的，相互之间不能访问，但是每一个子包都可以访问主包的数据