Les mini-programmes dépendent des principales plates-formes. Les mini-programmes tels que Alipay, WeChat, Toutiao et Baidu sont tous développés sur la plate-forme. La plate-forme fournit le support technique et l'environnement utilisateur correspondants. Pour les développeurs individuels, cela est très pratique. Il possède des attributs de trafic et est facile à diffuser.
Développement pratique
J'ai récemment travaillé sur mon propre petit programme, je vais donc le résumer dans cet article. Si vous avez déjà développé un petit programme, vous n’avez pas besoin de lire cet article.
Le développement d'un mini programme est assez pratique. Avec les documents officiels, Documentation du mini programme WeChat, Documentation du mini programme Alipay, vous pouvez l'exécuter localement si vous le souhaitez simplement pour l'afficher. , il vous suffit de le télécharger après le développement et d'attendre son examen. Avec juste quelques notions de base, vous pouvez développer votre propre petit programme et les étudiants ayant des idées peuvent passer à l'action.
Si vous rencontrez des problèmes lors du développement, vous pouvez également demander de l'aide dans la Mini Program Community, la WeChat Mini Program Community.
Pas pour la promotion officielle. Si vous souhaitez développer votre propre application, un mini programme est une solution que vous pouvez démarrer rapidement. Il est facile à développer, rapide à publier et possède sa propre fonction de diffusion. Je choisirai l'applet WeChat pour expliquer ci-dessous.
Développement de mini-programmes natifs WeChat
<!-- 项目目录结构 --> |—— component 组件目录 |—— pages page页面目录 | ......more dir | |—— index index页面 | | |—— index.js index.js- js逻辑文件 | | |—— index.json index.json- json配置文件 | | |—— index.wxml index.wxml- wxml页面结构 | | |—— index.wxss index.wxss- wxss页面样式 |—— app.js 全局js文件 |—— app.json 全局json配置文件 |—— app.wxss 全局样式文件 |—— project.config.json 项目配置 |—— sitemap.json 爬虫文件
Importez le projet dans l'outil de développement de mini-programmes et vous pouvez commencer le développement. Pour ajouter une page, ajoutez un nouveau répertoire de fichiers directement au répertoire des pages. Pour plus de détails, veuillez vous référer au Document du programme WeChat Mini
Prise en charge de la syntaxe :
La dernière version de la bibliothèque prend actuellement en charge Es6/Es7, async /attendre et promesse ;
L'outil de développement convertira le code en syntaxe Es5 pour assurer l'adaptation du style pour différents modèles
Une partie du la syntaxe est similaire à vue et réagir ;
Prise en charge des composants :
fournit la prise en charge des modèles de modèles, Modèle de modèle d'applet WeChat ;
Prise en charge des composants personnalisés, il y a un cycle de vie à l'intérieur du composant, Composant personnalisé
API ; support :
Vous pouvez appeler des méthodes natives du système encapsulé, telles que Bluetooth, les informations réseau, l'analyse de code et d'autres méthodes API
Méthodes conventionnelles ; tels que : stockage, requête, animation, canevas, etc. Pour plus d'informations, vous pouvez consulter API du programme WeChat Mini
En plus du développement natif de mini-programmes, bien sûr, vous pouvez également utiliser des frameworks. Personnellement, je pense que Taro Le framework est bon et prend en charge le développement de petits programmes multi-terminaux
Développement Taro
Taro documentation de développement, Taro prend en charge le développement multi-terminal, y compris le mini programme WeChat/Baidu/Alipay/Toutiao, H5, React-Native. À l'heure actuelle, je n'ai utilisé et développé que le mini programme WeChat et le mini programme Alipay. , H5, et je n'ai pas essayé les autres.
|—— config 开发配置文件
|—— dist 目标文件目录
|—— src 开发目录
| |—— actions redux action文件
| |—— constants 常量文件
| |—— pages page页面目录
......more dir
| | |—— index
| | | |—— index.scss
| | | |—— index.txs
| |—— reducers redux reducers文件
| |—— store redux store文件
| |—— app.scss app全局样式
| |—— app.tsx app全局js
| |—— index.html html文件
|—— .editorconfig editor配置文件
|—— .eslintrc eslint配置文件
|—— global.d.ts global配置
|—— tsconfig.json ts配置文件
|—— package.json
|—— project.config.json
|—— readme.mdPrise en charge de la grammaire :
prise en charge de la grammaire
Spécification de la grammaire React
Prend en charge l'utilisation du précompilateur CSS ;
Prise en charge de la syntaxe Es6/Es7. Si vous avez besoin d'une syntaxe mise à jour, vous pouvez la configurer dans la configuration
Prise en charge des composants :
développement de composants React, mais il sera éventuellement compilé dans une applet native
package npm ; :
Prend en charge la gestion npm/yarn ;
Vous pouvez utiliser Redux pour la gestion de l'état
API :
Encapsulez l'API du mini-programme et l'API H5 une fois, ce qui est plus pratique
react + ts + npm ; package , essentiellement le rythme normal du développement front-end. Quel que soit le petit programme que vous développez, il vous suffit d'exécuter la commande correspondante et, en même temps, d'importer le fichier du répertoire dist dans l'outil de développement pour voir l'effet.
Taro et mini-programmes natifs
Mini-programmes natifs : démarrez rapidement Pour les étudiants qui ont été exposés au développement front-end, ils. peut commencer immédiatement. Il existe des obstacles techniques. Programmation pour document d'applet WeChat.
Développement Taro : spécification de la syntaxe de réaction, développement de composants de réaction, prise en charge de la syntaxe ts et prise en charge de redux. Fortement recommandé aux étudiants qui préfèrent réagir. Si vous aimez réagir, il est recommandé d'utiliser Taro pour le développement. (Facile pour la collaboration en équipe).
Problèmes avec le développement du mini-programme
Mini-programme WeChatNe pas utiliser de cookies
Mini-programme WeChat Les noms de domaine non HTTPS ne sont pas pris en charge
Programme WeChat MiniL'API de partage est une opération synchrone, et le succès et l'échec des rappels ne peuvent pas être surveillés
WeChat Mini Programme Les API de wx.setStorageSync et wx.getStorageSync signalent fréquemment des erreurs
Applet WeChatLa limite de 1 million de données setData peut être résolue par le fractionnement des données
Programme WeChat Mini La limite principale du package est de 2M, ce qui rend impossible l'introduction de trop de fichiers externes (l'utilisation de Taro s'appuiera sur les packages npm)
Mini programme WeChatWeChat les outils de développement occupent trop de CPU, provoquant un décalage informatique
Bien sûr, les problèmes ne se limitent certainement pas à ceux-ci, il existe également des problèmes tels que les composants natifs, les API, les plug-ins officiels des mini-programmes WeChat. , etc. Je n'entrerai pas dans les détails ici, mais pour les étudiants qui souhaitent créer leurs propres mini-programmes, ceux-ci suffisent fondamentalement.
Mais certains pourraient se demander : le cadre n’a-t-il pas encore été discuté ? En fait, lorsque vous utilisez Tora pour développer de petits programmes, vous utilisez simplement une syntaxe différente pour écrire de petits programmes. Enfin, l'outil de commande convertira le fichier au format de fichier du petit programme natif.
Application personnelle
Peu importe la méthode que vous utilisez pour développer votre application personnelle, vous finirez par revenir au produit lui-même. Utiliser la technologie pour compléter l’application personnelle dans votre esprit et fournir l’application aux utilisateurs est le but ultime. (La technologie n'est qu'un moyen, le produit est le but) Cependant, j'utilise personnellement le Taro pour le développer, ce qui en est un avant-goût.
Plus de bêtises, j'espère que le code source du projet personnel pourra aider tout le monde
github : code source de l'applet personnel wxSapp
Tutoriel recommandé : 《Mini programme WeChat》
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!
Acquisition de chemin de mini-programme
La différence entre Scilab et Matlab
Comment configurer le serveur Web
shib coin dernières nouvelles
Quelle est la différence entre passer par valeur et passer par référence en Java
que signifie l'élément
La différence entre div et span
Quelle est la touche de raccourci pour copier et coller ctrl ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
