Analyse des questions fréquemment posées dans le développement du mini-programme WeChat

Cela fait plus de dix jours que la version bêta interne du programme WeChat Mini a été publiée, et les discussions sur le programme WeChat Mini ont été extrêmement animées en ligne Depuis sa sortie jusqu'à aujourd'hui, le WeChat Mini. Le programme a fait la une de divers forums techniques. Bien sûr, diverses plateformes proposent également des reportages sur les mini-programmes WeChat. Après tout, Tencent a toujours une grande influence en Chine. Nous savons tous que le mini-programme WeChat a publié une version bêta interne le premier jour et n'a pas divulgué les documents de développement officiels ni les outils de développement, mais cela ne peut pas arrêter la curiosité des techniciens.

Parce que je suis aussi très intéressé par les petits programmes et que je pense que c'est une chose très intéressante, j'ai donc immédiatement fait une petite démo. Mon niveau est limité, donc le processus pour le faire est aussi un processus d'apprentissage et. un processus d’amélioration.
Cet article décrit principalement certains problèmes que j'ai rencontrés lors de l'écriture de la démo. Je serais très heureux si la lecture de cet article vous était utile.

1 : Structure du projet

La structure du projet d'applet WeChat comporte principalement quatre types de fichiers, comme suit

WXML (WeiXin Markup Language) est un ensemble de langages de balises conçus par le framework, combiné avec des composants de base et des systèmes d'événements, la structure de la page peut être construite. La partie interne est principalement un ensemble de composants définis par WeChat lui-même.

WXSS (WeiXin Style Sheets) est un ensemble de langages de style utilisés pour décrire les styles de composants WXML, le

le traitement logique js, les requêtes réseau

les paramètres d'applet json, tels que comme enregistrement de page, titre de page et tabBar.

Remarque : Afin de permettre aux développeurs de réduire les éléments de configuration, il est stipulé que les quatre fichiers décrivant la page doivent avoir le même chemin et le même nom de fichier.

Les quatre types de fichiers nommés avec app dans le répertoire racine sont les fichiers d'entrée du programme.

app.json

Ce fichier doit être présent. Sans ce fichier, le projet ne peut pas s'exécuter car le framework WeChat l'utilise comme entrée du fichier de configuration et configuration globale de l'ensemble du mini programme. Y compris l'enregistrement de la page, les paramètres réseau et la couleur d'arrière-plan de la fenêtre du mini programme, la configuration du style de la barre de navigation et la configuration du titre par défaut.

app.js
Ce fichier doit être présent, sinon une erreur sera signalée ! Mais créez simplement ce fichier. Vous n'avez rien à écrire
À l'avenir, nous pourrons surveiller et traiter les fonctions de cycle de vie du mini-programme et déclarer des variables globales dans ce fichier.

app.wxss
Fichier de style configuré globalement, non requis pour le projet.

Si vous connaissez la structure de base des fichiers du mini programme, vous pouvez commencer à étudier la démo officielle. S'il y a quelque chose que vous ne comprenez pas pendant le processus de recherche, vous pouvez consulter la documentation officielle pour obtenir des réponses. Si vous ne trouvez pas la réponse ou si vous avez des questions, vous pouvez visiter ce blog, laisser des messages et communiquer entre vous. Voici quelques problèmes les plus susceptibles de survenir.

2 : Foire aux questions

rpx (pixel réactif)

L'applet WeChat a récemment défini une unité de taille qui peut s'adapter aux écrans avec différentes résolutions. Elle précise l'écran. la largeur est de 750rpx. Par exemple, sur l'iPhone 6, la largeur de l'écran est de 375px et il y a 750 pixels physiques au total, alors 750rpx = 375px = 750 pixels physiques, 1rpx = 0,5px = 1 pixel physique.

J'ai utilisé des unités de taille rpx pour ce projet et j'ai rencontré un problème très étrange au cours du processus. Il y aura une ligne de démarcation directement entre deux informations adjacentes. Je règle la hauteur de la ligne sur 1rpx, mais s'il n'y a pas de ligne de démarcation individuelle, elle ne sera pas affichée comme le montre l'image ci-dessous

Sélectionnez Aucun AppID lors de la création d'un projet pour l'applet WeChat. App.json sera généré lors de la création du projet. app.josn est le fichier le plus important pour le démarrage du programme, les paramètres de la fenêtre, les paramètres des onglets et le réseau. les paramètres d’heure de la demande se trouvent tous dans ce fichier. S'il n'y a pas de fichier app.json dans le répertoire du projet que vous avez créé, l'erreur suivante sera signalée.

Nous voyons qu'il y a un numéro -4058 dans le message d'erreur ci-dessus. Cela devrait être l'erreur la plus courante rencontrée lors de la première saisie de l'applet WeChat. Ce type d'erreur est généralement causé par des fichiers manquants. Il y a un chemin derrière, qui peut être corrigé. Vérifiez le chemin pour voir si le fichier existe. La raison de cette erreur est généralement que le répertoire sélectionné pour créer le projet est incorrect ou qu'une page inexistante est enregistrée dans app.json.
Bien sûr, il existe une autre situation où la page enregistrée dans les pages du fichier app.json n'est pas créée, ou vous supprimez une page mais n'annulez pas l'enregistrement, ce qui provoquera également une erreur -4058.

Erreur d'enregistrement de page

Cette erreur peut être facile à comprendre, erreur d'enregistrement de page. La page est rendue via l'objet Page. Le fichier js correspondant à chaque page doit créer une page. Le plus simple est d'écrire Page({}) sous le fichier js. Le cycle de vie du rendu de la page est géré dans la page. Le traitement des données et les événements sont tous terminés ici. La raison de cette erreur est généralement que la page vient d'être créée et que le fichier js n'a pas été traité ou a été oublié. Par conséquent, vous devez d'abord prendre l'habitude de créer une page dans le fichier js lors de la création d'une page.

Erreur de routage de page

Signifie littéralement erreur de routage de page. Il existe deux méthodes de routage dans WeChat. La première consiste à utiliser le code suivant dans le fichier wxml :

fonction de traitement des événements du fichier js :
bindtap:function(event){
wx.navigateTo({
url : "search/search"
})
>
Si vous écrivez comme ceci, félicitations, vous verrez l'erreur affichée ci-dessus. Ceci est dû à des appels répétés à la route Processing. supprimer un itinéraire, supprimer

Rechercher

Ceci n'est pas non plus autorisé, c'est-à-dire

Ne pas avoir de gestionnaire * dans la page actuelle.

signifie probablement que la page actuelle n'a pas ce traitement, on peut donc déterminer si elle a été définie, et cela indique également l'emplacement possible de l'erreur : pages/message/message En fait, ceci. Ce type de problème se produit généralement parce que nous avons défini quelque chose dans wxml. Cette erreur se produira si l'événement est traité, mais si la méthode de traitement d'événement n'est pas implémentée dans le fichier js. Ensuite, nous suivons les invites et ajoutons le traitement des événements au fichier js, comme indiqué ci-dessous. Après l'avoir ajouté, ce message d'erreur n'apparaîtra plus.

  bindtap:function(event){
    wx.navigateTo({
      url: "search/search"
    })
  },

Il existe de nombreuses raisons pour lesquelles tabBar ne s'affiche pas. Pour trouver cette erreur, accédez directement au fichier app.json. La plus courante est également. le plus simple pour ceux qui apprennent juste l'applet WeChat. Les erreurs commises ne sont rien de plus que les suivantes

"pages". ":[ "pages/message/message", "pages/contact /contact", "pages/dynamic/dynamic", "pages/dynamic/music/music", "pages/index/index", "pages/logs/ logs"

La barre de tabulation ne s'affiche pas en raison d'une écriture incorrecte. Écrivez la lettre majuscule B dedans en minuscule, ce qui empêche l'affichage de la barre de tabulation.

La page spécifiée par le pagePath de la liste tabBar n'est pas écrite en premier sur la page d'enregistrement. La logique de l'applet WeChat est que la première page de "pages" est la page d'accueil, qui est la première page affichée après le démarrage du programme. Si la page spécifiée par le chemin page de la liste tabBar n'est pas la première page de pages, bien sûr, ce sera le cas. Il n'y a plus de barre d'onglets TV.
Le nombre de tabBar est inférieur à deux éléments ou supérieur à cinq éléments. Le responsable de WeChat stipule clairement que le tabBar doit avoir au moins deux éléments et un maximum de cinq éléments. La tabBar ne sera pas affichée si elle est supérieure ou inférieure à.

Problème d'affichage du titre de NavigationBar

Vous devriez trouver le problème grâce à ce diagramme dynamique. Lorsque vous cliquez sur la musique pour accéder à l'interface musicale, le titre affiche d'abord WeChatForQQ puis affiche la musique. définitivement inacceptable. , la raison est que le titre de l'interface musicale est défini dans la méthode de cycle de vie de la page dans le fichier js.

 Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){    // 页面渲染完成
    //NavigationBarTitle如果此处和json文件都设置，最后展示此处的标题栏wx.setNavigationBarTitle({
  title: '音乐'})
  },
  onShow:function(){    // 页面显示
  },
  onHide:function(){    // 页面隐藏
  },
  onUnload:function(){    // 页面关闭
  }
})

通过注释你应该明白了，设置标题写在了onReady方法中，也就是页面已经渲染完成了，在onReady之前显示的title就是json文件（覆盖关系，如果在子页面json文件设置title会覆盖app.json全局设置）中的title。可能你会说将wx.setNavigationBarTitle写在onLoad函数中，不过如果这样设置是不对的，因为onLoad执行过后才渲染页面，在渲染页面时title会从json文件中读取，导致onLoad设置的title会只在页面渲染之前展示，之后就显示json文件的tile，所以现在你应该明白ttle设置最优的地方就是给子文件写一个json文件，在文件中写入，如果想改变颜色直接在文件中添加就可以，该文件所写的属性值会覆盖app.json中设置的值。

{
"navigationBarTitleText": "音乐"
}

wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

本地资源无法通过 css 获取

background-image：可以使用网络图片，或者 base64，或者使用标签

页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中

 <navigator url="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">
          <view class="item" >
             <view class="item-left">
                  <image src="{{item.url}}" class="image"/>
             </view>
             <view class="item-middle">
                  <view>
                       <text class="title">{{item.title}}</text>
                  </view>
                  <view>
                      <text class="message">{{item.message}}</text>
                  </view>
            </view>
            <view class="item_right">
                <view><text class="time">{{item.time}}</text></view>
                <view class="mark" wx:if="{{item.count>0}}"><text class="text">{{item.count}}</text></view>
            </view>
         </view>
         <view  class="line"></view>
       </navigator>

而数据接收是在js文件的page里接收的，page生命周期有一个onLoad函数，它就是做一些初始化数据的工作，onLoad函数有一个参数options，我们就可以通过key将数据获取，如下

Page({
  data:{    // text:"这是一个页面"
    isHiddenToast:true
  }
  onLoad:function(options){    // 页面初始化 options为页面跳转所带来的参数
    console.log(options.title)     console.log(options.message)
  },
  onReady:function(){    // 页面渲染完成
  },
  onShow:function(){    // 页面显示
  },
  onHide:function(){    // 页面隐藏
  },
  onUnload:function(){    // 页面关闭
  },
  bindtap:function(event){
wx.navigateTo({
  url: "/pages/message/search/search"})
  },
})

这样就实现了页面间数据传递功能。
更多微信小程序开发常见问题分析相关文章请关注PHP中文网！