文章目录
一、项目结构
在完成uniapp项目的创建之后,其项目目录结构如下所示。我们下面对项目结构进行简单的介绍,如果你看完介绍的内容,仍然无法理解,建议您先去学习一下vue。因为uniapp是基于vue核心语法进行开发,所以学习vue是必要的。
.hbuilderx
是开发该项目使用的工具HBuilderX的开发配置目录,一般不需要手工修改其内容。有了该目录别人在导入项目的时候,会默认使用你的开发工具配置信息。因为每个人使用开发工具的习惯不同,所以该目录一般不上传到版本管理仓库。pages
是所有vue页面的存放目录,可以根据自己的规划在pages目录下面创建子目录static
目录通常存放项目引用的静态资源,比如:图片、图标、字体等unpackage
各个平台的打包文件存放目录,项目打包之后的结果文件就存放在这个目录下。App.vue
是项目的根组件,即Vue单页面入口文件,在该页面可以监听应用级别的生命周期函数。main.js
是项目的js入口文件,将vue页面实例化,并整合vue页面所需要的组件插件等内容。index.html
是项目的首页,项目的入口页面。main.js
实例化之后的vue页面结果,最终将渲染到首页中。manifest.json
是应用的配置文件,用于指定应用程序的名称、图标、权限、启动页面设置、插件等信息。pages.json
是对应用的显示页面进行配置,比如文件路径、窗口样式、原生导航栏配置等内容。uni.scss
文件主要是用于控制应用页面的整体显示风格,预置了一些SCSS的变量,比如文字颜色、背景颜色、边框颜色、图片尺寸等等
最后,一般来说我们还需要手动建立一个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: 'Hello'}},onLoad() {},methods: {}}script><style>//这里可以书写css、sass、less等样式及样式预处理器style>
- 一个vue的文件中只能包含一个顶级的
模板
- 一个vue文件只能包含一个
脚本定义
- 一个vue文件可以包含一个或多个
样式定义
uniapp的页面开发遵循 Vue 单文件组件 (SFC) 规范。另外,uniapp不能使用js进行html文档的DOM操作,请严格遵循vue的MVVM的数据绑定开发方式。
组件及接口规范
需要注意的是,在uniapp中不能使用标准的html标签,uniapp组件名称及使用方式的定义更贴近微信小程序,优先参考:uni-app 组件文档,可以辅助参考微信小程序组件文档。比如:
标签在uniapp中的含义与标准html中的标签能力相当- 如果你希望定义图片,不能直接使用html中的img,你应该使用uniapp的组件标签image
uniapp的接口能力(JS API)非常接近微信小程序规范,但需将前缀
wx
替换为uni
,详见uni-app接口规范三、css样式规范
全局样式与局部样式
uni.scss
文件中预置了一些全局样式scss变量,这些变量用于定义应用的整体样式风格,比如:文字颜色、背景颜色、边框颜色等等。 需要注意的是这个文件不要随意修改,如果要更改的话只能修改变量的值,不要修改变量的名。那么如果我们希望增加一些自定义的全局样式,应该怎么去做呢?参考下面的方法:- 首先,自己写一个样式文件,比如:app.scss ,该文件中自定义样式书写。将该文件放置于
/static/style
目录下 - 其次在app.scss文件的开头,引入
uni.scss
文件,引入语句为:@import '~@/uni.scss';
- 最后在App,vue的样式中,引入这个自定义全局样式文件
uniapp的局部样式实现是以vue文件为单位的,在某个vue文件内定义的样式,只在该vue的渲染范围内生效。
尺寸响应式
uniapp框架为了更好的适配不同的移动端屏幕,设置了750rpx为屏幕的基准宽度。如果屏幕宽度小,rpx显示效果会等比缩小;如果屏幕宽度大,rpx显示效果会等比例放大。举例说明: 如果设计稿的元素宽度是600px,某元素X的宽度是100px,那么该元素X在uniapp里面设置的宽度应该是:750 * 100 /600 = 125rpx。
如果大家觉得自己手动计算比较麻烦,可以在文件
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方式布局。
来源地址:https://blog.csdn.net/hanxiaotongtong/article/details/125715174
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容- PHP数据类型转换:在编程中的关键应用
- 在 Java 中如何实现打印输出?(java怎么打印输出)
- Java OGNL 注入攻击的预防措施有哪些?(java ognl注入攻击如何预防 )
- Java 中如何实现 double 类型转 BigDecimal 类型?(java double转bigdecimal怎么实现)
- 在 Java 中如何利用 Map 构建表格?(java中怎么使用map做表格)
- Java 中的 exit 方法是否能够终止所有线程?(java exit是否能终止所有线程 )
- Java Supplier 接口如何有效避免空指针问题?(java supplier接口如何避免空指针)
- Java 中如何删除数组中的某个元素?(java怎么删除数组中的某个元素)
- 如何精准地区分 Java 中的重载方法?(如何区分Java中的重载方法)
- Java 中字符串赋值如何赋给另一个变量?(java字符串赋值怎么给另一个变量)
猜你喜欢
AI推送时光机【小程序专栏】总结uniapp开发小程序的开发规范
移动开发2023-09-09uniapp开发小程序的开发规范总结
移动开发2024-04-02小程序开发总结之模块化开发流程规范
移动开发2023-10-12uniapp开发小程序的经验总结
移动开发2024-04-02uniapp快速开发小程序全流程
移动开发2023-08-18怎么使用uniapp开发小程序
移动开发2024-04-09uniapp开发小程序的经验之谈
移动开发2023-06-14微信小程序 | 小程序开发
移动开发2023-09-08微信小程序开发之组件设计规范
移动开发2024-04-02uniapp开发的App(安卓)端跳转uniapp微信小程序
移动开发2023-10-03微信小程序 | 小程序组件化开发
移动开发2023-09-09小程序开发公司领域武汉专业小程序APP开发制作|好快科技
移动开发2023-06-05uniapp开发小程序-实现中间凸起的 tabbar
移动开发2023-09-05微信小程序怎么开发自己的小程序?
移动开发2023-10-03模板小程序开发和定制小程序开发有哪些区别
移动开发2023-06-27uniapp开发小程序-显示左滑删除效果
移动开发2023-09-08微信小程序开发语言(微信小程序开发教程)详细步骤
移动开发2023-10-23咦!没有更多了?去看看其它编程学习网 内容吧