1. 工程化的概念
2. 工程化API封裝 【重點(diǎn)】30%
3. 工程化組件封裝 【重點(diǎn)】30%
4. 小程序路由【重點(diǎn)】30%
5. 上架
6. 小程序分包【重點(diǎn)】10%

1. 工程化的概念

在開發(fā)小程序時，需要將自己的代碼進(jìn)行封裝，命名要規(guī)范，位置要規(guī)范，以達(dá)到代碼復(fù)用，可以大量生產(chǎn)的效果

2. request三層封裝

對 wx.request() 發(fā)請求的API進(jìn)行三層封裝

2.1 工具函數(shù)層

utils/request.js 對 wx.request進(jìn)行封裝

//封裝第一層，對wx.request進(jìn)行封裝
const baseURL="http://www.look518.com";

const request = (options) => {
    return new Promise((resolve, reject)=>{
        wx.request({
            ...options,
            url: baseURL + options.url,
            success(res){
                //將異步操作的結(jié)果通過resolve傳遞出去
                resolve(res)
            },
            fail(err){
                //將失敗的信息傳遞出去
                reject(err)
            }
        })
    })
}

module.exports = request;

2.2 接口函數(shù)層

api/film.js 對接口進(jìn)行封裝

//封裝第二層，對接口進(jìn)行封裝
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 應(yīng)用層

在 index.js 頁面邏輯上進(jìn)行調(diào)用

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

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

3. 自定義組件【重點(diǎn)】

3.1 創(chuàng)建和使用組件

第一步：創(chuàng)建組件

新建 components 文件夾，在里面新建組件文件夾，再點(diǎn) 鼠標(biāo)右鍵 => “新建 Component”

在 .wxml 中寫組件的內(nèi)容

第二步：使用組件

在 index.json 中注冊組件

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

在 index.wxml 中使用組件

<my-button></my-button>

3.2 組件的生命周期

組件的生命周期寫在 .js 中的 lifetimes 屬性中

//生命周期函數(shù)
lifetimes:{
    created(){
        console.log('1. 組件創(chuàng)建了')
    },

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

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

3.3 參數(shù)父傳子

將父組件的數(shù)據(jù)傳遞給子組件

第一步：在父組件中設(shè)置自定義屬性，將數(shù)據(jù)傳遞給子組件

<!-- 數(shù)據(jù)父傳子 -->
<my-button txt="普通按鈕"></my-button>
<my-button txt="馬上注冊新會員"></my-button>
<my-button></my-button>

第二步：在子組件中接收數(shù)據(jù)

properties: {
    txt:{
        type:String,  #數(shù)據(jù)類型
        value:'我是按鈕', #默認(rèn)值
    },
    ...
},

3.4 參數(shù)子傳父

將子組件的數(shù)據(jù)傳遞給父組件

第一步：在子組件中觸發(fā)自定義事件，并傳參數(shù)

//數(shù)據(jù)子傳父
this.triggerEvent('toFather', this.data.num)

第二步：在父組件中使用子組件時，設(shè)置自定義事件，接收參數(shù)

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

//接收子組件傳回的數(shù)據(jù)
getData(obj){
    console.log(obj.detail);
},

4. 小程序的路由【重點(diǎn)】

4.1 配置路由

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

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

4.2 配置 tabBar

在 app.json 全局配置中，可以添加 tabBar 實(shí)現(xiàn)底部導(dǎo)航

"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，只能切換出現(xiàn)在 tabBar 上面的頁面

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

reLaunch，清空全部頁面，跳轉(zhuǎn)到指定的頁面

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

redirectTo，關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到指定的頁面

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

navigateTo，保留當(dāng)前頁面，跳到下一個頁面

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

navigateBack，后退一個頁面

wx.navigateBack()

5. 小程序上架

小程序上架必須按公眾平臺的上線流程，完成每一個步驟

第一步：完善信息

第二步：開發(fā)小程序

第三步：上傳到微信服務(wù)器， 開發(fā)版本 》 審核版本 》 上線版本

注意：不要上傳demo，即使上傳了demo也不要提交審核

6. 小程序分包

小程序單包大小限制為 2M，如果開發(fā)的項(xiàng)目大于2M就需要分包

第一步：配置 app.json ，添加子包的設(shè)置

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

第二步：在主包中跳轉(zhuǎn)過去

第三步：上傳

注意事項(xiàng)：文章來源地址http://www.zghlxwxcb.cn/news/detail-634801.html

1. tabBar 頁面必須在主包內(nèi)
2. subpackage 的根目錄不能是另外一個 subpackage 內(nèi)的子目錄
3. 每個子包是獨(dú)立的，相互之間不能訪問，但是每一個子包都可以訪問主包的數(shù)據(jù)

到了這里，關(guān)于小程序request三層封裝和分包以及路由和組件傳參的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！