Problems and knowledge points encountered in the uniapp project

1. Agent

Category :

• forward proxy.
• reverse proxy.

1.1. Forward proxy:

1. in the development environment.
2. The scaffolding server implements the proxy.
3. webpack devServer。
4. When the browser sends a request, it first requests the forward proxy server, and the forward proxy server sends the request to the target server.
5. The server side does not know who made the request .

1.2. Reverse proxy:

1. in the production environment.
2. Reverse proxy server implementation.
3. nginx。
4. The browser sends a request to the server, which is first received by the reverse proxy server and forwarded to the target server.
5. The browser side does not know who returned the data .

2, Vuex

2.1. Function

1. Centrally manage state data.
2. Used to share among multiple components.

2.2. Core concepts

1. store object.
2. state: state data.
3. mutations: synchronously modify state data.
4. actions：

• Get asynchronous data.
• Hand over asynchronous data to mutation for synchronous processing.

5. dispatch: dispatch action.
6. getters：

• It is used to calculate new status data based on existing status data.
• Equivalent to computed in Vue.

7. modules: used for modular management.

• Attached:

<script>
// 从 vuex 中按需导入 mapState 函数
import {
    
     mapGetters } from 'vuex'
import {
    
     mapState } from 'vuex'
import {
    
     mapMutations } from 'vuex'
import {
    
     mapActions } from 'vuex'
export default {
    
    
    data() {
    
    
        return {
    
    }
    },
    computed: {
    
    
        // 通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：
        // 将全局数据，映射为当前组件的计算属性

        // 第一种方式：数组。
        ...mapState(['count']),
        // 第二种方式：传一个对象
        ...mapState({
    
    
            indexDate: state => state.home.indexDate
        })
        ...mapGetters(['show'])
    },
    methods: {
    
    
        // this.$store.commit() 是触发 mutations 的第一种方式，触发 mutations 的第二种方式：
        ...mapMutations(['add', 'addn']),


        // 第一种方式:传一个数组。
        ...mapActions(['addasyncN'])
        // 第二种方式：传一个对象。
        ...mapAction({
    
    
            key: value, // key：当前组件定义的方法名；value：是从store映射的函数名，注意：value不能随便写，必须是store中已有的action
        })
    }
}
</script>

3. css style

3.1、white-space（pre-wrap）

3.2、vertical-align（top）

3.3. Two-line text benefit ellipsis display

display: -webkit-box;
-webkit-line-clamp: 2; // 设置几行
-webkit-box-orient: vertical; // 设置对其模式
text-overflow: ellipsis;
overflow: hidden;

3.4、calc()

The calc() function is used to dynamically calculate the length value.

• It should be noted that a space needs to be reserved before and after the operator , for example height: calc(100vh - 80px);
• Any length value can be calculated using the calc() function.
• The calc() function supports "+", "-", "*", "/", operations.
• The calc() function uses the standard rules of precedence for mathematical operations.
• Note ⚠️ : When developing a small program in uniapp, the height of the bottom personal center and the module where the shopping cart is located does not need to be reduced.

3.5. Problems encountered in flex layout justify-content

When the child element is an odd number, the last element will be centered, which can be solved by using pseudo-classes:

.aa {
    
    
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  &:after {
    
    
    content: '',
    width: 340rpx //'子元素宽度'
  }
  .item {
    
    
    width: 340rpx;
  }
}

4. Calculated property computed and monitoring property watch

4.1, computed attribute computed

• Note ⚠️: If you use arrow functions for computed properties, thenthiswill not point to an instance of this component, but you can still access it as the first parameter of an arrow function .

computed: {
    
    
    numRead: (vm) => vm.num*2 
}

• The results of computed properties are cached and recomputed unless the dependent reactive property changes. Note that if a dependency (such as a non-reactive property) is outside the scope of the instance, the computed property isWon'tupdated

var vm = new Vue({
    
    
    data: {
    
     num: 1 },
    computed: {
    
    
        // 简写（仅读取）
        numRead: function() {
    
    
            return this.num*2
        },
        // 读取和设置
        numReadAndSet: {
    
    
            // get有什么作用？当读取numReadAndSet时，get就会被调用，且返回值就作为numReadAndSet的值。
            // get什么时候被调用？1.初次读取numReadAndSet时。2.所依赖的数据发生变化时
            get: function () {
    
    
                return this.num + 1
            },
            // 当numReadAndSet发生变化时，可设置num的值。
            set: function (v) {
    
    
                this.num = v - 1
            }
         }
    }
})
// 输出
vm.aReadAndSet // => 2
vm.aReadAndSet = 3
vm.num // => 2
vm.aRead // => 4

4.2, monitoring attribute watch

The monitoring attribute can monitor the value in data, and can also monitorcomputed propertythe value in

watch: {
    
    
    example: {
    
    
        // immediate为true表示初始化时让handler调用一下。
        immediate: true,
        // 深度监听，一般用于监视多层数据结构的时候调用，比如对象中某个数据的变化。
        deep: true,
        // handler什么时候调用？当isHot发生改变时，里面可以观察到旧值和新值的变化。
        handler(newValue, oldValue) {
    
    
            console.log('被调用了'， newValue， oldValue)
        }
    }
}

• Note: Shorthand forms can be used when immediate and deep are not used.

watch: {
    
    
    a(newVal, oldVal) {
    
    }
    // 或者
    a: function(newVal, oldVal) {
    
    }
}

• Note ⚠️: Arrow functions should not be used to define watcher functions (e.g.searchQuery: newValue => this.updataAutocomplete(newValue)) reason is that the arrow function is bound to the context of the parent scope, sothiswill not point to the Vue instance as expected,this.updataAutocompletewill be undefined.

var vm = new Vue({
    
    
  data: {
    
    
      a: 1,
      b: 2,
      c: 3,
      d: 4,
      e: {
    
    
          f: {
    
    
              g: 5
          }
      }
  },
  watch: {
    
    
      a: function(val, oldVal) {
    
    
          console.log('new: %s, old: %s', val, oldVal)
      },
      // 方法名
      b: 'someMethod',
      // 该回调会在任何被侦听的对象的property改变时被调用，不论其被嵌套多深。
      c: {
    
    
          handler: function(val, oldVal) {
    
    },
          deep: true
      },
      // 该回调将会在侦听开始之后被立即调用
      d: {
    
    
          handler: 'someMethod',
          immediate: true
      },
      // 你可以传入回调数组，它们会被逐一调用
      e: [
          'handle1',
          function handle2(val, oldVal) {
    
    },
          {
    
    
              handler: function handle3(val, oldVal) {
    
    }
          }
      ],
      // watch vm.e.f's value: {g: 5}
      'e.f': function(val, oldVal) {
    
    }
  }
})

vm.a = 2 // => new: 2, old: 1

Application case :

watch: {
    
    
    '$route.query.id'(newVal, oldVal) {
    
    
        console.log('变化'， newVal， oldval)
        location.reload() // 当路由中参数变化时，刷新当前页面
    }
}

5. Responsive data vs non-responsive data

• responsive data

1. The data that existed when the component instance was initialized.
2. View updates are triggered when data changes.

• non-responsive data

1. The data that is not available when the component instance is initialized, and the data that is directly added later.
2. View updates are not triggered when data changes.
   Solution:
   You can use Vue.set(target, propertyName / index, value) or vm.$set()

• 参数：
  1、{ Object | Array } target
  2、{ string | number } propertyName / index
  3、{ any } value
• Usage
  Add a property to the reactive object and make sure the new property is also reactive and triggers a view update. It must be used to add new properties to reactive objects , because Vue cannot detect ordinary new properties (eg: this.myObect.newProperty = 'hi')
• Note ⚠️: The object cannot be a Vue instance, or the root data object of a Vue instance

6. The difference between every and some in the array and other common methods

6.1、 arry.every(()=>{})

• every: all elements meet the conditions, only to return true.

6.2.、arry.some(()=>{})

• some: As long as one of the conditions is met, it will be true.

6.3、map()

• map(): Refers to "mapping", runs a given function on each item in the array, and returns an array of the results of each function call .

var arr = [1,2,3,4,5]
var arr2 = arr.map((item) => {
    
    
    return item*item
})
console.log(arr2); // [1,4,9,16,25]

6.4, reduce method

arry.reduce((previousValue, currentValue, index, array)) => {}，val)

• The reduce() method accepts a callback function to be called for each item in the array until the end of the array.
• reduce accepts a function with four parameters:

1. last value.
2. The current value.
3. The index of the current value.
4. array.

For example :

• reduce has a second parameter, if not passed, it will start from the second item, and the first parameter will take the value of the first item.
  

7. Third-party library: interface request fly, token encryption jsonwebtoken(jwt)

8. Mini Program Payment API

• wx.requestPayment(Object object)
  
  

• https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_10&index=1