微信小程序 基礎知識點整理

1. 頁面

• 每個可顯示的頁面，都必須在 pages.json 中注冊;
• 首頁一般是pages.json中pages數組的第一項;

{
 "pages": [ //pages數組中第一項表示應用啟動頁
  {
   "path": "pages/index/index",
   "style": {
        "navigationBarTitleText": "uni-app"
           }
  },
  {
   "path": "pages/tabBar/API/API",
   "style": {
    "navigationBarTitleText": "接口",
    "app-plus": {
     "titleNView": {
      "buttons": [{
       "text": "\ue534",
       "fontSrc": "/static/uni.ttf",
       "fontSize": "22px",
       "color": "#999999"
      }]
     }
    }
   }
  }   

 ]
}

2. js / css / component定義、引入方式

• js - util.js

// 定義
function  name1(param1) {......}
module.exports = {
    name: name1
};

// 組件/頁面引用
var util = require('./common/util.js');
util.name(param1);

• css

// 引用
<style>  
    @import "./common/uni.css";   // 相對路徑引入

    .uni-hello-text{  
        color:#7A7E83;  
    }  
</style>  

• 組件 - header.vue

// 定義
<template>...</template>
<script>
    export default {
        name: 'header-1',
        props: ['param1', 'param2']
    }
</script>

// 頁面/父組件中使用
<template>
    // 使用子組件的標簽名為子組件定義的name的值；
    <header-1 :params=name :param2=age></header-1>
</template>
<script>
        import header from "@/components/header.vue"
        export default {
            components: {header},
            data() {
                name: 'wang',
                age: 23
            }
        }
</script>

3. main.js中注冊的組件，在項目中的任何組件中都可引用，不用再次注冊；

4. page和component大體架構

• page頁面

// html
<template>
.....
</template>

// js
<script>
    import uLink from "@/components/uLink.vue"

    export default {
        components: {uLink},
        data() {
            return {}
        }，
        methods: {
            save() {....}
        }, 
        onLoad() {}   // 頁面聲明周期函數 
    }
</script>

// css - (scope為本頁面樣式，其他頁面不會受影響)
<style scope>

</style>

• component 組件

// html
<template>
.....
</template>

// js
<script>
    export default {
       props: ['從page傳遞過來的變量名1', '變量名2'],
        data() {
            return {}
        }，
        methods: {
            save() {....}
        },
        created() {} // 組件生命周期
    }
</script>

// css - (scope為本組件樣式，其他組件不會受影響)
<style scope>
........
</style>

5. 大小限制

本地引用的圖片和文字大小不能大於40k，會影響性能；uni-app編譯器在編譯時會把小於40k的文件自動編譯成base64文件；
編譯成base64的好處： 減少HTTP請求。每一張圖片的下載始終都要向服務器發送請求，當把圖片轉換為base64時，不用向服務器發出請求，而是隨着 HTML 的下載同時下載到本地，提高性能；

6. 運行環境

運行環境從瀏覽器變為V8引擎。因此，瀏覽器專用的window、document、navigator、location對象，包括cookie等存儲，只有在瀏覽器中才有，app和小程序都不支持。

7. 從操作DOM轉變為MVVM操作

現在前端趨勢是去dom化，改用mvvm模式，更簡潔的寫法，大幅減少代碼行數，同時差量渲染性能更好。
使用vue的雙向數據綁定，解決JS和DOM交互問題。