[Mini Programme] Partage d'expérience du premier mini programme développé

API Douban

J'ai lu la documentation du mini programme ces derniers jours, puis j'ai passé du temps à écrire un mini programme avec peu de contenu. Au départ, je voulais écrire l'interface API moi-même, mais le nom de domaine demandé par le mini programme nécessite à la fois un enregistrement et HTTPS, j'ai donc abandonné car c'était trop compliqué. Plus tard, j'ai choisi l'API Douban et j'ai découvert que le mini-programme bloquait l'API de Douban. Heureusement, il y avait un maître sur Internet qui avait mis en place un serveur proxy.

Avec l'API de Douban, je prévois de créer un petit livre similaire pour enregistrer certains films que j'ai regardés, puis d'extraire les notes et les affiches associées de Douban. Malheureusement, la résolution maximale des affiches fournies par l'API Douban est également très faible, ce qui donne une très mauvaise apparence au mini-programme, mais il n'y a aucun moyen, après tout, que ce soit l'affaire de quelqu'un d'autre...

Modifier les attributs de l'objet neutron de données

Les données obtenues après avoir utilisé wx.request doivent être écrites dans le Page de data. Différent de Vue.js, l'applet doit appeler this.setData. en même temps, s'il est modifié lors de l'écriture, Pour les attributs de l'objet, vous devez définir une variable pour connecter la chaîne composée de l'objet et de l'attribut, puis la mettre entre crochets []. Par exemple :

var temp='person.name';
......

this.setData({
    [temp]:'Mike'
})

Note par étoiles

Lorsqu'il s'agit de note par étoiles dans l'interface, une méthode relativement stupide est utilisée ici. Il s'agit de préparer des images des trois états possibles des étoiles, puis de calculer le tableau de scores spécifique en fonction des scores, et enfin de parcourir le tableau pour correspondre à l'état que chaque étoile doit afficher.

<block wx:for="{{dbMarkArr||myStarArr}}" wx-for-item="item" >
    <image wx:if="{{item===0}}" src=&#39;../../static/image/empty.png&#39;></image>
    <image wx:if="{{item===1}}" src=&#39;../../static/image/half.png&#39;></image>
    <image wx:if="{{item===2}}" src=&#39;../../static/image/full.png&#39;></image>
</block>

Un petit écueil du template

Le template du mini programmetemplate est utilisé ici. Il convient de noter qu'il y a ici un piège. Le nom de fichier du modèle doit être cohérent avec le name dans le modèle.

Problèmes causés par le retard du réseau

Lors du rendu de la page, il est possible que les données Douban ne soient pas renvoyées à temps en raison de problèmes de réseau, ce qui empêche en outre le modèle de page de définir la valeur des données. la valeur requise. J'ai longtemps lutté ici et j'ai finalement choisi une approche plutôt inélégante, qui consistait à retarder l'exécution de la fonction qui définit les données pertinentes de 2 secondes. Si les données Douban peuvent être renvoyées dans les 2 secondes, alors le problème semble résolu. Si aucune donnée valide n'est obtenue dans les 2 secondes, le problème n'est pas résolu. De plus, 2 secondes ont certainement un impact considérable sur l'expérience utilisateur, mais je ne sais pas comment le résoudre ici...data

Calendrier inutilisé

Au début du mini programme , j'avais initialement prévu d'implémenter la fonction consistant à cliquer sur le calendrier pour accéder à la page du film correspondante, mais plus tard, j'ai senti que ce n'était pas bon et je ne l'ai pas fait, mais le calendrier l'a à nouveau implémenté. L'idée est relativement claire. Obtenez d'abord l'heure actuelle, calculez les jours de la semaine auxquels correspondent le premier et le dernier jour du mois en cours, puis calculez combien de jours avant le premier jour et après le dernier jour doivent être affichés. Connectez ensuite le mois dernier, ce mois-ci et le mois prochain dans un tableau, puis divisez les semaines selon le tableau :

for (var i = 0; i < calendar.length; i++) {
      if (i % 7 == 0) {
        weeks[parseInt(i / 7)] = new Array(7);
      }
      weeks[parseInt(i / 7)][i % 7] = calendar[i];
    }

Puis effectuez le rendu :

<view class=&#39;calendarBody&#39;>
    <block wx:for="{{calendar.weeks}}" wx:for-item="weeks" >
      <view class=&#39;calendar-body-weeks&#39;>
        <block wx:for="{{weeks}}" wx:for-item="day">
          <view class="calendar-body-day {{calendar.month==day.month&&calendar.date==day.date? &#39;is-current&#39;:&#39; &#39;}} {{calendar.month!=day.month?&#39;nou-curMonth&#39;:&#39; &#39;}}" data-date=&#39;{{day.date}}&#39; bindtap=&#39;selectDate&#39;>{{day.date}}</view>
        </block>
      </view>
    </block>
</view>

Dans à la fin,

n'est qu'un petit programme d'essai, et il reste encore un long chemin à parcourir.

Articles associés :

La première applet PHP (apprentissage)

Étapes pour autoriser la gestion et le développement par des tiers de l'applet (petite programme Tutoriel du programme)

Vidéos associées :

Applet WeChat de la Geek Academy, des bases au didacticiel vidéo pratique

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!