Ringkaskan dan kongsi spesifikasi pembangunan untuk applet pembangunan uniapp

1 Struktur projek

• .hbuilderx ialah direktori konfigurasi pembangunan HBuilderX, alat yang digunakan untuk membangunkan projek ini Secara umumnya, tidak perlu mengubah suai kandungannya secara manual. Dengan direktori ini, apabila orang lain mengimport projek, maklumat konfigurasi alat pembangunan anda akan digunakan secara lalai. Kerana setiap orang mempunyai tabiat yang berbeza dalam menggunakan alat pembangunan, direktori ini biasanya tidak dimuat naik ke gudang pengurusan versi.
• halaman ialah direktori storan untuk semua halaman Vue Anda boleh membuat subdirektori di bawah direktori halaman mengikut rancangan anda sendiri
• Direktori statik biasanya menyimpan sumber statik yang dirujuk oleh projek. : gambar, ikon, fon Tunggu
• untuk membongkar direktori di mana fail berpakej setiap platform disimpan Fail hasil selepas projek dibungkus akan disimpan dalam direktori ini.
• App.vue ialah komponen akar projek, iaitu fail masukan satu halaman Vue fungsi kitaran hayat peringkat aplikasi boleh dipantau pada halaman ini.
• main.js ialah fail entri js projek, yang membuat instantate halaman vue dan menyepadukan pemalam komponen dan kandungan lain yang diperlukan oleh halaman vue.
• index.html ialah halaman utama projek dan halaman kemasukan projek. Hasil halaman Vue selepas main.js dibuat seketika akhirnya akan dipaparkan ke halaman utama.
• Manifest.json ialah fail konfigurasi aplikasi, yang digunakan untuk menentukan nama aplikasi, ikon, kebenaran, tetapan halaman permulaan, pemalam dan maklumat lain.
• pages.json mengkonfigurasi halaman paparan aplikasi, seperti laluan fail, gaya tetingkap, konfigurasi bar navigasi asli, dsb.
• Fail uni.scss digunakan terutamanya untuk mengawal gaya paparan keseluruhan halaman aplikasi. Fail ini menetapkan beberapa pembolehubah SCSS, seperti warna teks, warna latar belakang, warna jidar, saiz gambar, dll.

2. Spesifikasi pembangunan

Ikuti spesifikasi Komponen Fail Tunggal (SFC) Vue

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

• Fail vue hanya boleh mengandungi satu atas- tahap Fail vue boleh mengandungi satu atau lebih takrif gaya <template></template>
• Pembangunan halaman Uniapp mengikut spesifikasi Komponen Fail Tunggal (SFC) Vue. Selain itu, uniapp tidak boleh menggunakan js untuk melaksanakan operasi DOM pada dokumen HTML Sila ikuti kaedah pembangunan mengikat data MVVM dengan ketat. <script></script>
Spesifikasi komponen dan antara muka
• <style></style>Perlu diambil perhatian bahawa teg html standard tidak boleh digunakan dalam uniapp Takrifan nama komponen uniapp dan kaedah penggunaan adalah lebih dekat dengan applet WeChat. uni- Untuk dokumentasi komponen aplikasi, anda boleh merujuk kepada dokumentasi komponen applet WeChat untuk mendapatkan bantuan. Contohnya: Maksud teg

pelaksanaan gaya setempat uniapp adalah berdasarkan fail vue, dalam fail vue tertentu gaya hanya berkuat kuasa dalam julat pemaparan 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');
   }

  Salin selepas log masuk
  <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');  
  }

  Salin selepas log masuk
  <p>字体的使用方式是通用的css样式，使用font-family即可。

  请使用flex布局方式

  <p>为更好的支持跨平台，uniapp框架建议使用css的Flex方式布局。
  <p>推荐：《uniapp教程》

  Atas ialah kandungan terperinci Ringkaskan dan kongsi spesifikasi pembangunan untuk applet pembangunan uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!