Développement de mini-programmes WeChat (4) Guide pratique du développement de mini-programmes

Trouvez le dossier de démonstration créé et importez le projet dans votre éditeur L'éditeur Sublime Text est utilisé ici.

À ce stade, vous devez modifier la structure en fonction des exigences de votre propre projet. le répertoire racine est le rendu de la page d'accueil Plusieurs pages tabBar, ainsi que certains fichiers de configuration de l'application, comme le tabBar du projet de boîte de carte de visite sont 3 menus de commutation

Nous trouvons d'abord le fichier app.json, l'ouvrons, configurons ces menus et configurons la tabBar. Vous pouvez directement modifier le fichier de configuration selon votre propre conception.

App.json a plusieurs éléments de configuration :

• Pages : il s'agit d'un fichier écrit en js, le le suffixe .js n'a pas besoin d'être utilisé ici. Configurez le chemin correct et vous pouvez l'appeler normalement (s'il ne peut pas être appelé, une erreur de page sera signalée directement après le redémarrage de l'outil de développement WeChat). Fenêtre : configurez certains styles en haut, et la documentation est plus détaillée. tabBar : Plusieurs configurations en bas sont connues par leurs noms. networkTimeout : je n'ai pas encore trouvé d'utilité. Il est recommandé de lire la documentation. Effectuer des ajouts et des modifications en fonction des besoins réels du projet. iconPath et selectedIconPath : l'image du bouton du menu inférieur est mise en surbrillance au clic. * texte : vous pouvez le supprimer. Si vous supprimez tout, vous constaterez que la hauteur de la barre de tabulation inférieure sera considérablement réduite.

Une fois le fichier Json configuré, créez le fichier en fonction du projet. Démo : les fausses données sont stockées. Les outils de développement de ce numéro prennent en charge require. Les fausses données sont sous la forme de fichiers .js. La structure des données à l'intérieur est cohérente avec json.

Ensuite, récupérez les données requises et entrez Oui, c'est très pratique à utiliser ; Images : chemin de l'image ; Page : pages autres que tabar ; Service : couche de prestation de services (utilisée lors du débogage conjoint de données réelles avec l'arrière-plan) ; après avoir vu ceci. Chaque page est associée à trois suffixes différents. La séparation des pages, CSS et js ne peut actuellement être effectuée que de cette manière. Il s'agit d'une norme pour les comptes d'application WeChat.

Le fichier Wxss importe le fichier de style que vous avez écrit, ou vous pouvez y écrire des styles directement.

Les fichiers Js doivent tous être configurés en pages pour prendre effet.

Chapitre suivant : Développement de la page d'accueil du mini programme WeChat.

Chapitre 4 Développement de la page d'accueil du mini programme WeChat

Après diverses préparations et configurations, nous sommes arrivés au développement de la page d'accueil. Tout d'abord, vous devez implémenter les rendus de la page d'accueil comme suit :

Modèle Il existe de nombreuses cartes de visite et vous devez utiliser un modèle. Les composants de base fournis par WeChat ici sont grossièrement la saisie (champ de recherche), la feuille d'action (à droite se trouve une liste déroulante en bas). -down menu, qui nécessite un menu déroulant), Scroll-view (ABC sur le saut à droite), (il y a encore quelques problèmes avec cette implémentation, qui sont en cours de résolution).

View est un élément de bloc, un style pour l'ensemble du champ de recherche.

• Porte-carte de visite : étant donné que ce projet se concentre sur la fonction de carte de visite, il est utilisé dans de nombreux endroits, la carte de visite doit donc être séparée en un modèle.

  Modèle : définissez un modèle. Le nom du modèle est en fait une portée. Bloc : Contrôle de boucle, il existe de nombreuses cartes de visite, elles doivent être bouclées, à l'instar des boucles de nombreux frameworks front-end qui exploitent des données. Prend en charge les données d'attributs personnalisés, qui sont utilisées pour déterminer les cartes de visite en ligne et hors ligne. Certaines introductions de données dans View prennent en charge les opérateurs ternaires.

Il est très pratique d'introduire le modèle, c'est la même chose que le nom, et les données sont remplies avec les données transmises par nameData.

Tout est lié aux données comme point central.

L'opération spécifique pour obtenir les données est basée sur votre structure de données :

La structure des données et json data ici La structure est la même,

si elle doit être transmise à la page, c'est

this.<a href="http://www.php.cn/code/8209.html" target="_blank">set</a>Data({nameData:card_list_name.data.cards,timeData:card_list_time.data.cards});

car la page traverse nameData, timeData

Vous pouvez consulter la structure des données imprimées, l'analyser et la transférer en fonction de votre structure.

Vous pouvez également jeter un œil à certaines opérations sur les données ici. (Cela doit être utilisé selon le format de données json défini)

Le style de la carte de visite doit être utilisé dans de nombreuses pages et est placé en commun. css. Ce common.css Toutes les pages doivent utiliser certains paramètres d'initialisation. Il ne peut être mappé à l'application globale qu'après que soit référencé dans app.wxss.

Zone de recherche : où bindChange est le événement de changement de zone de saisie. Le bindchange fourni par WeChat présente encore des problèmes mineurs en termes de support. Actuellement, cet événement ne peut être déclenché qu'en perdant le focus. Il sera amélioré à l'avenir et la fonction sera implémentée en premier.

Écrire les événements dans index.js

bindInputChange:function(e){ //发生搜索事情var self = this; //this绑定，这个this指向微信的提供window var Text = e.detail.value.toUpperCase(); //取到输入的内容if(Text==""){ //如果输入为空 一些东西需要显示 否则不显示show_letter = "block"; }else{show_letter = "none";}this.setData({show_letter:show_letter, showSheet:true});var res = nameData; 获取到传递的数据if(data_type=="name"){}else if(data_type=="time"){res = timeData; };for(var k in res){ //for-in循环取到data里面的cardsvar data = res[k].cards; for(var i = 0;iIf(data[i].userName!=null && data[i].userName.indexOf(Text)!=-1){ data[i]["display"] = "block"; //存在就是赋值显示}else{data[i]["display"] = "none"; // 不存在赋值不显示}}}}

Barre de menu : faire Go dans la barre de menu et utilisez la feuille d'action du composant du menu déroulant fournie par WeChat. Les conditions pour qu'elle soit déclenchée sont ici.

Tout commence par des événements de liaison :

还是得先布好局才能被调动

![](http://upload-images.jianshu.io/upload_images/3113151-700fe4381ecb70c1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Js 配置：

![](http://upload-images.jianshu.io/upload_images/3113151-a29c120dbfb3e6ff.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Data 初始化数据：

![](http://upload-images.jianshu.io/upload_images/3113151-7ac34cbc72e90e98.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这里得取非，直接设置 false 调不出来: 调用事件。

![](http://upload-images.jianshu.io/upload_images/3113151-bfdd0f2e6ce40a96.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

调出来还得去掉它啊：如下相同即可

![](http://upload-images.jianshu.io/upload_images/3113151-e2536f3cad3ab6d0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

取消直接上事件即可。（分为菜单栏外部与底部）

![](http://upload-images.jianshu.io/upload_images/3113151-07ae959331529a76.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![](http://upload-images.jianshu.io/upload_images/3113151-5ea6156d3a6cf559.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

//好了，就是这么简单。实现效果简单，体验效果确实非常不错。

![](http://upload-images.jianshu.io/upload_images/3113151-31724704aa72189e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

还需要个 loading 效果（暂时没做动画，后期再考虑。）Loading 布局

![](http://upload-images.jianshu.io/upload_images/3113151-6b9e098615e2a5ce.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

首页的最外层 view

![](http://upload-images.jianshu.io/upload_images/3113151-ca2127936d0fa74b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

根据微信的生命周期

"Onload:function(e){this.setData({toastDisplay:”block”,htmlWrapDisplay:”none”})}, onShow:function(e){this.setData({toastDisplay:”none”,htmlWrapDisplay:”block”})}

La barre de chargement est terminée.

Scannez pour appeler directement la fonction caméra, à partir de là vous pouvez voir la caméra fournie par WeChat api C'est très rapide à utiliser, suivez simplement Configurez-le selon vos besoins.

Après avoir cliqué pour numériser, vous pouvez voir l'effet suivant dans les outils de développement.

Pour expliquer ici, la longueur du dom est limitée, la structure de la page est trop longue, et elle ne peut pas être rendue pour le moment, l'entreprise. le tri a été supprimé.

Saut ABC à gauche (encore en cours d'amélioration). Il y a aussi une fonction de swiping vers la gauche pour supprimer une carte de visite. Dommage que WeChat ne propose pas cette fonction, qui est très pratique sur le terminal mobile, je devrai passer du temps à l'écrire moi-même plus tard (pour. être amélioré ultérieurement).

D'accord, c'est tout pour la mise à jour d'aujourd'hui.

[Recommandations associées]

1. Téléchargez le code source complet du mini-programme WeChat

2. Mini-programme WeChat. démo : carte Voitures bloquées

3. Opération simple de balayage vers la gauche et disposition du flux en cascade

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!