Problèmes et points de connaissance rencontrés dans le projet uniapp

1. Mandataire

Catégorie :

• procuration directe.
• procuration inverse.

1.1. Proxy de transfert :

1. dans l'environnement de développement.
2. Le serveur d'échafaudage implémente le proxy.
3. serveur de développement webpack。
4. Lorsque le navigateur envoie une demande, il demande d'abord le serveur proxy de transfert, et le serveur proxy de transfert envoie la demande au serveur cible.
5. Le côté serveur ne sait pas qui a fait la demande .

1.2. Proxy inverse :

1. dans l'environnement de production.
2. Implémentation du serveur proxy inverse.
3. nginx。
4. Le navigateur envoie une demande au serveur, qui est d'abord reçue par le serveur proxy inverse et transmise au serveur cible.
5. Le côté navigateur ne sait pas qui a renvoyé les données .

2, Vuex

2.1. Fonction

1. Gérez les données d'état de manière centralisée.
2. Utilisé pour partager entre plusieurs composants.

2.2 Concepts de base

1. objet de magasin.
2. état : données d'état.
3. mutations : modifier de manière synchrone les données d'état.
4. Actions:

• Obtenez des données asynchrones.
• Transmettez les données asynchrones à la mutation pour un traitement synchrone.

5. dispatch : action de dispatch.
6. getters：

• Il est utilisé pour calculer de nouvelles données d'état sur la base des données d'état existantes.
• Équivalent à calculé dans Vue.

7. modules : utilisé pour la gestion modulaire.

• Ci-joint:

<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. style css

3.1, espace blanc (pré-emballage)

3.2, alignement vertical (haut)

3.3. Affichage des points de suspension des avantages du texte sur deux lignes

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

3.4、calc()

La fonction calc() est utilisée pour calculer dynamiquement la valeur de la longueur.

• A noter qu'un espace doit être réservé avant et après l'opérateur , par exemple height: calc(100vh - 80px);
• Toute valeur de longueur peut être calculée à l'aide de la fonction calc().
• La fonction calc() prend en charge les opérations "+", "-", "*", "/".
• La fonction calc() utilise les règles de priorité standard pour les opérations mathématiques.
• Remarque ⚠️ : Lors du développement d'un petit programme dans uniapp, la hauteur du centre personnel inférieur et du module où se trouve le panier n'a pas besoin d'être réduite.

3.5. Problèmes rencontrés dans la mise en page flexible justifier-contenu

Lorsque l'élément enfant est un nombre impair, le dernier élément sera centré, ce qui peut être résolu en utilisant des pseudo-classes :

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

4. Propriété calculée calculée et suivi de la surveillance de la propriété

4.1, attribut calculé calculé

• Remarque ⚠️ : Si vous utilisez des fonctions fléchées pour les propriétés calculées, alorscene pointera pas vers une instance de ce composant, mais vous pourrez toujours y accéder en tant que premier paramètre d'une fonction fléchée .

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

• Les résultats des propriétés calculées sont mis en cache et recalculés à moins que la propriété réactive dépendante ne change. Notez que si une dépendance (telle qu'une propriété non réactive) est en dehors de la portée de l'instance, la propriété calculée estNe le fera pasmis à jour

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, surveiller la surveillance des attributs

L'attribut de surveillance peut surveiller la valeur des données et peut également surveillerpropriété calculéela valeur dans

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

• Remarque : Les formes abrégées peuvent être utilisées lorsque immédiat et profond ne sont pas utilisés.

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

• Remarque ⚠️ : les fonctions fléchées ne doivent pas être utilisées pour définir les fonctions d'observation (par ex.searchQuery : newValue => this.updataAutocomplete(newValue)) la raison est que la fonction de flèche est liée au contexte de la portée parent, donccene pointera pas vers l'instance de Vue comme prévu,this.updataAutocompletesera indéfini.

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

Cas d'application :

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

5. Données réactives vs données non réactives

• données réactives

1. Les données qui existaient lorsque l'instance de composant a été initialisée.
2. Les mises à jour des vues sont déclenchées lorsque les données changent.

• données non réactives

1. Les données qui ne sont pas disponibles lorsque l'instance de composant est initialisée et les données qui sont directement ajoutées ultérieurement.
2. Les mises à jour des vues ne sont pas déclenchées lorsque les données changent.
   Solution :
   Vous pouvez utiliser Vue.set(target, propertyName / index, value) ou vm.$set()

• 参数：
  1、{ Objet | Tableau } cible
  2、{ chaîne | nombre } propertyName / index
  3、{ any } valeur
• Utilisation
  Ajoutez une propriété à l'objet réactif et assurez-vous que la nouvelle propriété est également réactive et déclenche une mise à jour de la vue. Il doit être utilisé pour ajouter de nouvelles propriétés aux objets réactifs , car Vue ne peut pas détecter les nouvelles propriétés ordinaires (par exemple : this.myObect.newProperty = 'hi')
• Remarque ⚠️ : L'objet ne peut pas être une instance de Vue, ni l'objet de données racine d'une instance de Vue

6. La différence entre tous et certains dans le tableau et d'autres méthodes courantes

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

• every : tous les éléments remplissent les conditions, seulement pour retourner true.

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

• certains : Tant que l'une des conditions est remplie, ce sera vrai.

6.3、carte()

• map() : fait référence au "mappage", exécute une fonction donnée sur chaque élément du tableau et renvoie un tableau des résultats de chaque appel de fonction .

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, méthode de réduction

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

• La méthode reduce() accepte qu'une fonction de rappel soit appelée pour chaque élément du tableau jusqu'à la fin du tableau.
• reduce accepte une fonction à quatre paramètres :

1. dernière valeur.
2. La valeur actuelle.
3. L'indice de la valeur actuelle.
4. déployer.

Par exemple :

• reduce a un deuxième paramètre, s'il n'est pas passé, il commencera à partir du deuxième élément et le premier paramètre prendra la valeur du premier élément.
  

7. Bibliothèque tierce : requête d'interface fly, chiffrement de jeton jsonwebtoken(jwt)

8. API de paiement du mini-programme

• wx.requestPayment (objet objet)
  
  

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