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...
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' })
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='../../static/image/empty.png'></image> <image wx:if="{{item===1}}" src='../../static/image/half.png'></image> <image wx:if="{{item===2}}" src='../../static/image/full.png'></image> </block>
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.
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
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]; }
<view class='calendarBody'> <block wx:for="{{calendar.weeks}}" wx:for-item="weeks" > <view class='calendar-body-weeks'> <block wx:for="{{weeks}}" wx:for-item="day"> <view class="calendar-body-day {{calendar.month==day.month&&calendar.date==day.date? 'is-current':' '}} {{calendar.month!=day.month?'nou-curMonth':' '}}" data-date='{{day.date}}' bindtap='selectDate'>{{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!