Résumer et partager les spécifications de développement de l'applet de développement Uniapp

Cet article vous apporte des connaissances pertinentes sur uniappcross-domain.uni-app est un framework frontal qui utilise vue.js pour développer des applications multiplateformes. Ce qui suit présente les spécifications de développement d'uniapp pour développer de petits programmes. j'espère que cela sera utile à tout le monde.

Recommandé : "Tutoriel uniapp"

1. Structure du projet

Après avoir terminé la création du projet uniapp, sa structure de répertoires de projet est la suivante. Donnons ci-dessous une brève introduction à la structure du projet. Si vous n'arrivez toujours pas à la comprendre après avoir lu l'introduction, je vous suggère d'abord d'apprendre Vue. Étant donné qu'uniapp est développé sur la base de la syntaxe de base de Vue, l'apprentissage de Vue est nécessaire.

• .hbuilderx est le répertoire de configuration de développement de HBuilderX, l'outil utilisé pour développer ce projet. Généralement, il n'est pas nécessaire de modifier manuellement son contenu. Avec ce répertoire, lorsque d'autres personnes importeront le projet, les informations de configuration de votre outil de développement seront utilisées par défaut. Étant donné que chacun a des habitudes différentes dans l'utilisation des outils de développement, ce répertoire n'est généralement pas téléchargé dans l'entrepôt de gestion des versions.
• pages est le répertoire de stockage de toutes les pages Vue. Vous pouvez créer des sous-répertoires sous le répertoire pages selon vos propres plans
• Le répertoire statique stocke généralement les ressources statiques référencées par le projet, telles que : des images, des icônes, des polices, etc.
• déballage du packaging pour chaque plateforme Le répertoire de stockage des fichiers est l'endroit où est stocké le fichier de résultat après le packaging du projet.
• App.vue est le composant racine du projet, qui est le fichier d'entrée d'une seule page Vue. Les fonctions du cycle de vie au niveau de l'application peuvent être surveillées sur cette page.
• main.js est le fichier d'entrée js du projet, qui instancie la page vue et intègre les plug-ins de composants et autres contenus requis par la page vue.
• index.html est la page d'accueil du projet, la page d'entrée du projet. Le résultat de la page Vue après l'instanciation de main.js sera finalement rendu sur la page d'accueil.
• Manifest.json est le fichier de configuration de l'application, qui est utilisé pour spécifier le nom, l'icône, les autorisations, les paramètres de la page de démarrage, les plug-ins et d'autres informations de l'application.
• pages.json configure la page d'affichage de l'application, comme le chemin du fichier, le style de fenêtre, la configuration de la barre de navigation native, etc.
• Le fichier uni.scss est principalement utilisé pour contrôler le style d'affichage global de la page de l'application. Il prédéfinit certaines variables SCSS, telles que la couleur du texte, la couleur de l'arrière-plan, la couleur de la bordure, la taille de l'image, etc.

Enfin, de manière générale, nous devons également créer manuellement un répertoire components pour stocker les composants vue. components目录，用于存放vue的components组件。

二、开发规范

遵循Vue 单文件组件 (SFC) 规范

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: &#39;Hello&#39;
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
//这里可以书写css、sass、less等样式及样式预处理器
</style>

• 一个vue的文件中只能包含一个顶级的d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2模板
• 一个vue文件只能包含一个3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0脚本定义
• 一个vue文件可以包含一个或多个c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927样式定义

uniapp的页面开发遵循 Vue 单文件组件 (SFC) 规范。另外，uniapp不能使用js进行html文档的DOM操作，请严格遵循vue的MVVM的数据绑定开发方式。

组件及接口规范

需要注意的是，在uniapp中不能使用标准的html标签，uniapp组件名称及使用方式的定义更贴近微信小程序，优先参考：uni-app 组件文档，可以辅助参考微信小程序组件文档。比如：

89c662c6f8b87e82add978948dc499d2标签在uniapp中的含义与标准html中的e388a4556c0f65e1904146cc1a846bee标签能力相当如果你希望定义图片，不能直接使用html中的img，你应该使用uniapp的组件标签image

uniapp的接口能力（JS API）非常接近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范

三、css样式规范

全局样式与局部样式

uni.scss

2. Spécifications de développement

Suivez la spécification Vue Single File Component (SFC)

 <style>
    @import &#39;~@/static/style/app.scss&#39;;
 </style>

• Un fichier vue ne peut contenir qu'un seul niveau supérieur<template&gt ;21c97d3a051048b8e55e3c8f199a54b2Template
• Un fichier vue ne peut contenir qu'un seul 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0Définition de script
• Un fichier vue peut contenir un ou plusieurs c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927Définition du style

Le développement des pages d'uniapp suit la spécification Vue Single File Component (SFC). De plus, uniapp ne peut pas utiliser js pour effectuer des opérations DOM sur des documents HTML. Veuillez suivre strictement la méthode de développement de liaison de données MVVM de Vue. 🎜

Spécifications des composants et de l'interface

🎜Il convient de noter que les balises HTML standard ne peuvent pas être utilisées dans uniapp. La définition des noms des composants uniapp et des méthodes d'utilisation est plus proche de l'applet WeChat. documentation du composant d'abord, vous pouvez vous référer à la documentation du composant de l'applet WeChat pour obtenir de l'aide. Par exemple : 🎜🎜La signification de la balise 89c662c6f8b87e82add978948dc499d2 dans uniapp est équivalente à la balise e388a4556c0f65e1904146cc1a846bee en HTML standard si vous souhaitez définir une image. , vous ne pouvez pas utiliser HTML directement. img, vous devez utiliser la balise de composant image d'uniapp🎜🎜La capacité d'interface d'uniapp (API JS) est très proche de la spécification de l'applet WeChat, mais le préfixe wx doit le faire. être remplacé par uni, voir la spécification de l'interface uni-app pour plus de détails🎜🎜3 Spécification du style CSS🎜

Style global et style local

🎜uni.scss Le fichier contient des variables scss de style global prédéfinies, ces variables sont utilisées pour définir le style global de l'application, telles que : la couleur du texte, la couleur de l'arrière-plan, la couleur de la bordure, etc. A noter que ce fichier ne doit pas être modifié à volonté. Si vous souhaitez le changer, vous pouvez uniquement modifier la valeur de la variable, et non le nom de la variable. Donc, si nous voulons ajouter des styles globaux personnalisés, comment devons-nous procéder ? Reportez-vous à la méthode ci-dessous : 🎜🎜🎜Tout d'abord, écrivez vous-même un fichier de style, tel que : app.scss, et écrivez des styles personnalisés dans ce fichier. Placez le fichier dans le répertoire /static/style🎜🎜Deuxièmement, introduisez le fichier uni.scss au début du fichier app.scss. L'instruction d'introduction est : @import '~@/uni.scss' ;🎜🎜Enfin, dans App, vue Dans le style, ce fichier de style global personnalisé est introduit 🎜🎜<pre class="brush:css;"> @font-face { font-family: &amp;#39;test-icon&amp;#39;; src: url(&amp;#39;~@/static/iconfont.ttf&amp;#39;); }</pre>🎜l'implémentation du style local d'uniapp est basée sur les fichiers vue. Les styles définis dans un certain fichier vue ne prennent effet que dans la plage de rendu de cette vue. 🎜<h3>尺寸响应式</h3> <p>uniapp框架为了更好的适配不同的移动端屏幕，设置了750rpx为屏幕的基准宽度。如果屏幕宽度小，rpx显示效果会等比缩小；如果屏幕宽度大，rpx显示效果会等比例放大。<strong>举例说明：</strong> 如果设计稿的元素宽度是600px，某元素X的宽度是100px，那么该元素X在uniapp里面设置的宽度应该是：750 * 100 /600 = 125rpx。</p> <p>如果大家觉得自己手动计算比较麻烦，可以在文件<code>manifest.json中设置transformPx的值为true，项目会自动将px转换为rpx。

字体的使用

uniapp支持字体的引用方式分为2种情况，如果字体文件小于 40kb，uniapp会自动将其转化为 base64 格式；将字体文件放置到static目录下，然后通过font-face定义字体。

 @font-face {
     font-family: 'test-icon';
     src: url('~@/static/iconfont.ttf');
 }

如果字体文件大于等于 40kb， 需开发者自己转换将字体文件转换成Base64字符串，否则使用将不生效；将转换之后的Base64字符串粘贴到下文的位置，完成字体的定义。

@font-face {
    font-family:  'test-icon';
    font-weight: normal;
    font-style: normal;
    src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
}

字体的使用方式是通用的css样式，使用font-family即可。

请使用flex布局方式

为更好的支持跨平台，uniapp框架建议使用css的Flex方式布局。

推荐：《uniapp教程》

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!