Java教程

uniapp 新手笔记

本文主要是介绍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>

 

这篇关于uniapp 新手笔记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!