uniapp 新手笔记

【分包】按需加载的新页面
1.新建文件 subpkg/pages/分包名/分包名.vue 并完善功能
2.pages中注册该分包

"subPackages": [　　// pages.js 中加入一项
　　{
　　　　"root": "subpkg",
　　　　"name": "sub-1",
　　　　"pages": [
　　　　　　{
　　　　　　　　"path": "pages/分包名/分包名",
　　　　　　　　"style": {
　　　　　　　　　　"navigationBarTitleText": "页面标题"
　　　　　　　　}
　　　　　　}
　　　　]
　　}
]

 

3.使用 uni.navigateTo 跳转到该页面 url: 'subpkg/pages/分包名/分包名‘

--------------------------------------------------------------------------------
【组件】页面中具有特定功能的模块

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。
1.在 HBuilder 中新建文件 components/组件名/组件名.vue
2.使用组件 <组件名></组件名>

　　传值: ---- 父传子 ----

　　　　父组件-1.在父组件中先声明变量
　　　　data() {return {xixi:'test'}}

　　　　父组件-2.将一个名为 str 的变量传入子组件，值为 "test"
　　　　<子组件名 :str="xixi"></子组件名>

　　　　子组件-1.接收父组件传来的值
　　　　props:{str:{type:String}}

　　　　子组件-2.使用这个值
　　　　<view>{{str}}</view>

　　传值: ---- 子传父 ----

　　　　父组件-1.在子组件上绑定一个变量,绑定一个函数
　　　　<子组件名 @baba="baby"

　　　　父组件-2.一旦子组件回传值就会触发父组件这个带参函数
　　　　methods:{baby(val){console.log(val)}}

　　　　子组件-1.回传一个带参的函数
　　　　this.$emit('baba', this.str);

--------------------------------------------------------------------------------
【过滤器fliter】临时对展示的数据进行处理的组件

1.创建过滤器文件 /fliters/index.js
export function hotNumber(val) {//TODO:过滤器逻辑}

2.注册过滤器
import * as filters from 'fliters/index.js'
Vue.filter('hotNumber', filters['hotNumber']);

3.使用过滤器，{{参数|过滤器}}
{{data.views|hotNumber}}

--------------------------------------------------------------------------------
【全局状态管理vuex】适用父子组件操作同一变量的场景

1. 部署 vuex

　　创建 vuex 管理文件,此处为 test

　　|- store
　　|
　　| 　|---- modules ---- test.js
　　|----|
　　　  |- index.js


(1) /store/modules/test.js

export default {

    // 独立命名空间
    namespaced: true,
    
    // 声明变量
    state: () => {
        return {
            testData:1
        };
    },
    
    // 只能通过 mutations 操作声明的变量
    mutations: {
        add(state){
            const num = state.testData++;
            // this.commit 调用 mutations 中的方法
            this.commit('test/addFunc');
        },
        
        addFunc(state){
            state.testData += 5;
        },
    }
}

 

(2) /store/index.js

// 导入 test.js
import test from "./modules/test.js"

// 加载模块
const store = new Vuex.Store({
    modules:{
        ...
        test
    }
});

 

(3) /main.js

// 导入store
import store from "store/index.js"

// 挂载 store
const app = new Vue({
    ...App,
    store
})

2. 在页面中使用 vuex

<template>
    <view @click="viewClick">
        {{testData}}
    </view>
</template>

<script>
    // 从 vuex 导入 mapState 和 mapMutations
    import {mapState, mapMutations} from "vuex";

    export default {
        name:"test",
        methods: {
            // 对变量操作的方法声明在 methods 中
            ...mapMutations('test', ['add']),
            viewClick() {
                this.add();
            }
        },
        
        // 变量声明在 computed 计算属性中
        computed:{
            ...mapState('test',['testData'])
        },
    }
</script>

 

 

【数据持久化储存】

存数据

uni.setStorage({
    key: 'testStorage',
    data: 3
});

取数据

// 如果取不到这个 key，就当结果为2
uni.getStorageSync('testStorage') || 2