Combien de personnes sont à base zéro, veulent apprendre un petit programme pour le développer?

Aujourd'hui, connaissant le programme (Micro Signal zxcx0101) pour partager une histoire inspirante: un sciences de l'atmosphère, le développement front-end de soeur auto lu, je sais presque comme faire ses courses parce qu'il a fait une applet « savoir de faux presque ».

J'espère qu'elle l'expérience de développement, nous pouvons aider assouplies à prendre le premier développement de l'applet étape.

Si vous souhaitez l'auteur de communiquer, zxcx0101 attention, cliquez sur la barre de menu " De plus le groupe AC « Peut-être.

Auteur | Rebecca Han WEB front-end / ne volent pas météorologue / veulent les fées de code

Du petit programme de micro-canal pour commencer maintenant bêta fermée, j'ai finalement mis mon propre programme de démonstration peu de micro-canaux est terminée.

L'encre est vraiment fini, j'admire leur procrastination les filles (paresseux ont été abandonnées le traitement du cancer ( 'A `) Techno ) En bref, être pratiquement achevé (évidemment il y a beaucoup de composants ah, ah API Il suffit de faire Ok inutile _ ) et le blog ne écrire je suis sorti amis codewords (Techno DBE) Techno: ·

Avant une longue période de temps, je sais presque fortement dépendante. Ainsi, cette imitation de démonstration de l'objet sélectionné est connu presque (mais a constaté que je l'ai écrit la moitié de cette décision, la fosse, ce qui est quelque chose).

Demo conception de l'interface et le design d'interaction sont connus presque de la version Android.

• outil: L'utilisation d'un outil de développement web micro-canal, cet outil a été complètement ouvert aux utilisateurs bêta non-invitation et continuent de mise à jour (code processus dans ma version mise à jour du code des deux, donc lors du développement de la version IDE est pas unique). Après le fait, mis en place une demi-heure d'outils de développement micro lettre, je l'ai changé retouchées en WebStorm, l'outil de micro-canal est devenu aperçu outil opérationnel. Mais j'ai entendu l'IDE aperçu de l'effet, il n'y a aucune garantie quant à la machine réelle Oh ~
• Conception et caractéristiques: Se référant à savoir la version presque Andrews est une version très simple, afin d'éviter que les droits d'auteur, les données fausses démo en utilisant ma propre réponse.

build du fichier

1. Les documents de base

app.json:

{ "Pages": ," fenêtre ": {" backgroundTextStyle ":" la lumière "" navigationBarBackgroundColor ":" # 0068C4 "" navigationBarTitleText ":" savoir presque "" navigationBarTextStyle ":" blanc "" enablePullDownRefresh ": true}," tabBar ": {" color ":" # 626567 "" selectedColor ":" # 2A8CE5 "" backgroundColor ":" #FBFBFB "" borderStyle ":" blanc "" liste ": }," networkTimeout ": {" demande ": 10000", downloadFile ": 10000}," debug « : true}

app.json fichier entier est l'applet de configuration globale, Les principaux champs sont utilisés pages , fenêtre , tabBar , networkTimeout.

• pages  champ: Toutes les pages applet doit inscrire dans ce domaine, la valeur par défaut du tableau de champ à la première page d'accueil applets (à l'exception des paramètres onglet), non enregistré dans les pages de la page apparemment pas en mesure de champ une compilation efficace (avant version de l'éditeur n'a pas cette limitation, mais aura une incidence sur l'entrée en vigueur des fichiers de configuration, la mise à jour sera signalée après la modification erreur non enregistrée).
• fenêtre  champ: La plupart d'entre eux sont mis en place au-dessus de navigationbar des petits programmes.
• tabBar  champ: Si vous avez besoin de fond de style maison avec barre d'onglets, il est défini dans le champ tabBar correspondant à chaque onglet, dans l'ordre correspondant à gauche à droite, y compris le chemin, le texte des onglets, icônes et onglet icône sélectionnée.
• networkTimeout: Définissez le délai d'attente du réseau.
• debug: activez le mode de débogage.

fichier app.wxss comme un style global, c'est-à-dire Ce document est disponible dans tous les styles de pages . Si WXSS autres fichiers de page sont définis dans les mêmes propriétés de style dans le fichier, le fichier est de style réécrits règles et règles de priorité CSS généralement connectés. interfaces de connexion app.js pour invoquer la fonction de rappel, fonction périodique, le code de logique stockés localement et analogues.

2. pagefile

page de document se compose de quatre parties.

Par exemple, nous avons une maison appelée l'index, vous devez créer les trois mêmes nom de fichier essentiel dans le dossier pages:

• index.wxml
• index.wxss
• index.js

D'autres fichiers index.json sont facultatifs App.json la même fonction, pour la page de profil, mais la fonction de définition limitée.

3. UI

Comme d'habitude à développer, à partir bien sûr, est l'interface utilisateur de code.

En plus de l'étiquette conformément aux nouvelles règles et de style micro-canal, différent de l'habituel autre code de l'interface utilisateur est pas grand-chose.

Et il est souligné que, le programme de mise en page flexible dans le canal micro petite hin pratique ~~~~

Cependant, comme les deux filles et le programmeur, ne pas me piquer ne peut, donc Voici quelques-unes de mes fosses de rencontre , Dont certains peuvent être incorrectes (ours avec moi c \ (// //) \), certains d'entre eux auraient pu être corrigées dans la mise à jour IDE:

style CSS ne prend pas en charge une partie de l'IDE micro-canal, par exemple, font-weight, lettre espacement (espacement entre les mots et le réglage du style) et similaires; ne supporte pas la structure imbriquée, imbriquée de deux couches, la couche interne du contenu affiché en continu deux fois (IDE corrigé dans mises à jour ultérieures), si

vue / > Et au même niveau, puis l'utilisation réelle, il sera couvert. Afin d'éviter le contenu empilé, la phase parallèle doit être utilisé. Donc, vous ne dites pas, comme certains endroits, vous pouvez complètement mettre  comme

Pour utiliser!

marge adjacente verticale lorsque le micro-canal est affiché dans le double applet, à savoir, deux éléments sont marge de propagation, la marge ne suit pas les règles avant de l'élément de pliage;

Tag propriété cachée est invalide (v0.10.101400 corrigée);

Dans certains cas, l'élément de niveau plat les problèmes prioritaires de l'étiquette. Par exemple, l'étiquette A et la classe B, les unes sur les autres lorsque la position B par les éléments A certains ajustements analysé l'effet de micro-canal est une partie IDE (contenu du navigateur normal et la couleur d'arrière-plan A B couvrira les chevauchements d'éléments avec Un couvercle doit être analysé B);

Si la liste des modèles + rendu méthode de rendre les données, en utilisant la liste rendue dans le modèle {{item}} est invalide et ne peut pas être reconnu correctement. Par conséquent, lors du rendu de la liste, devrait multiplexés écriture partielle dans la liste des blocs de rendu (rendu partie de données appartient, il sera question plus loin).

Plus tard, son IDE micro-canal itératifs ont des problèmes dans la liste ci-dessus des amendements, de sorte que cette liste pourrait être dépassée. Il peut également se baser sur la situation réelle de s'y mettre.

Ensuite, je l'ai écrit la démo pour certaines pièces utilisées sera expliqué.

Commencez le développement combat

1. rendu des données sous forme de tableau

Semblable à la « trouver à la page » « Home » et ces données sous forme de tableau standard indiquent le chemin, lettre Micro fournit une bonne solution: un rendu de liste.

 {{Item.good_num}} {{}} item.comment_num d'accord avec préoccupation commentaires

Peut être visuellement vu, pour la boucle de rendu d'un ensemble de données structure répétitive:

• for = « {{}} » un ensemble de données de contenu est souhaité cycle de réseau de plus à l'extérieur des structures
• pour-item élément de réseau spécifié du nom de variable courante
• pour-indice de l'indice du tableau spécifié nom de variable de l'élément en cours

Également utilisé pour le rendu, ainsi que sur mesure TabBar haut de la page et le haut de la page de notification de découverte et ainsi de suite.

2. obtenir haut Tabbar

lettre Micro ne fournit que le fond de la barre d'onglets, donc au-dessus de leur propre pour écrire moi-même ~

Atteindre la barre supérieure de l'onglet que les listes pour le rendu et l'ajustement JS.

Exemples WXML Code:

Code JS:

//discovery.jsPage ({données: {navTab: , currentNavtab: "0"}, onLoad: fonction {console.log ( 'onLoad')} , switchTab: function (e) {this.setData ({currentNavtab: e.currentTarget.dataset.idx});}});

Puisque l'accès micro-canal ne sera pas supporté objets DOM, et ne sera pas supporté objet fenêtre dom, la barre d'onglets représente une vue logique de la mise en oeuvre dépend de la couche micro-canal est fourni, et le mécanisme de liaison entre l'affichage des données.

Bind cliquez sur l'événement, en changeant la valeur d'un attribut de contrôle des éléments Data- de classe de changement (pour changer le style, etc.).

3. Carousel Figure

Ce qui suit est la mise en uvre du code WXML:

Code JS:

imgUrls: , indicatorDots: faux, autoPlay: true, intervalle: 5000, durée: 1000, alimentation :, feed_length: 0

La figure atteindre rotation Chipeur composant est utilisé pour fournir des micro-canaux, l'ensemble permet la sélection de diverses attribut intime, y compris la lecture automatique commun, la durée de l'intervalle de temps, etc.

Chipeur-objet est inclus dans l'ensemble du carrousel d'image pour la commodité de modifier les données d'image, en utilisant les mêmes données pour le rendu de manière contraignante.

4. Le rafraîchissement déroulant, le porte-LAC et les demandes de données

Actualiser et continue de charger l'action, en se fondant sur les étiquettes de défilement vue, et en soutenant les événements supérieurs et inférieurs.

onglet Propriétés fournit bindscrolltoupper et bindscrolltolower à se lier à défilement vers le haut et le bas de l'événement de déclenchement, tandis-seuil supérieur et le seuil inférieur peut ajuster la distance depuis la limite de la gâchette.

En plus de ce qui précède, applet API fournit également le défilement horizontal, faites défiler l'événement déclencheur, régler la position de la barre de défilement et d'autres interfaces .

 {{Item.good_num}} {{}} item.comment_num d'accord avec préoccupation commentaires

Lorsque vous faites défiler vers le haut ou vers le bas, les données déclenché par un événement de chargement, ce qui devrait être appelé réseau micro-canal fournit des requêtes API pour obtenir des données.

Mais plus que la fosse J'ai choisi à l'imitation d'écriture savent presque n'a pas remarqué quand le savoir démo ne fournit pas presque une API ouverte, et l'API micro-canal ne supporte pas les fichiers JSON directement aux demandes locales.

En désespoir de cause, un morceau de données dans le fichier JS contrefait sélectionné, avec module.exports jetés aux données fausses demander:

supérieure: la fonction {wx.showNavigationBarLoading This.Refresh; console.log ( "supérieur"); setTimeout (fonction {wx.hideNavigationBarLoading; wx.stopPullDownRefresh;}, 2000);}, inférieure: function (e) {wx.showNavigationBarLoading; var = que cela; setTimeout (fonction {wx.hideNavigationBarLoading; that.nextLoad;}, 1000), console.log ( "inférieur")}, // défilement: function (e) {// console.log ( "scroll" ) //} // demande des données de réseau pour atteindre rafraîchissement refresh0: fonction {var index_api = ''; util.getData (index_api) .alors (fonction (données) {//this.setData ({// //}) ; console.log (données);});}, // effet l'utilisation de faux de rafraîchissement des données locales atteint rafraîchissement: fonction {var = flux util.getDiscovery; console.log ( "loaddata"); var = feed_data feed.data; ce .setData ({alimentation: feed_data, feed_length: feed_data.length});}, // données de faux utilisés pour obtenir des effets locaux continuer à charger nextLoad: fonction {var next = util.discoveryNext; console.log ( "continueload"); var next_data = next.data; this.setData ({feed: this.data.feed.concat (next_data), feed_lengt h: this.data.feed_length + next_data.length});}

Parce que les données sont faux, cette démo ne fait pas réel saut avec le ginseng, la requête et d'autres fonctions.

Chargement des données tout en utilisant une animation de chargement micro-canal disponible; wx.showNavigationBarLoading.

5. Autres

• Afin d'atteindre la page cliquez pour sauter, utiliser la wx.navigateTo pour la page et cliquez sur l'événement de saut obligatoire;
• partie d'assemblage modulaire commun;
• entrée de l'utilisation, de composants d'image et analogues.

6. Suivi

En fait, il y a beaucoup de composants et API n'ont pas utilisé, il y aura un suivi de cette démo peut mettre à jour Yo, selon la gravité de la maladie du cancer de fille paresseuse.

peu d'expérience

En fait, comme un petit bout avant pour des raisons de travail, en utilisant MVVM est en réalité très faible.

Cependant, je l'ai écrit ce petit programme après la démo micro-canal, pensant plus d'aspects de ce redressés. Bien sûr, en regardant en arrière après l'arrivée, ont encore un grand nombre de lacunes, encore une fois de toute évidence de nombreux endroits dans une autre formulation de.

Après tout, cela est ma première tentative d'écrire une petite démo réchauffant avec des produits frais quelque chose, mais aussi la première tentative d'écrire des tutoriels ...... ou être enregistré? tout ~~

Quoi qu'il en soit ~ voulez écrire du code en plus de l'extérieur, mais aussi sur le texte du code de la route est également plus d'une promenade, après tout, je suis une petite fée qui font le ah code \ ( )

projet GitHub Adresse: GitHub - RebeccaHanjw / weapp-WeChat-zhihu

Source: https: //zhuanlan.zhihu.com/p/23394858

Cet article programme réimprimé autorisé par le souci signal de micro zxcx0101, la réponse « fournisseur d'électricité » pour obtenir le tutoriel de développement des affaires de l'électricité article classe applet.

préoccupations rapides connues des procédures

Programme de sensibilisation (Micro Signal zxcx0101) enfants Fan aiment l'accent du public sur un petit nombre de programmes écologiques. Nous fournissons des informations applet frais (nouvelles, des opinions, des lignes directrices, activités) et des services, le plus complet, où vous pouvez tout apprendre sur l'applet.