[TOC]

小程序的執(zhí)行流程

life.png

注冊(cè)一個(gè)小程序（小程序的生命周期)

• 注冊(cè)App時(shí)，一般會(huì)做什么
  • 判斷小程序的進(jìn)入場(chǎng)景
  • 監(jiān)聽(tīng)生命周期函數(shù)，在生命周期中執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯慎璧，比如在某個(gè)生命周期函數(shù)中獲取微信用戶的信息丈莺。
  • 因?yàn)锳pp()實(shí)例只有一個(gè)，并且是全局共享的( 單例對(duì)象)裆操，所以我們可以將一些共享數(shù)據(jù)放在這里。
• 小程序后臺(tái)存活時(shí)間:
  htps://developers.weixin.qq.com/miniprogram/dev/framework/operating-mechanism.html
• 小程序的打開(kāi)場(chǎng)景較多:
  • 常見(jiàn)的打開(kāi)場(chǎng)景:群聊會(huì)話中打開(kāi)炉媒、小程序列表中打開(kāi)踪区、微信掃一掃打開(kāi)、另一個(gè)小程序打開(kāi)
    https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html
• 如何確定場(chǎng)景?
  • 在onLaunch和onShow生命周期回調(diào)函數(shù)中吊骤，會(huì)有options參數(shù)缎岗，其中有scene值

onLanch

• 發(fā)請(qǐng)求

• 獲取用戶的數(shù)據(jù)

  • wx.getUserInfo
  • button open-type = getUserInfo
  • open-data

onShow（option）

• 獲取場(chǎng)景，根據(jù)不同的場(chǎng)景做對(duì)應(yīng)的邏輯處理

onHide

onError

注冊(cè)一個(gè)頁(yè)面（頁(yè)面的生命周期）

page-life.png

onLoad

初次加載

onShow

頁(yè)面顯示

onReady

初次渲染完成

onHide

onUnLoad

onShareAppMessage

監(jiān)聽(tīng)用戶點(diǎn)擊頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕（button 組件 open-type="share"）

右上角菜單“轉(zhuǎn)發(fā)”按鈕的行為白粉，并自定義轉(zhuǎn)發(fā)內(nèi)容传泊。

• <button open-type="share">點(diǎn)擊分享</button>
  

• onShareAppMessage: function (res) {
      return {
        title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
        path: '/pages'    // 用戶點(diǎn)進(jìn)分享所進(jìn)入的頁(yè)面
      }
   }
  

WXS作用以及語(yǔ)法

WXS（WeiXin Script）是小程序的一套腳本語(yǔ)言，結(jié)合 WXML鸭巴，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)眷细。
WXS 與 JavaScript 是不同的語(yǔ)言，有自己的語(yǔ)法鹃祖，并不和 JavaScript 一致溪椎。
但基本是和js一樣的
主要應(yīng)用的場(chǎng)景是 時(shí)間格式化以及過(guò)濾器的使用，也可以寫成js作成工具類，在我們的js文件中先使用

兩種wxs的寫法

• wxml中

    <wxs module="info"> 
      const sum = () => {
        
        };
        module.exports = {
            sum
        }
    </wxs>
    
  <view>{{info.sum}}</view>
  

• .wxs文件中

  <wxs src="./wxs/demo.wxs" module="info" />
  

自定義組件

只能使用wx:if池磁；無(wú)法使用hidden

父子間傳值和vue相似

組件和頁(yè)面通信

comp.png

父?jìng)髯?/h4>

通過(guò)屬性綁定的形式將值傳遞給子組件

• 獲取子組件并調(diào)用其方法 selectComponent

  // this.selectComponent('.tab')   獲取到子組件的示例對(duì)象this
  // setCurrentIndex 為組件的方法奔害，可以直接setData({}) 。不推薦直接修改數(shù)據(jù)
  this.selectComponent('.tab').setCurrentIndex(e.detail.index)
  },
  

子傳父

通過(guò) triggerEvent 觸發(fā)事件將數(shù)據(jù)傳遞給父組件

• triggerEvent

  this.triggerEvent("click", data, {})
  

插槽slot

在組件的wxml中可以包含 slot 節(jié)點(diǎn)地熄，用于承載組件使用者提供的wxml結(jié)構(gòu)华临。

默認(rèn)情況下，一個(gè)組件的wxml中只能有一個(gè)slot端考。需要使用多slot時(shí)雅潭，可以在組件js中聲明啟用。

• 多插槽的組件聲明

  Component({
    options: {
      multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持
    },
    properties: { /* ... */ },
    methods: { /* ... */ }
  })
  

• 此時(shí)却特，可以在這個(gè)組件的wxml中使用多個(gè)slot扶供，以不同的 name 來(lái)區(qū)分。

  <!-- 組件模板 -->
  <view class="wrapper">
    <slot name="before"></slot>
    <view>這里是組件的內(nèi)部細(xì)節(jié)</view>
    <slot name="after"></slot>
  </view>
  

• 使用時(shí)裂明，用 slot 屬性來(lái)將節(jié)點(diǎn)插入到不同的slot上椿浓。

  <!-- 引用組件的頁(yè)面模板 -->
  <view>
    <component-tag-name>
      <!-- 這部分內(nèi)容將被放置在組件 <slot name="before"> 的位置上 -->
      <view slot="before">這里是插入到組件slot name="before"中的內(nèi)容</view>
      <!-- 這部分內(nèi)容將被放置在組件 <slot name="after"> 的位置上 -->
      <view slot="after">這里是插入到組件slot name="after"中的內(nèi)容</view>
    </component-tag-name>
  </view>
  

組件的樣式

• 組件內(nèi)的樣式對(duì)外部樣式的影響

  • 組件內(nèi)的class樣式，只對(duì)組件wxml內(nèi)的節(jié)點(diǎn)生效闽晦，對(duì)于引用組件的Page頁(yè)面不生效扳碍。
  • 組件內(nèi)不能使用id選擇器、屬性選擇器仙蛉、標(biāo)簽選擇器

• 外部樣式 對(duì)組件內(nèi)樣式 的影響

  • 外部使用class的樣式笋敞，只對(duì)外部wxml的class生效，對(duì)組件內(nèi)是不生效的
  • 外部使用了id選擇器荠瘪、屬性選擇器不會(huì)對(duì)組件內(nèi)產(chǎn)生影響
  • 外部使用了標(biāo)簽選擇器,會(huì)對(duì)組件內(nèi)產(chǎn)生影響

• 組件內(nèi)的class樣式和組件外的class樣式夯巷，默認(rèn)是有一個(gè)隔離效果的;

• 為了防止樣式的錯(cuò)亂，官方不推薦使用id哀墓、屬性趁餐、標(biāo)簽選擇器;

• 組件和頁(yè)面的樣式影響

  Component({
    options: {
      styleIsolation: 'isolated'
    }
  

})

+ 如果這個(gè) [Component 構(gòu)造器用于構(gòu)造頁(yè)面](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html) ，則默認(rèn)值為 `shared` 篮绰，且還有以下幾個(gè)額外的樣式隔離選項(xiàng)可用：
  - `page-isolated` 表示在這個(gè)頁(yè)面禁用 app.wxss 后雷，同時(shí)，頁(yè)面的 wxss 不會(huì)影響到其他自定義組件阶牍；
  - `page-apply-shared` 表示在這個(gè)頁(yè)面禁用 app.wxss ，同時(shí)星瘾，頁(yè)面 wxss 樣式不會(huì)影響到其他自定義組件走孽，但設(shè)為 `shared` 的自定義組件會(huì)影響到頁(yè)面；
  - `page-shared` 表示在這個(gè)頁(yè)面禁用 app.wxss 琳状，同時(shí)磕瓷，頁(yè)面 wxss 樣式會(huì)影響到其他設(shè)為 `apply-shared` 或 `shared` 的自定義組件，也會(huì)受到設(shè)為 `shared` 的自定義組件的影響。

+ **[頁(yè)面向組件傳遞樣式](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#外部樣式類)**

> **注意：在同一個(gè)節(jié)點(diǎn)上使用普通樣式類和外部樣式類時(shí)困食，兩個(gè)類的優(yōu)先級(jí)是未定義的边翁，因此最好避免這種情況。**

+ ```js
  /* 組件 custom-component.js */
  Component({
    externalClasses: ['my-class']
  })
  
  <!-- 組件 custom-component.wxml -->
  <custom-component class="my-class">這段文本的顏色由組件外的 class 決定</custom-component>
  ```

+ ```js
  <!-- 頁(yè)面的 WXML -->
  <custom-component my-class="red-text" />
  <custom-component my-class="large-text" />
  <!-- 以下寫法需要基礎(chǔ)庫(kù)版本 2.7.1 以上 -->
  <custom-component my-class="red-text large-text" />
  ```

### [WX.API]( https://developers.weixin.qq.com/miniprogram/dev/api/ )

#### [網(wǎng)絡(luò)]( https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html ) 

+ 請(qǐng)求 （request）

+ 我們一般會(huì)對(duì)

```js
import { baseUrl } from './config.js';
export default (options) => {
  wx.showLoading({
    title: '數(shù)據(jù)加載中',
  });
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${baseUrl}/${options.url}`,
      method: options.method || 'get',
      data: options.data || {},
      success: resolve,
      fail: reject,
      complete: (res) => {
        wx.hideLoading();
      }
    });
  });
}

• 對(duì)各個(gè)頁(yè)面中封裝請(qǐng)求方法

  import http from './index.js';
  const getHomeList = () => {
    return http({
      url: 'home/multidata'
    });
  }
  
  export {
    getHomeList
  }
  

開(kāi)放接口

• 登錄 （wx.login）

• api-login.jpg

• 當(dāng)我們不需要關(guān)心開(kāi)發(fā)者服務(wù)器開(kāi)發(fā)的時(shí)候硕盹，前端需要

  • 調(diào)用wx.login() 獲取code
  • 調(diào)用wx.request發(fā)送code到服務(wù)器符匾，返回一個(gè)登錄狀態(tài)的標(biāo)識(shí)，比如token
  • 我們使用wx.setStorageSync/setStorage,將標(biāo)識(shí)token進(jìn)行存儲(chǔ)
    • 這個(gè)和我們的localStorage一樣
  • 攜帶token進(jìn)行請(qǐng)求瘩例，獲取返回的數(shù)據(jù)

導(dǎo)航

• navigator

  // 通過(guò)url進(jìn)行參數(shù)的傳遞
  <!-- sample.wxml -->
  <view class="btn-area">
    <navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉(zhuǎn)到新頁(yè)面
   </navigator>
    <navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當(dāng)前頁(yè)打開(kāi)
   </navigator>
   <navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切換 Tab
   </navigator>
   <navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打開(kāi)綁定的小程序
   </navigator>
   <navigator url="/page/index/index" open-type="navigateBack" delta="2">回退 Tab
   </navigator>
  </view>
  

• 接受傳遞過(guò)來(lái)的數(shù)據(jù)

  // 在跳轉(zhuǎn)到的頁(yè)面中
  Page({
   onLoad: function(options) {
     //在options中拿到
     console.log(options);
   }
  })
  

• 跳轉(zhuǎn)的頁(yè)面向返回的頁(yè)面回傳數(shù)據(jù)

  • getCurrentPages()
  • 獲取當(dāng)前棧的所有頁(yè)面啊胶。數(shù)組中第一個(gè)元素為首頁(yè)，最后一個(gè)元素為當(dāng)前頁(yè)面垛贤。

  Page({
   onUnload() {
    const pages = getCurrentPages();
      // 獲取首頁(yè)頁(yè)面對(duì)象
      const home = pages[pages.length-1];
      // 使用home頁(yè)面中的方法修改數(shù)據(jù)
   }
  })
  

一些需要注意的地方

• 因?yàn)閃XML節(jié)點(diǎn)標(biāo)簽名只能是小寫字母焰坪、中劃線和下劃線的組合，所以自定義組件的標(biāo)簽名也只能包含這些字符聘惦。

• 自定義組件也是可以引用自定義組件的某饰，引用方法類似于頁(yè)面引用自定義組件的方式(使用
  usingComponents字段)。

• 自定義組件和頁(yè)面所在項(xiàng)目根目錄名不能以"Wx-" 為前綴善绎，否則會(huì)報(bào)錯(cuò)黔漂。

• 如果在appjson的usingComponents聲明某個(gè)組件，那么所有頁(yè)面和組件可以直接使用該組件涂邀。

• 如何獲取每個(gè)自定義組件到頂部的距離

  • wx.createSelectorQuery()
  • 返回一個(gè) SelectorQuery 對(duì)象實(shí)例瘟仿。在自定義組件或包含自定義組件的頁(yè)面中，應(yīng)使用 this.createSelectorQuery() 來(lái)代替

  wx.createSelectorQuery().select('.tab').boundingClientRect((rect) => {
      this.setData({
          tabTop: rect.top
       })
    }).exec();
  //這里必須有exec()才能執(zhí)行