Maison >Applet WeChat >Développement WeChat >Résumé d'une semaine du développement du mini-programme WeChat
Ce qui suit est un résumé de la semaine de développement de l'applet WeChat. J'espère qu'il sera utile aux étudiants sur le site Web PHP chinois.
Éditeur
J'utilise directement vscode (il en va de même pour les autres éditeurs, j'utilise toujours les outils de développement WeChat pour la prévisualisation), la coloration syntaxique sera Définissez wxml sur html, wxss sur css
"files.associations": { "*.wxss": "css", "*.wxml": "html" }
Vous pouvez également installer des plug-ins liés aux mini-programmes
et commencer à écrire du code
Tout d'abord, vous devez lire le document de l'applet WeChat (framework, composants et API) dans son intégralité pour faciliter la recherche ultérieure.
le composant de vue correspond à p
le texte correspond à span
le sélecteur wxss ne prend en charge que l'élément , #id, .className, ::after, ::before
projet Créer de nouveaux composants dans le répertoire, suivez une structure de répertoires similaire aux pages , et placez les modèles, styles et fichiers js de chaque composant dans le même dossier
Le modèle peut être directement
si vous en avez besoin. pour passer une valeur, @import importe
js en utilisant require pour l'introduire dans la page, puis utilise la mergePage suivante pour la charger dans la page objet .
mergePage
Chargement des composants
const ErrorMsg = require('../../../components/error-msg/error-msg'); Page(util.mergePage({ // 页面 Page 方法... onLoad() { // 可以直接在页面方法中调用 showErrorMsg 方法 } }, ErrorMsg/* 更多组件也可以*/));
Utilisez la méthode mergePage pour enregistrer toutes les méthodes de composants et les événements de page dans l'objet page
Comment écrire des composants
var errorTimer; module.exports = { showErrorMsg(msg, cb) { clearTimeout(errorTimer); this.setData({ errorMsg: msg }); errorTimer = setTimeout( () => { this.setData({ errorMsg: false }); cb && cb(); }, 2000); } // 可以在这里注册 `onLoad`,`onShow`等页面事件 }
Vous pouvez utiliser this.setData dans le composant pour mettre à jour les données de la page, ou vous inscrire onLoad, onShow et autres événements de page, mergePage L'événement avec le dernier paramètre sera appelé en premier.
Le code source de mergePage
/** * 合并 Page 对象所有的方法及事件 * 子对象不能使用 data 属性,请在 onLoad 中使用 setData 方法设置 */ function mergePage(dest, ...src) { let args = arguments; let eventsStack = { onLoad: [], onReady: [], onShow: [], onHide: [], onUnload: [], onPullDownRefresh: [], onReachBottom: [], }; // 保存所有的事件,最后一个参数的事件会最先调用。 for(let name in eventsStack) { for(let i = args.length - 1; i >= 0; i--) { args[i][name] && eventsStack[name].push(args[i][name]) } } Object.assign(...args); for(let name in eventsStack) { dest[name] = function() { for(let i = 0; i < eventsStack[name].length; i++) { eventsStack[name][i].apply(this, arguments); } } } return dest; }
wx.request({ complete: ({data= {}}) => { // 1. 因为 wx.request 返回的接口数据是在 data 属性里,这里我们只要 data 属性就行了,所以直接参数解析构 // 2. 如果 failed,无 data 时,data 将为默认值 {} if(data.code !== 0) { // do something if request failed return; } // 请求正常处理代码 // 3. 因为用的箭头函数,回调里可以正常使用 this, 访问 Page 对象的方法 // 比如 this.setData(...) } })
Certains paramètres de fonction peuvent également utiliser directement les paramètres par défaut .
Lorsque vous transmettez des paramètres de données au modèle, vous pouvez utiliser l'abréviation d'attribut d'objet, telle que
<template is="..." data="{{...obj, id: otherIdVariable, name}}"></template>
De cette façon, la variable peut être utilisée dans le modèle pour être toutes les clés de l'objet obj, ainsi que l'identifiant et nom
Vous pouvez utiliser directement et facilement la chaîne de modèle es 6 dans l'applet
let url = `${app.globalData.API_PREFIX}/cart/add`;
L'icône wx.showToast ne prend en charge que "succès " et " chargement ", et le message d'erreur provient de la définition
Si les variables du modèle n'ont aucune valeur, veuillez vérifier si les données sont transmises.
L'outil de développement (v0.10.102800) peut utiliser la méthode suivante pour ajouter une interface permettant de demander un nom de domaine, mais malheureusement il ne peut pas être utilisé dans WeChat.
// 放到 app.js 前面 wxConfig.projectConfig.Network.RequestDomain.push('https://weapp.juanpi.com');
Le JS de toutes les pages sera exécuté immédiatement au démarrage, plutôt qu'à l'ouverture de la page, donc certains sont écrit globalement Le code doit être placé après onLoad autant que possible. Voici le code chargé vu depuis la source Debug :
define("pages/index/index.js", function(require, module, exports, window,document,frames,self,location,navigator,localStorage,history,Caches,screen,alert,confirm,prompt,XMLHttpRequest,WebSocket ){ 'use strict'; var app = getApp(); var util = require('../../../utils/util'); var ErrorMsg = require('../../../components/error-msg/error-msg'); var AddressPicker = require('../../../components/address-picker/address-picker'); Page(util.mergePage({ // 页面代码省略 }, AddressPicker, ErrorMsg)); //# sourceMappingURL=data:application/json;... });require("pages/index/index.js").
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!