[Accumulated water forms a deep pool] uniapp advanced gameplay sharing

Hello everyone, I am the blogger of csdn: lqj_ myself

This is my personal blog homepage:

lqj_I_python artificial intelligence vision (opencv) from entry to actual combat, front end, WeChat applet-CSDN blog The
latest uniapp graduation design column is also placed below:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482
 

Usually, I will also explain some things that you usually use in the Bilibili video,

Welcome to Bilibili:

Lu Miaoer's personal space-Lu Miaoer's personal homepage-哔哩哔哩Video

Table of contents

global configuration

static resource management

routing management

Data Communication and State Management

---

global configuration

In uni-app, we can make uniform settings for the entire project through global configuration. The global configuration is placed in  the object src/main.js in the file  Vue.config , please refer to the official document for details. The following are some commonly used global configuration items:

• Theme color configuration:

	
Vue.config.globalProperties.$themeColor = '#FF6600';

You can  $themeColor dynamically set the theme color by.

• Debug tool configuration:

Vue.config.debug = true;

Configure the debugging tools to be enabled for easy development and debugging.

• Route interception configuration:

router.beforeEach((to, from, next) => {
  // 在进入页面前做一些操作
  next();
});

router.beforeEach Routing interception can be realized through  the method, and the page jump can be controlled.

static resource management

In uni-app, we can place static resources (such as pictures, audio, video, etc.) under the  static directory for management. Here is a code example:

• Import static resources:

<template>
  <image src="/static/logo.png" />
</template>

static Static resources in the directory can be imported directly through the path  .

• Use alias alias:

import logo from '@/static/logo.png';

Setting an alias in  vue.config.js the file makes it easier to introduce static resources.

routing management

uni-app uses  pages.json files to manage page routing. Here are some common routing management techniques:

• Nested routing configuration:

{
  "pages": [
    {
      "path": "pages/home/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/index",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ]
}

Multi-level nested routing can be achieved by configuring  pages arrays.

• Page jump:

uni.navigateTo({
  url: '/pages/about/index'
});

The page jump can be realized through  uni.navigateTo the method.

Data Communication and State Management

In uni-app, we can use Vuex for data communication and state management. Here are some common data communication and state management techniques:

• Install and configure Vuex:

npm install vuex --save

src/store Create files in the directory  and  index.js perform related configurations.

• Create and use stores:

// index.js
import { createStore } from 'vuex';
const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});
export default store;
// YourComponent.vue
import { useStore } from 'vuex';
export default {
  // ...
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    asyncIncrement() {
      this.$store.dispatch('asyncIncrement');
    }
  },
  computed: {
    doubleCount() {
      return this.$store.getters.doubleCount;
    }
  }
}

Through the above code examples, we can understand how to create and use Vuex store, mutations, actions and getters.