Guide de développement d'applications de mini-programmes personnels

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.md

Prise 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!