wechat app issues

problèmes-avec-l'application-wechat

Je sais depuis longtemps que l'écueil des mini programmes est très profond. Après plus d'un mois de pratique, j'ai trouvé que cet écueil était effectivement bien mérité...

Cependant, le petit programme développé a été lancé comme prévu, ce qui mérite quand même de se réjouir ! ! ! Haha, enregistre les points qui te font réfléchir.

1. Pièges rencontrés dans le développement des mini-programmes WeChat

• 1. {{}} ne peut pas exécuter de méthodes et ne peut gérer que des opérations simples telles que "+ - * /". Par exemple, lors du parcours d'une liste, le montant de chaque élément doit être formaté uniquement en. js puis setData Once (╯□╰)
• 2. Vous ne pouvez que passer, vous ne pouvez que passer, vous ne pouvez mettre à jour la vue que via setData(), piège...
• 3. Nous stipulons que le chemin de la page ne peut comporter que cinq niveaux. Veuillez essayer d'éviter les interactions à plusieurs niveaux.
• 4. Page A -> Page B, la page B revient à A, comment déclencher le rafraîchissement de A sans augmenter le niveau de la page. La solution qui me vient à l'esprit pour le moment : écrire la logique des données d'initialisation de A dans l'événement onshow de la page A.
• 5. undefined est traité comme une chaîne if(xxx == "undefined") [Optimisation itérative dans les versions ultérieures]
• 6. Lorsque vous rencontrez des problèmes étranges (tels que des styles, etc.), redémarrez d'abord l'outil et il ne fonctionnera jamais après des tentatives répétées.
• 7. Les polices Web locales ne sont pas prises en charge (les polices en ligne doivent être utilisées). Après les tests, il a été constaté que certains appareils Android ne peuvent pas s'afficher correctement. Après bien des problèmes, j'ai découvert que le serveur qui devait à l'origine stocker les polices devait prendre en charge plusieurs domaines. Bon sang, aucune erreur n'est signalée lors du débogage sur le téléphone mobile, j'ai failli abandonner les polices Web. Je suis coincé depuis longtemps, c'est un piège...
• 8. Si les ressources locales ne peuvent pas être obtenues via CSS, vous pouvez utiliser des images réseau, ou base64, ou utiliser la balise <image/> .
• 9. Page.data ne peut pas être utilisé directement [Évitez d'attribuer et de modifier directement Page.data, veuillez utiliser Page.setData pour synchroniser les données avec la page pour le rendu]
• 10. Utilisez type="digit" pour le clavier numérique
• 11. Que se passe-t-il si vous avez utilisé https mais qu'il signale que vous ne pouvez pas établir une connexion sécurisée avec le serveur [Vous devez configurer nginx pour configurer la norme de cryptage de https sur tls1.2 et supérieur]
• 12. wx.setStorage(OBJECT) [Actuellement, chaque mini-programme est limité à 5M]
• 13. Surveillance des données [backend WeChat : nombre réel de visites/aperçu d'hier/nombre cumulé d'utilisateurs visités/pages TOP visitées]
• 14. Artefact de débogage WeChat, ngrok, voir ngrok
• 15. Ajoutez un effet de clic pour afficher [besoin d'activer l'effet de survol] :

    < view hover hover-class =" item-hover " >

• 16. Méthode de débogage de l'autorisation utilisateur [Outils de développement-》Effacer les données d'autorisation du téléphone mobile (Cache-Effacer les données d'autorisation du téléphone mobile)]
• 17. Lorsque le mini programme est chargé pour la première fois sur le téléphone Android, sur la page d'accueil, la méthode onshow sera chargée deux fois de manière inexplicable, mais elle ne sera pas chargée sur l'iPhone puisqu'elle doit être déclenchée dans onshow pour. obtenir des informations sur l'utilisateur, le système chargera onshow deux fois. Une erreur est signalée en arrière-plan. . .
• 18. Désactiver la liste déroulante des pages : définissez "disableScroll" : true.
• 19. getAppConfig:fail apparaîtra sous Android et userInfo ne pourra pas être obtenu. Problème WeChat, téléchargez le dernier package d'installation WeChat
• 20. L'arrière-plan ne peut pas accepter les données POST, mais peut recevoir les paramètres de requête GET.

    url: url,
    data: data,
    method: "POST",
    dataType: "json",
    header: {
      'content-type': 'application/x-www-form-urlencoded' //==> 此处若为application/json则服务端无法获取POST的参数
    }

• 21. Une fois que l'utilisateur a refusé l'autorisation lors du premier démarrage du mini-programme, la boîte de dialogue d'autorisation ne peut pas être évoquée la prochaine fois et le dernier choix de l'utilisateur sera mémorisé par défaut. Aucune solution n’a encore été trouvée et WeChat ne dispose d’aucune analyse pertinente. 【2017-01-10】 WeChat a mis à jour l'API (wx.authorize(OBJECT)) pour prendre en charge l'évocation des boîtes contextuelles d'autorisation【2017-07-05】
• 22. Pour accéder à une page avec une barre d'onglets, vous devez utiliser wx.switchTab(). Ceci est demandé dans divers groupes presque tous les jours ! ! !
• 22. Lorsque vous engagez des développeurs/expérimentateurs, n'oubliez pas de confirmer l'invitation sur votre téléphone portable. (Beaucoup de gens ont demandé)

• 23. L'arrière-plan de WeChat a mis à jour le nom de domaine légal de la demande. Vous pouvez accéder directement à Outils de développement WeChat-->Projet-->Informations de configuration-->Actualiser, et cela prendra effet immédiatement.
• 24. Le mini-programme officiel ne fournit pas d'exemple de décryptage des informations de connexion de la version Java. Vous pouvez utiliser cette démo de décryptage de la version Java.
• 25. Lorsque vous utilisez wx:for pour parcourir, il est préférable d'ajouter wx:key="{{item.id}}". Si vous savez clairement que la liste est statique ou si vous n'avez pas besoin de prêter attention à son ordre. , vous pouvez choisir de l'ignorer. Cependant, si le tableau parcouru change, la séquence de données peut changer.

• 26. La commodité de la page de développement de mini-programmes est rpx, il est donc recommandé d'utiliser la taille de l'iPhone 6 pour le projet de conception. Pour une mise en page flexible, veuillez vous référer à cet article
• 27. L'applet WeChat surveillera les modifications apportées aux fichiers par défaut, puis s'actualisera automatiquement. Mais l'inconvénient est qu'il est entièrement actualisé à chaque fois au lieu d'un remplacement à chaud des modules, ce qui affectera la vitesse de développement. Surtout pour les développeurs qui aiment Command + S fréquents, vous constaterez que votre mini-programme est constamment actualisé. @MinJieLiu
• 28. Le mini-programme WeChat prend en charge le composant web-view depuis la bibliothèque de base 1.6.4 , c'est-à-dire que le mini-programme prend en charge la possibilité d'intégrer des pages Web. Cependant, lors de son utilisation, il a été constaté que la page Web ne pouvait pas être intégrée. affiché dans les outils de développement, mais l'aperçu mobile peut être [mis à niveau] La dernière version du client WeChat]. La raison en est que la bibliothèque de base utilisée ne prend pas en charge web-view , ce qui peut être résolu en sélectionnant la dernière bibliothèque de base. comme suit:

• 29. La communication entre le H5 et les mini-programmes n'est pas prise en charge et ne peut pas être communiquée via le stockage local ou d'autres moyens. Si vous avez absolument besoin de transmettre des paramètres, vous pouvez essayer de les transmettre dans web-view , mais ce n'est pas recommandé. peut être autorisé en utilisant le compte officiel. Capacités ouvertes d'affichage Web (les pages Web doivent intégrer jssdk) : Interfaces JSSDK prises en charge dans les pages Web :
• 30. La vue Web ne prend actuellement pas en charge le paiement WeChat.
• 31. Dans le mini-programme, catch de try...catch utilise throw pour générer une erreur, qui ne peut pas être détectée par l' try...catch externe.

2. Configurations associées avant le développement du mini-programme

• 1. Connexion--->L'administrateur scanne le code QR-->Paramètres-->Paramètres de développement-->Générer AppSecrect
• 2. Connexion à la configuration du serveur--->L'administrateur scanne le code QR-->Paramètres-->Paramètres de développement-->Nom de domaine du serveur-->Scannez le code QR
• 3. Lier l'identité de l'utilisateur du développeur -> Développeur -> Jusqu'à 10 développeurs de code QR
• 4. Liez l'identité de l'utilisateur de l'expérimentateur -> Expérimentateur -> Scannez le code QR à 20 expérimentateurs

3. Sortie du mini-programme

La publication ne peut être effectuée qu'avec un compte administrateur. Les étapes sont les suivantes :

• Quittez le compte développeur dans les outils de développement
• L'administrateur scanne le code QR pour se connecter aux outils de développement, télécharger -> définir l'arrière-plan de WeChat comme version d'essai -> réviser -> publier

Remarque : le délai d'examen est variable, 2 à 6 jours

4. Recueil des raisons de l'échec de l'examen

• 1. L'introduction au mini-programme ne présente pas les fonctions du mini-programme.
• 2. La catégorie n'est pas cohérente avec le contenu fourni sur la page
• 3. Les services et le contenu fournis par le mini-programme doivent être formels et ne peuvent pas être soumis comme contenu de test ou soumis plusieurs fois comme contenu de test.
• 4. S'il contient du contenu audio et vidéo, veuillez ajouter les catégories correspondantes pertinentes.
• 5. Les images et le texte de la page d'accueil se chevauchent, il est donc recommandé de les optimiser.
• 6. Le champ de recherche ne peut être sélectionné qu'après quelques clics. Il n'y a aucune réponse lorsque vous cliquez sur les commentaires de la page. La résolution et la taille des images de la page sont déformées.
• 7. Certaines photos montrent qu'elles ont été compressées et que l'examen physique n'était pas bon.
• 8. Les mini-programmes dotés d'un système de compte doivent prendre en charge la connexion autorisée par WeChat en plus de leurs propres méthodes de connexion.
• 9. Pour les services qui doivent être connectés pour être utilisés, veuillez fournir un compte test
• 10. Il existe un commerce en ligne d'objets virtuels. Le système iOS nécessite IAP. Le mini-programme ne paie pas pour le moment. Veuillez faire attention au suivi.
• 11. Le contenu principal de la page correspondant à la catégorie de service de mini-programme doit être cohérent avec cette catégorie.
• 12. Il faut s'assurer que les utilisateurs peuvent utiliser la catégorie de service sur cette page et ne doivent pas se cacher ou effectuer plusieurs sauts.
• 13. N'affichez pas et ne recommandez pas de mini-programmes tiers. Exemple : la navigation dans les mini-programmes, la promotion des liens des mini-programmes, les classements des mini-programmes, etc. ne peuvent pas être effectués.
• 14. Il existe des comportements d'incitation dans le contenu des pages des mini-programmes, y compris, mais sans s'y limiter, l'incitation à partager, l'incitation à ajouter, l'incitation à suivre des comptes publics, l'incitation à télécharger, etc. Programmes qui obligent les utilisateurs à partager, ajouter, suivre ou téléchargés avant de pouvoir fonctionner, contiennent des mini-programmes qui expriment ou impliquent une rédaction, des images, des boutons, des superpositions, des fenêtres contextuelles, etc. que les utilisateurs partagent, des mini-programmes qui incitent les utilisateurs à partager et à diffuser par la tentation d'avantages, des mini-programmes qui utiliser des mots exagérés pour contraindre ou inciter les utilisateurs à partager, forcer ou inciter. Tous les mini-programmes ajoutés par les utilisateurs seront rejetés ;
• 15. Interdire la lecture automatique de contenus multimédias tels que des vidéos, de la musique et des voix.
• 16. Si le mini-programme dispose d'un système de compte, il doit fournir une option de compte de « déconnexion » qui peut être utilisée normalement et qui est facile à trouver.
• 17. Le contenu du mini-programme ne peut pas inclure des jeux de hasard, des quiz et des tirages.
• 18. Le contenu du test ne peut pas exister dans le contenu de la page du mini programme ; exemples : divination, loterie, horoscope, etc.

Situations de rejet courantes sur d'autres plateformes de mini-programmes WeChat

5. Documentation et communauté

• 1.Documents officiels
• 2. Questions et réponses officielles
• 3. Communauté officielle
• 4. Mini guide d'accès au programme
• 5. FAQ courantes sur les mini-programmes

6. coder

• 1. Encapsulez l'interface de demande d'initiation WeChat. Si la connexion échoue, la demande de connexion sera automatiquement lancée par défaut.

 /**
 * 发起的是 HTTPS 请求
 * @pram url: 请求地址,协议必须为https
 * @pram data 请求参数请求参数
 * @param success 请求成功回调
 * @param fail 请求失败回调
 * @param complete 请求完成（成功或者失败）回调
 */
function request ( url , data , success , fail , complete ) {
  var _url = url ,
      _data = data ,
      _success = success ,
      _fail = fail ,
      _complete = complete ;

  wx . request ( {
    url : url ,
    data : data ,
    method : "POST" ,
    dataType : "json" ,
    header : {
      'content-type' : 'application/x-www-form-urlencoded' ,
      'Client-Agent' : getSystemInfo ( ) ,
      'WX-SESSION-ID' : wx . getStorageSync ( constant [ 'WX-SESSION-ID' ] ) //每次请求带上登录标志
    } ,
    success : function ( res ) {
      if ( res . data . code == "-9999" ) { //会话失效重新登录
        requestLogin ( function ( ) {
          constant [ 'NUM_TRY_LOGIN' ] ++ ;
          //设置请求上限，防止重复提交并死循环
          if ( constant [ 'NUM_TRY_LOGIN' ] < constant [ 'LIMIT_NUM_TRY_LOGIN' ] ) {
            request ( _url , _data , _success , _fail , _complete ) ;
          }
        } ) ;
        return ;
      }
      if ( res . data . code == "0" ) {
         if ( typeof _success == "function" ) {
           _success ( res . data ) ;
         }
      } else {
         wx . showToast ( { title : res . data . msg , icon : 'loading' , duration : 2000 } ) ;
         return ;
      }
    } ,
    fail : function ( res ) {
      if ( typeof _fail == "function" ) {
        _fail ( res ) ;
      }
      if ( typeof _fail == "string" ) { //请求失败的弹框提示
        wx . showToast ( { title : _fail , icon : 'loading' , duration : 2000 } ) ;
      }
    } ,
    complete : function ( res ) {
      if ( typeof _complete == "function" ) {
        _complete ( res ) ;
      }
    }
  } ) ;
}

• 2. Demander l'interface de connexion

 /**
 * 请求登录,获取用户相关信息
 * @param callback
 */
function requestLogin ( callback ) {
  var _callback = callback ;
  wx . login ( {
      success : function ( event ) {
        // 获取到请求码，继续请求用户的基本信息
        if ( event . code ) {
          var code = event . code ;
          wx . getUserInfo ( {
              success : function ( res ) {
                var data = {
                  code : code ,
                  encryptedData : res . encryptedData ,
                  iv : res . iv ,
                  signature : res . signature ,
                  rawData : res . rawData
                }
                var url = domain + "/wx_xxx" ; //请求登录地址
                request ( url , data ,
                  function ( res ) { //success
                    if ( res . code == "0" ) {
                       //此处可以将服务端返回的登录状态保存起来
                       wx . setStorageSync ( constant [ 'WX-SESSION-ID' ] , res . object . sessionId ) ;
                       if ( typeof _callback == "function" ) {
                         _callback ( ) ;
                       }
                    }
                  } ,
                  function ( res ) { //fail
                    wx . showToast ( { title : '请求登录失败' , icon : 'loading' , duration : 2000 } ) ;
                  }
                ) ;
              } ,
              fail : function ( res ) {
                //用户拒绝授权
                if ( res . errMsg == "getUserInfo:cancel" || res . errMsg == "getUserInfo:fail auth deny" ) {
                  wx . redirectTo ( { //跳转至未授权页面
                    url : '../xxx-page/xxx-page'
                  } ) ;
                }
              }
          } )
        } else {
          wx . showToast ( { title : '微信登录失败' , icon : 'loading' , duration : 2000 } ) ;
        }
      } ,
      fail : function ( res ) {
        wx . showToast ( { title : '微信登陆失败！' , icon : 'loading' , duration : 2000 } ) ;
      }
  } ) ;
}