小程序初識與項目新建

微信小程序（Mini Program）是一種不需要下載安裝既可以使用的應用，它實現了應用”觸手可及“的夢想，用戶掃一掃或者搜一下便可以打開應用，今天我們簡單的認識一下微信小程序的原生框架（mina）。

環境準備

1. 使用全新的郵箱注冊賬號，在微信小程序后臺獲取APPID

企業微信截圖_d13170c0-8689-43d8-89ef-e7bf53d02a65.png

2. 微信開發者工具
   需要在官網上手動下載此工具，這是集齊開發，預覽，調試，發布于一身的完整環境，但是它的編碼體驗不是太好，一般我是通過vscode+微信開發者工具一同進行編碼，vscode負責敲代碼，微信開發者工具負責預覽~

WechatIMG1.jpeg

項目搭建的目錄結構

小程序的配置文件

一個小程序會包含最基本的兩種配置文件，一種是全局的app.json和頁面自己的page.json,需要注意的是，配置文件中不能出現注釋。

1. 全局配置app.json
   是當前小程序的全局配置，包括小程序所有頁面路徑，界面表現，網絡超時時間，底部tab等，具體各項配置推薦查看官網。歡迎大家訪問 <a target="_blank">微信小程序全局配置詳解</a>。
2. 頁面配置page.json
   是用來定義頁面目錄下的page.json這類和小程序頁面相關的配置，開發者可以獨立定義每個頁面的一下屬性，比如頂部顏色，是否允許下拉刷新等等，頁面中的配置只能設置app.json中window配置項的內容，而且頁面中配置項會覆蓋app.json中的window中相同的配置項。

模板語法

WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件，事件體統，可以構建出頁面的結構。

1. 數據綁定

<!--text相當于是span標簽，view標簽相當于是div標簽 --> 
<!-- 在標簽中變量的使用, 必須用”“包裹起來 --> 
<view data-msg="{{mag}}">
</view>

<!-- 在使用boolean充當屬性 checked，字符串和花括號之間一定不要存在空格，否則會導致識別失敗  --> 
<view>
  <checkbox checked="{{isChecked}}"></checkbox>  
 </view>
 
 <!-- 在標簽中變量的使用 -->
<view data-msg="{{msg}}">
 自定義屬性
</view>
 
// js文件中的data{}放的是普通數據聲明~
Page({
  data: {
    msg: 'hello mina',
    isChecked: 'true',
  })

2. 運算

所謂的運算就是說可以 在花括號中加入表達式
表達式： 指的是一些簡單運算，數字運算，字符串拼接，邏輯運算，三元運算符
語句： 復雜的代碼段【if else switch...】具體看相關代碼
注意：如果花括號和引號之間有空格，將會被解析成字符串

屏幕快照 2021-05-18 下午3.55.47.png

屏幕快照 2021-05-18 下午3.57.10.png

3. 循環

1. 列表循環 wx:for="{{數組或者對象}} wx:for-item="循環項的名稱" wx:for-index="循環項的索引"
2. 對象循環 wx:for="{{對象}} wx:for-item="對象的值" wx:for-index="對象的屬性" "

wx:key 用來提高數組渲染的性能，它綁定的值有如下的選擇

1. wx:key="唯一的值" 綁定一個普通的字符串的時候，那么這個字符串名稱肯定是循環數組中的對象的唯一值
2. wx:key="this" 表示當數組是一個普通的數組比如【1，2，3，4】時，this表示循環項本身，*this必須是唯一的字符串和數組

嵌套循環，綁定的名稱不要重名，小程序默認叫item，和index，所以默認只有一層循環的時候可以不用寫wx:for-item="循環項的名稱" wx:for-index="循環項的索引"

屏幕快照 2021-05-18 下午4.13.11.png

在循環中可以巧妙的使用block標簽，它相當于占位符標簽，頁面渲染的時候會被移除掉，最終不會變成真正的dom元素

4. 條件渲染

可以有兩種方式① wx:if ②hidden

屏幕快照 2021-05-18 下午4.18.10.png

事件綁定

小程序中的綁定事件，是通過bind關鍵字來實現的，比如常用的bindtap,bindinput,bindchange等，不同的組件支持不同的事件，具體需要參照組件的說明。

<!-- wxml-->
<input type="text" bindinput="handleInput"/>

<!-- page-->
  handleInput(e){
    console.log(e)
  }

需要注意的事件參數傳值：
綁定事件時，不能帶參數，不能帶括號，要通過標簽自定義屬性的方式進行傳值，具體看demo

<!-- wxml-->
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>

<!-- page-->
handletap(e){
    console.log(e);
   // 獲取自定義屬性，即傳過來的參數operation
    const operation = e.currentTarget.dataset.operation;
    this.setData({num: Number(this.data.num) + operation})
  }

樣式WXSS

WXSS(WeiXin Style Sheets)是小程序的樣式語言，用于描述WXML的組件樣式，但是相比于css，wxss也有一些新的特性：

• 響應式長度單位 rpx
  rpx可以根據屏幕看度進行自適應，規定屏幕寬度未750rpx,如果屏幕寬度未375px,則750rpx = 375px = 750物理像素，所以換算步驟為：

  • 確認設計稿寬度pageWidth
  • 計算比例 750rpx = pageWidth px,所以1px = 750rpx/pageWidth
  • 在less文件中，主要把設計稿中的px => 750/pageWidth rpx即可

• 樣式導入
  wxss中直接就支持樣式導入功能，通常使用@import語句來導入外聯樣式,而且只支持相對路徑

• 選擇器
  小程序不支持通配符 *

• 小程序中使用less
  原生小程序是不支持less的，但是我們可以通過以下方式來實現

  • 編輯器vscode
  • 安裝插件 easy less
  • 在vscode中的setting.json設置如下代碼，進行配置

  "less.compile": {
   "outExt":  ".wxss"
    }
  

  • 在編寫樣式的地方新建less文件，然后正常編輯即可

  自定義組件

  小程序也像其他前端框架一樣，可以允許用戶使用自定義組件的方式來構建頁面，組件的組成也類似于頁面，由json, wxml, wxss, js四個文件組成，我們可以在微信開發者工具中快速創建組件的文件結構 ~

• 屏幕快照 2021-05-18 下午4.53.27.png

創建和使用組件的步驟

1. 一般在外層components文件夾下，創建一個組件文件夾，通過右鍵快速創建相關的文件,假如我們創建一個tab組件

<!--自定義組件的wxml-->
<view class="tabs_content">
 <!-- 就是個占位符，父調用子組件，就傳遞相應的內容 -->
   <slot></slot>
 </view>

2. 在父組件的json中，聲明引用組件的位置

{
 "usingComponents": {
   "Tabs": "../../components/tabs/tabs"
 }
}

3. 在父組件的wxml中引用組件

<Tabs></Tabs>

父子組件傳值

父組件向子組件傳遞數據，通過標簽屬性來傳遞
子向父傳遞數據，通過事件的方式傳遞
具體過程：
父傳子

屏幕快照 2021-05-17 下午7.42.36.png

<!-- 子組件 -->
view class="tabs_title">
    <view
    bindtap="handleTap"
    wx:for="{{tabs}}"
    wx:key="id"
    data-index="{{index}}"
    class="tabs_item {{item.isActive ? 'active' : ''}}">
      {{item.name}}
    </view>  
 </view>
<view class="tabs_content">
  <!-- 就是個占位符，父調用子組件，就傳遞相應的內容 -->
    <slot></slot>
 </view>
 
 <!-- 子組件js文件中通過使用triggerEvent方法，指定事件名和需要傳的參數對象 -->
 methods: {
    handleTap(e){
      const { index } = e.currentTarget.dataset;
      // 觸發父組件自定義函數，并傳遞參數，在父組件中的對應的是binditemChange事件綁定
      this.triggerEvent("itemChange", {index});
    }
  }

<!-- 父組件 -->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
  <block wx:if="{{tabs[0].isActive}}">0</block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>
  <block wx:else>3</block>
</Tabs>

  //接受子組件的數據
 handleItemChange(e){
    let { index }=e.detail;
    let {tabs}=this.data;
    tabs.forEach((v, i) => {
      i === index ? v.isActive=true : v.isActive=false;
    });
    this.setData({tabs})
 }

小程序的生命周期

• 應用的生命周期即app.js
  onLaunch(){} =>應用第一次啟動觸發的事件，獲取用戶個人信息
  onShow(){} => 應用被用戶看到 從別的地方切到小程序的時候，對應用的數據或者頁面效果進行重置
  onHide(){} => 應用隱藏,用來暫?；蛘咔宄〞r器
  onError(){} => 應用的代碼發生報錯的時候會觸發，收集用戶的錯誤信息，通過異步請求將錯誤信息發送到后臺去
  onPageNotFound(){} => 頁面找不到就會觸發，應用第一次啟動的時候，如果找不到第一個入口頁面，才會觸發，我們可以在這里做頁面不存在的時候，通過js的方式來重新跳轉頁面，重新跳轉到第二個備選首頁
• 頁面生命周期：page.js
  onLoad(){} => 發送異步請求，初始化頁面數據
  onShow(){} => 頁面顯示
  onReady(){} => 頁面初次渲染
  onHide(){} => 頁面隱藏，頁面跳轉的時候會觸發
  onUnload(){} => 頁面卸載的時候會觸發，頁面跳轉的時候redirect或者其他會關閉當前頁面的屬性會觸發這個生命周期
  onPullDownRefresh(){} => 用戶下拉頁面，頁面數據或者效果重新刷新
  onReachBottom(){} =>用戶上拉觸底的時候觸發，數據量足夠多出現滾動條的時候，所以 當頁面上下滾動才行，上拉加載下一頁數據
  onShareAppMessage(){} => 用戶轉發的時候觸發
  onPageScroll(){} => 頁面滾動就會觸發，只要一滾動就要觸發, 反復觸發，最好少用
  onResize(){} =>頁面的尺寸發生改變的時候觸發，當小程序發生橫屏，豎屏的時候會觸發
  onTabItemTap(){} => 只存在tabbar頁面，只有點擊tabbar才會觸發

總結

這篇文章是在具備其他前端框架的基礎上進行學習的，假如是完全零基礎的同學，這篇文章可能介紹的還不夠詳細，歡迎大家積極查閱官網文檔，但是也希望這篇文章可以幫助大家快速的認識小程序~