Explication détaillée de l'applet WeChat de QQ à haute imitation

Cet article décrit principalement certains des problèmes que j'ai rencontrés lors de l'avancement du projet SmallAppForQQ. J'espère que la lecture de cet article vous sera utile.

SmallAppForQQ : Une applet WeChat pour accéder à QQ

Au début de l'article, présentons brièvement la structure du projet. Si vous n'avez pas installé les outils de développement, vous pouvez. allez sur

github com/xiehui999/SmallAppForQQ

Télécharger. Il existe quatre types de fichiers principaux dans la structure du projet du mini-programme WeChat, comme suit -

1) Fichier WXML : (Weixin Markup Language) est un ensemble de langages de balises descriptifs conçus par WeChat sur la base de ses prédécesseurs. . Créez une vue de l'applet.

2) Fichier WXSS : (WeiXin Style Sheets) est un ensemble de langages de style utilisés pour décrire le style des composants de vue dans wxml,

3) fichier js : traitement de la logique métier, et backend Effectuer une interaction avec les données, etc.

4) fichier json : mini fichier de paramètres du programme, tel que l'enregistrement de la page, le titre de la page, etc.

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.

app.json

Ce fichier, dans le répertoire racine, est le fichier d'entrée du programme.

Ce fichier est nécessaire. 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, etc.

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. Voici quelques problèmes les plus susceptibles de survenir -

Foire aux questions rpx (responsive pixel)

L'applet WeChat a récemment défini une unité de taille qui peut s'adapter aux écrans de différentes résolutions, qui stipule que la largeur de l'écran 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.

(rpx n'est pas une unité de taille nouvellement définie dans WeChat. Il a déjà été utilisé dans le développement mobile. WeChat a absorbé les points forts de nombreuses écoles et a défini un petit cadre de développement de programmes basé sur les prédécesseurs. Et comme Apple , Apple a utilisé Objective-C comme langage de développement pour les applications lors de l'ouverture de l'AppStore, mais OC n'a pas été inventé par Apple)

J'ai utilisé des unités de taille rpx pour ce projet et j'ai rencontré une chose très étrange pendant le processus . problème. 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 la figure ci-dessous

, vous pouvez voir que ce n'est pas dans la première. Il n'y a pas de ligne réelle comme la seconde, mais les autres montrent toutes que les attributs de la ligne de démarcation sont les mêmes, et les lignes de démarcation qui ne sont pas affichées sur différents les téléphones portables (différentes résolutions) sont également différents, et certaines résolutions sont différentes. Plusieurs lignes de démarcation ne sont pas affichées. Je ne sais pas si c'est un bug du simulateur ou un bug de rpx. Enfin, l’unité de taille de hauteur de la ligne de démarcation est px, ce qui résout ce problème. (Vous souhaiterez peut-être utiliser rpx pour la mise en page et px pour les styles décoratifs, ce qui n'a pas encore été vérifié dans la pratique.)

Erreur 40013

Lorsque l'applet WeChat est sortie pour la première fois, si vous entrez l'AppID et demande ces informations, cela signifie qu'il n'est pas cracké, mais maintenant la mise à jour officielle du logiciel peut choisir de se développer sans AppID, comme indiqué ci-dessous, nous pouvons résoudre cette erreur en choisissant sans AppID. Il est recommandé d'installer les outils de développement officiels. Vous pouvez trouver le lien de téléchargement ici.

(À l'heure actuelle, les développeurs individuels peuvent également postuler pour des mini-programmes, les appIds ne sont plus rares, pas de problème)

Erreur -4058 (fichier app.json manquant)

Programme WeChat Mini Lorsque le programme crée un projet, sélectionnez Aucun AppID. 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. chemin derrière lui, 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 prendre l'habitude de créer d'abord une page dans le fichier js lors de la création d'une page.

Erreur de routage de page

Cela signifie littéralement une erreur de routage de page. Il existe deux méthodes de routage dans WeChat : l'une consiste à utiliser des composants dans des fichiers wxml et l'autre consiste à appeler wx.navigateTo.

Le code suivant -

wxml :

Recherchez

js :

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

Si vous écrivez comme ça, félicitations ! , vous verrez l'erreur affichée ci-dessus, provoquée par des appels répétés à l'itinéraire. La solution consiste à supprimer un itinéraire, à supprimer le composant ou à supprimer wx.navigateTo. En plus des erreurs de routage possibles mentionnées ci-dessus, il existe également une situation similaire au code suivant

recherche

qui n'est pas non plus autorisé, ce qui signifie que le composant du navigateur ne peut pas être imbriqué à l'intérieur. Navigateur de composants.

Ne pas avoir de gestionnaire * dans la page actuelle.

Cela signifie probablement que la page actuelle n'a pas ce gestionnaire, vous pouvez donc déterminer s'il a été défini, et également signaler les éventuels emplacement où l'erreur se produit pages/message/message, En fait, ce type de problème se produit généralement lorsque nous définissons certains événements de traitement dans wxml, mais si la méthode de traitement des événements n'est pas implémentée dans le fichier js, cette erreur se produira. 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(e){
wx.navigateTo({
url:"search/search"})
},

Les paramètres de tabBar ne sont pas affichés

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 -

La page d'inscription écrit la page dans le champ pages de app.json, tel que

. "pages":["pages/message/message" ,"pages/contact/contact","pages/dynamique/dynamique","pages/dynamique/musique/musique","pages/index/index","pages/ logs/logs"]

1 , tabBar ne s'affiche pas en raison d'une écriture incorrecte. Écrivez la lettre majuscule B en minuscules, ce qui empêchera tabBar de s'afficher.

2. Le champ pagePath n'est pas écrit dans la liste tabBar, ou la page dans pagePath n'est pas enregistrée

3 La page spécifiée par le pagePath de la liste tabBar n'est pas écrite comme. le premier sur la page d'inscription. La logique de l'applet WeChat est que la première page dans "pages" est la première page, 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 dans les pages. , Bien sûr, il n'y aura pas de TV tabBar.

5. Le nombre de tabBars est inférieur à deux ou supérieur à cinq. Le responsable de WeChat stipule clairement que le nombre de tabBars doit être d'au moins deux et d'au plus cinq. 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.

Si vous ne comprenez pas le cycle de vie, vous pouvez cliquer pour voir

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

Vous devez comprendre à travers les commentaires que le titre du paramètre est écrit dans la méthode onReady, ce qui signifie que la page a été rendue. Le titre affiché avant onReady est le titre dans le fichier json (relation d'écrasement, si le titre est défini dans le fichier json de la sous-page, il remplacera le paramètre global app.json). Vous pouvez dire que wx.setNavigationBarTitle est écrit dans la fonction onLoad, mais ce paramètre est incorrect car la page est rendue après l'exécution de onLoad. Lors du rendu de la page, le titre sera lu à partir du fichier json, provoquant le titre défini par onLoad. être uniquement Il est affiché avant le rendu de la page, puis la vignette du fichier json est affichée. Alors maintenant, vous devez comprendre que le meilleur endroit pour définir le fichier est d'écrire un fichier json pour le sous-fichier et de l'écrire dans le fichier. . Si vous souhaitez changer la couleur, ajoutez-la directement au fichier. Oui, les valeurs de propriété écrites dans ce fichier remplaceront les valeurs définies dans app.json.

{
"navigationBarTitleText":"音乐"}

Le titre de la fenêtre dépend de trois endroits :

1. Paramètre du titre de l'application dans app.json

2. même nom de la page

3, le code js est défini via l'interface wx.setNavigationBarTitle

Si le titre est statique, il est défini via 2. Si la fenêtre elle-même est dynamique et que le titre dépend des paramètres transmis, tels que l'ID de l'échelle, il est préférable de définir le navigationBarTitleText dans 1 sur vide, puis de le déplacer dans js. Notez que les paramètres vides affecteront toutes les pages.

wx.navigateTo ne peut pas ouvrir la page

Une application ne peut ouvrir que 5 pages en même temps. Après l'ouverture de 5 pages, wx.navigateTo ne peut pas ouvrir une nouvelle page normalement. Veuillez éviter les interactions à plusieurs niveaux ou utiliser wx.redirectTo.

Pour être simple, il est recommandé d'utiliser wx.redirectTo, puis de développer un petit programme d'application monopage, une application monopage, tout comme le site Web monopage dans la période préhistorique des sites Web PC .

Concernant la limite d'ouverture des pages wx.navigateTo5, existe-t-il un outil ou une solution pour la résoudre ?

navigateTo est limité à cinq niveaux, ce qui stipule en fait que les éléments de la pile de pages ne peuvent pas dépasser cinq. Une fois que le nombre d’éléments dans la pile de pages atteint cinq, plus aucun élément ne peut être ajouté. Pour une description détaillée de la pile de pages du mini programme, veuillez lire cet article :

www.ifanr.com/minapp/744601

Cet article ne donne pas de solution. Le codeur donne ici une solution théorique :

1, utilisez redirectTo pour chaque saut, et utilisez-le uniquement en js. Lorsqu'il est utilisé dans wxml, il est également utilisé en liant d'abord l'événement et en l'utilisant dans la fonction event

.

2，自已实现一个页面栈，每次跳转之前，先推进这个自定义的页面栈。

3，不使用wx.navigateBack，从自定义页面栈中取出一个页面，redirectTo

这样就实现了无级跳转。小程序官方的机制，适用于简单的、层级不多的场景。使用如上自定义栈，好处还有减少内存占用，因为永远都是redirectTo。

本地资源无法通过 css 获取

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

页面间数据传递

微信小程序路由（页面跳转）是通过API wx.navigateTo或者wxml中组件实现的，不管哪种实现都会有一个重要的参数就是url，它指定了要跳转的页面，并且页面之间数据传递也是通过url来实现的，这个数据传递有点类似于我们使用的get网络请求，把参数都拼接在要跳转界面地址的后面并以“？”连接。然后将要传入的数据以键和值的形式追加在"?"后面，多个参数直接用"&"符合。如我们点击消息聊天记录，将列表上的数据传到下一个页面，可以这样写。

{{item.title}}
{{item.message}}
{{item.time}}
0}}">{{item.count}}

而数据接收是在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"})
},
})

这样就实现了页面间数据传递功能。

另外，听说支付宝也开始搞小程序了，连IDE都很像微信小程序开发工具：

文档页：

从“小程序”这个名字来看，因为“程序”是通用名词，而“小”本身没有独特性，所以任何公司申请“小程序”商标估计都难以获得商标管理局的通过，这也就意味着任何公司都可以做自己的“小程序”平台。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!