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

Posted 2022-12-25 zero-zm

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