<p>Recommandé : "Tutoriel uniapp"
components pour stocker les composants vue. components目录，用于存放vue的components组件。
<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: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
//这里可以书写css、sass、less等样式及样式预处理器
</style><template></template>模板<script></script>脚本定义<style></style>样式定义<view>标签在uniapp中的含义与标准html中的<p>标签能力相当如果你希望定义图片，不能直接使用html中的img，你应该使用uniapp的组件标签image<p>uniapp的接口能力（JS API）非常接近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范uni.scss2. Spécifications de développement <style>
@import '~@/static/style/app.scss';
</style><template> ;</template>TemplateUn fichier vue ne peut contenir qu'un seul <script></script>Définition de scriptUn fichier vue peut contenir un ou plusieurs <style></style>Définition du style <view> dans uniapp est équivalente à la balise <p> 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🎜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 🎜🎜 @font-face {
font-family: 'test-icon';
src: url('~@/static/iconfont.ttf');
}Copier après la connexionCopier après la connexion🎜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. 🎜尺寸响应式
<p>uniapp框架为了更好的适配不同的移动端屏幕，设置了750rpx为屏幕的基准宽度。如果屏幕宽度小，rpx显示效果会等比缩小；如果屏幕宽度大，rpx显示效果会等比例放大。举例说明： 如果设计稿的元素宽度是600px，某元素X的宽度是100px，那么该元素X在uniapp里面设置的宽度应该是：750 * 100 /600 = 125rpx。<p>如果大家觉得自己手动计算比较麻烦，可以在文件manifest.json中设置transformPx的值为true，项目会自动将px转换为rpx。字体的使用
<p>uniapp支持字体的引用方式分为2种情况，如果字体文件小于 40kb，uniapp会自动将其转化为 base64 格式；将字体文件放置到static目录下，然后通过font-face定义字体。 @font-face {
font-family: 'test-icon';
src: url('~@/static/iconfont.ttf');
}Copier après la connexionCopier après la connexion<p>如果字体文件大于等于 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');
}Copier après la connexion<p>字体的使用方式是通用的css样式，使用font-family即可。
请使用flex布局方式
<p>为更好的支持跨平台，uniapp框架建议使用css的Flex方式布局。
<p>推荐：《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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
