微信小程序 基础知识点整理

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交互问题。