Questions et réponses de l'entretien du programme WeChat Mini (2023)

1. Décrivez brièvement les types de fichiers pertinents du programme WeChat Mini ?

Réponse de référence : Il existe quatre principaux types de fichiers dans la structure du projet d'applet WeChat, comme suit

1. WXML (WeiXin Markup Language) est un ensemble de langages de balisage conçu par le framework, combiné avec des composants de base et des systèmes d'événements, il peut construire la structure de la page. L'intérieur est principalement un ensemble de composants définis par WeChat lui-même.

2. WXSS (WeiXin Style Sheets) est un langage de style utilisé pour décrire les styles de composants WXML,

Traitement logique 3.js, requête réseau

4. Paramètres de l'applet json, tels que l'enregistrement de la page, le titre de la page et la barre de tabulation.

2. Comment encapsulez-vous la demande de données de l'applet WeChat ?

Réponse de référence :

1. Mettez toutes les interfaces dans un fichier js unifié et exportez

2. Créer une méthode d'encapsulation des données de requête dans app.js

3. Appelez la méthode encapsulée pour demander des données dans la sous-page

3. Quelles méthodes existe-t-il pour passer des paramètres ?

Réponse de référence :

1. Ajoutez l'attribut data-* à l'élément HTML pour transmettre la valeur dont nous avons besoin, puis récupérez-la via le paramètre param de e.currentTarget.dataset ou onload. Mais le nom de données ne peut pas avoir de majuscules et ne peut pas stocker d'objets

2. Définissez l'ID de méthode de l'ID pour transmettre la valeur Obtenez la valeur de l'ID défini via e.currentTarget.id, puis transmettez la valeur en définissant l'objet global

3. Ajouter une valeur de passage de paramètre dans le navigateur

4. Quelles méthodes avez-vous utilisées pour améliorer la vitesse d'application des mini programmes WeChat ?

Réponse de référence :

1. Améliorer la vitesse de chargement des pages

2. Prédiction du comportement de l'utilisateur

3. Réduire la taille des données par défaut

4. Schéma des composants

5. Qu'est-ce qui est le mieux, un mini programme ou une application native ?

Réponse de référence :

En plus du faible coût de développement du compte officiel, du faible coût d'acquisition de clients et de l'absence de téléchargement, le mini-programme a été considérablement amélioré en termes de délai de demande de service et d'expérience utilisateur, lui permettant de réaliser des fonctions de service complexes et de permettre aux utilisateurs d'obtenir un meilleure expérience utilisateur

6. Expliquez brièvement le principe du programme WeChat Mini ?

Réponse de référence :

Les applets WeChat sont développées à l'aide de trois technologies : JavaScript, WXML et WXSS. Techniquement parlant, elles sont similaires au développement frontal existant, mais elles sont différentes lorsqu'on creuse plus profondément.

JavaScript : Tout d'abord, le code JavaScript s'exécute dans l'application WeChat, pas dans le navigateur, de sorte que certaines applications de la technologie H5 nécessitent que l'application WeChat fournisse la prise en charge de l'API correspondante, ce qui limite l'application de la technologie H5, et cela ne peut pas être appelé H5 strict. , il peut être appelé pseudo H5. De même, certaines API uniques fournies par WeChat ne sont pas supportées par H5 ou pas très bien.

WXML : WXML est développé par WeChat lui-même sur la base de la syntaxe XML, donc lors du développement, seules les balises existantes fournies par WeChat peuvent être utilisées, et les balises HTML ne peuvent pas être utilisées.

WXSS : WXSS possède la plupart des fonctionnalités de CSS, mais elles ne sont pas toutes prises en charge, et il n'y a pas de documentation détaillée sur celles qui sont prises en charge et celles qui ne le sont pas.

L'architecture de WeChat est un modèle d'architecture basé sur les données. Son interface utilisateur et ses données sont séparées, et toutes les mises à jour de page doivent être réalisées en modifiant les données.

L'applet est divisée en deux parties webview et appService. Parmi eux, webview est principalement utilisé pour afficher l'interface utilisateur et appService est utilisé pour traiter la logique métier, les données et les appels d'interface. Ils s'exécutent en deux processus, communiquent via la couche système JSBridge et réalisent le rendu de l'interface utilisateur.

7. Analyser les avantages et les inconvénients des mini programmes WeChat ?

Réponse de référence :

Avantage:

  1. Pas besoin de télécharger, vous pouvez l'ouvrir en recherchant et en scannant.

  2. Bonne expérience utilisateur : ouverture rapide.

  3. Le coût de développement est inférieur à App.

  4. Il peut être ajouté au bureau sur Android, qui est similaire à l'application native.

  5. Fournir aux utilisateurs une bonne protection de sécurité. Pour la publication de petits programmes, WeChat a un processus d'examen strict, et les petits programmes qui ne réussissent pas l'examen ne peuvent pas être publiés en ligne.

Désavantages:

  1. Plus restrictif. La taille de la page ne peut pas dépasser 1M. Les pages avec plus de 5 niveaux ne peuvent pas être ouvertes.

  2. Style unique. Certains composants de l'applet ont déjà été formés et le style ne peut pas être modifié. Par exemple : diaporama.navigation.

  3. La zone de promotion est étroite, vous ne pouvez pas partager de Moments, vous ne pouvez le partager qu'avec des amis et le promouvoir via des applets à proximité. Parmi eux, les applets à proximité sont également restreints par WeChat.

  4. En s'appuyant sur WeChat, il est impossible de développer des fonctions de gestion en arrière-plan.

8. Quelle est la différence entre le programme WeChat Mini et H5 ?

Réponse de référence :

Le premier est la différence dans l'environnement d'exploitation

L'environnement d'exploitation HTML5 traditionnel est un navigateur, y compris la vue Web, tandis que l'environnement d'exploitation des applets WeChat n'est pas un navigateur complet. Il s'agit d'un analyseur intégré entièrement reconstruit par l'équipe de développement WeChat sur la base du noyau du navigateur, qui est spécialement optimisé pour applets. , avec la norme de langage de développement définie par elle-même, les performances de l'applet sont améliorées.

La seconde est la différence des coûts de développement

Il ne fonctionne que dans WeChat, vous n'avez donc pas à vous soucier de la compatibilité du navigateur, et vous n'avez pas à vous soucier des bogues inattendus et merveilleux dans l'environnement de production

La troisième est la différence dans l'obtention des autorisations au niveau du système

Les autorisations au niveau du système peuvent être connectées de manière transparente aux applets WeChat

Le quatrième est la fluidité d'exécution de l'application dans l'environnement de production

Pendant longtemps, lorsque les applications HTML5 sont confrontées à une logique métier complexe ou à une interaction de page riche, leur expérience est toujours insatisfaisante et une optimisation constante du projet est nécessaire pour améliorer l'expérience utilisateur. Cependant, en raison de l'environnement d'exploitation indépendant de l'applet WeChat

9. Comment résoudre le problème de requête asynchrone de l'applet ?

Réponse de référence :

Appelez la fonction du composant suivant dans la fonction de rappel :

application. js

  success: function(info) {
    
    
      that.apirtnCallback(info)
  }

indice. js

onLoad: function() {
    
    
    app.apirtnCallback = res => {
    
    
        console.log(res)
    }
}

10. Quelle est la différence entre la liaison bidirectionnelle de l'applet et vue ?

Réponse de référence : les propriétés de this.data directement dans l'applet ne peuvent pas être synchronisées avec la vue et doivent être appelées

this.setData({
    
    
    noBind: true
})

11. Quelles sont les différences entre wxss et css dans les applets ?

Réponse de référence :

1. L'importation d'image de wxss doit utiliser l'adresse du lien externe ;

2. Sans corps, les styles peuvent être importés directement à l'aide de l'importation ;

12. Comment les pages de la vue Web reviennent-elles à l'applet ?

Réponse de référence : Tout d'abord, introduisez la dernière version de jweixin-1. 3. 2. js, puis

wx.miniProgram.navigateTo({
    
    
    url: '/pages/login/login' + '$params'
})

13. Comment déterminer l'unicité de l'utilisateur lorsque le Mini Programme est associé au Compte Officiel WeChat ?

Réponse de référence : utilisez la méthode wx.getUserInfo withCredentials pour obtenir les données cryptées, qui contiennent union_id. Le backend doit effectuer un déchiffrement symétrique

14. Comment implémenter l'actualisation déroulante ?

Réponse de référence : utilisez la vue au lieu de la vue de défilement, définissez la fonction onPullDownRefresh pour obtenir

15. À quoi faut-il faire attention lors de l'utilisation de webview pour charger directement ?

Réponse de référence :

1. Vous devez passer par l'administrateur pour ajouter le nom de domaine métier en arrière-plan de l'applet ;

2. Le script de la page h5 pour accéder à l'applet doit être 1.3.1 ou supérieur ;

3. Le partage WeChat ne peut être que le nom principal du mini programme. Si vous souhaitez personnaliser le contenu partagé, la version du mini programme doit être supérieure à 1.7.1 ;

4. Le paiement de h5 ne peut pas être l'appid du compte officiel WeChat, ce doit être l'appid de l'applet, et l'openid de l'utilisateur doit également être l'utilisateur et l'applet.

16. Quels problèmes les applets rencontrent-elles lors de l'appel de l'interface d'arrière-plan ?

Réponse de référence :

1. La taille des données est limitée, le dépassement de la limite entraînera directement le blocage de l'applet entière à moins que l'applet ne soit redémarrée ;

2. L'applet ne peut pas rendre directement le contenu du texte html de la page de contenu de l'article. Si vous devez l'afficher, vous devez utiliser le plug-in, mais le rendu du plug-in ralentira le chargement de la page, il est préférable de filtrer le html du contenu de l'article en arrière-plan. Traiter directement le remplacement en bloc des balises p et des balises div pour afficher les balises, puis laisser le plug-in faire d'autres balises pour réduire le temps sur le front-end.

17. Comment la page d'affichage Web passe-t-elle à la page de navigation de l'applet ?

Réponse de référence : La page parcourue par l'applet est accessible via switchTab, mais les données ne seront pas rechargées par défaut.
Si vous devez charger de nouvelles données, ajoutez simplement le code suivant à l'attribut success :

success: function(e) {
    
    
    var page = getCurrentPages().pop();
    if (page == undefined || page == null) return;
    page.onLoad();
}

La page de webview, puis passez

wx.miniProgram.switchTab({
    
    
    url: '/pages/index/index'
})

18. Quelle est la différence entre les petits programmes et Vue ?

Réponse de référence :

1. En boucle : l'applet est wx:for="list", alors que Vue est v-for="(item, index) in list"

2. Lors de l'appel du modèle de données : l'applet est this.data.uinfo et Vue est this.uinfo ; l'affectation au modèle est également différente, l'applet est this.setData({uinfo:1}) et Vue est directement ce .uinfo=1

19. Cycle de vie du mini-programme

Réponse de référence :

// app.js
App({
    
    
    onLaunch(options) {
    
    
        // Do something initial when launch.
    },
    onShow(options) {
    
    
        // Do something when show.
    },
    onHide() {
    
    
        // Do something when hide.
    },
    onError(msg) {
    
    
        console.log(msg)
    },
    globalData: 'I am global data'
})
//index.js
Page({
    
    
  data: {
    
    

    text: "This is page data."

  }, 
  onLoad: function(options) {
    
    

    // 页面创建时执行

  }, 
  onShow: function() {
    
    

    // 页面出现在前台时执行

  }, 
  onReady: function() {
    
    

    // 页面首次渲染完毕时执行

  }, 
  onHide: function() {
    
    

    // 页面从前台变为后台时执行

  }, 
  onUnload: function() {
    
    

    // 页面销毁时执行

  }, 
  onPullDownRefresh: function() {
    
    

    // 触发下拉刷新时执行

  }, 
  onReachBottom: function() {
    
    

    // 页面触底时执行

  }, 
  onShareAppMessage: function () {
    
    

    // 页面被用户分享时执行

  }, 
  onPageScroll: function() {
    
    

    // 页面滚动时执行

  }, 
  onResize: function() {
    
    

    // 页面尺寸变化时执行

  }, 
  onTabItemTap(item) {
    
    

    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)

  }, 
  // 事件响应函数
  viewTap: function() {
    
    

    this.setData({
    
    
      text: 'Set some data for updating view.'
    }, function() {
    
    
      // this is setData callback
    })

  }, 
  // 自由数据
  customData: {
    
    

    hi: 'MINA'

  }
})

[Le transfert d'image du lien externe a échoué, le site source peut avoir un mécanisme anti-leeching, il est recommandé d'enregistrer l'image et de la télécharger directement (img-mNUAtpcs-1675613277237)(.../images/miniProgram_001.png)]

20. Comment la page h5 transmet-elle les paramètres à l'applet ?

Réponse de référence :

1、H5页面
<script src="${base}/resources/common/js/jweixin.miniProgram.js"></script>

wx.miniProgram.postMessage({
  data: {
    shareUrl:href
  }
});

注意:传参必须使用data

2、小程序页面接收

Page({
//获取H5传给小程序的参数
getMessage: function(e) {
  if (!e.detail) {
    return
  }
  var datas = e.detail.data
  var shareUrl = datas.shareUrl;
}
})

index.wxml文件

おすすめ

転載: blog.csdn.net/suli77/article/details/128895236