自定義組件

定義組件

在.json中
"component":true,

在頁(yè)面中使用組件

1. 頁(yè)面的.json

"usingComponents": {
    "組件名稱":"組件地址"
  }

2. 在頁(yè)面中使用

<組件名稱></組件名稱>
<item></item>

組件參數(shù)傳遞

父?jìng)髯?/h5>

1. <item title="xxxx">
2. 組件的js

properties: {
      title:{type:"string",value:''},
  },

3. 在組件內(nèi)部使用
   {{title}}

子傳父

1. 在組件js
   triggerEvent("事件名",事件參數(shù))
2. 在page頁(yè)面里面監(jiān)聽(tīng)

<item bind事件="響應(yīng)函數(shù)">
<item bindclick="clickHd">

組件的css

1. 組件和頁(yè)面的css默認(rèn)是隔離
2. 隔離方式配置

// styleIsolation:"apply-shared"
// 組件樣式隔離的方式 isolated 表示啟用樣式隔離  
// apply-shared 表示頁(yè)面 wxss 樣式將影響到自定義組件
// shared 表示頁(yè)面 wxss 樣式將影響到自定義組件

3. 自定義class
   1.組件的js定義
   externalClasses: ['item-class'],
   2.組件的wxml調(diào)用
   <view class="item-class">
   3.頁(yè)面中填入class
   <item item-class="myitem" >
   4.在頁(yè)面wxss中書(shū)寫(xiě)規(guī)則
   .myitem{ color:red}

組件的插槽

單個(gè)插槽

1. 頁(yè)面中編寫(xiě)插槽
   <item> <text>插槽內(nèi)容</text> </item>
2. 組件內(nèi)部wxrml調(diào)用

<item class="item item-lass">
    <slot></slot>
</item>

多個(gè)插槽

1. 組件內(nèi)部去定義.

options:{
  multipleSlots:true
}

2. 頁(yè)面中編寫(xiě)插槽
   <item><icon type=" info" slot="icon"></icon> </item>
3. 組件內(nèi)部調(diào)用插槽內(nèi)容

組件的生命周期

lifetimes:

    created    //被創(chuàng)建
    attached    //組件實(shí)例進(jìn)入頁(yè)面節(jié)點(diǎn)
    ready    //組件視圖渲染完畢
    moved    //組件被移動(dòng)
    detached    //組件從頁(yè)面中移除
    error    //組件被移除

組件內(nèi)可使用的頁(yè)面生命周期

pageLifetimes
show
hide
resize(size) //尺寸

分包

why

1. 提高小程序的加載速度
   主包做的很小，
   其他的代碼，預(yù)加載，分包加載的方式
2. 讓小程序的代碼超出2M
   通過(guò)把小程序的代碼包拆分多個(gè)每個(gè)2M最多12M (18M)

1.把小程序氛圍多個(gè)包，先下載主包，有空閑再去下載分包

1. tab對(duì)應(yīng)的頁(yè)面應(yīng)該是主包
2. 其他頁(yè)面可以是分包

步驟

1. 做的時(shí)候就要考慮分包，不要做好了再分包
2. 文件夾就是分包的名稱
3. 配置分包

"subpackages":[
   {
      "root": "yidian",
      "pages":[
        "pages/yidian/yidian",
        " pages/article/article'
      ]
  }
]

3. 修改路徑

預(yù)加載

當(dāng)進(jìn)入指定的頁(yè)面，默認(rèn)下載分包

"preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["yidian"]
    },
    "pages/jok/jok": {
      "packages": ["base"]
    }
    
},
//當(dāng)進(jìn)入首頁(yè) 去加載yidian這個(gè)分包
// 當(dāng)進(jìn)入joy笑話 去預(yù)加載base分包

npm安裝插件

1. 右上角詳情>使用npm模板.
2. 進(jìn)入cmd
   進(jìn)入項(xiàng)目文件
   npm init初始化項(xiàng)目
3. npm i @vant/weapp -S -production
4. 菜單-》工具-》構(gòu)建npm
5. 可以在頁(yè)面的json配置中引用

"usingComponents": {
    "van-button":" @vant/weapp/button'
}

6. 在頁(yè)面wxml里面使用
   <van-button type="primary">按鈕</van-button>

小程序的登錄流程

小程序端-服務(wù)器端-微信服務(wù)器端

1. 小程序wx.login可以獲取到- -個(gè)code發(fā)送給服務(wù)器端
2. 服務(wù)端通過(guò)code +appid+appsecret發(fā)給微信服務(wù)端換取sessionkey和openid (用戶的唯一-id)
3. 服務(wù)端把openid和sessionkey返回給小程序存儲(chǔ)
4. openid sessionid可以作為我們向服務(wù)器發(fā)送業(yè)務(wù)請(qǐng)求的一個(gè)憑證

用戶頭像信息獲取

wx.get5etting(Object object)
獲取用戶的當(dāng)前設(shè)置。返回值中只會(huì)出現(xiàn)小程序已經(jīng)向用戶請(qǐng)求過(guò)的權(quán)限
wx.getUserInfo
可以獲取到用戶的信息
用戶頭像，名稱，性別，

1. 每次獲取的時(shí)候，需要用戶主動(dòng)授權(quán)(這樣，不希望，用一次，就要授權(quán)一次
2. 我們會(huì)把用的信息發(fā)送給服務(wù)器，關(guān)聯(lián)openid存取起來(lái)
   (我們拿到openid就可以從服務(wù)器獲取不需要授權(quán))