文章缩略图

干活分享uniapp开发小程序的开发规范

2022-08-25 00:00:00 技术教程 11406 阅读需58分钟
图标

本文最后更新于2022-08-25 00:00:00已经过去了975天 请注意内容时效性

热度 128 评论 0 点赞90
钞能力。你在哪?此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“验证码”,获取验证码。在微信里搜索“钞能力。你在哪?”或者“mdyc919293”或者微信扫描右侧二维码关注公众号。

一淘模板给大家带来了关于uniapp跨域的相关知识,uni-app 是一个使用 vue.js 开发跨平台应用的前端框架,下面介绍关于uniapp开发小程序的开发规范,希望对大家有帮助。

总结分享uniapp开发小程序的开发规范 干活分享uniapp开发小程序的开发规范 技术教程

一、项目结构

在完成uniapp项目的创建之后,其项目目录结构如下所示。我们下面对项目结构进行简单的介绍,如果你看完介绍的内容,仍然无法理解,建议您先去学习一下vue。因为uniapp是基于vue核心语法进行开发,所以学习vue是必要的。

总结分享uniapp开发小程序的开发规范 干活分享uniapp开发小程序的开发规范 技术教程

.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) 规范

  1.     
  2.         
  3.         
  4.             {{title}}
  5.         
  6.     
  7.  
  8.     export default {
  9.         data() {
  10.             return {
  11.                 title: 'Hello'
  12.             }
  13.         },
  14.         onLoad() {
  15.  
  16.         },
  17.         methods: {
  18.  
  19.         }
  20.     }
  21.  
  22. //这里可以书写css、sass、less等样式及样式预处理器

一个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的样式中,引入这个自定义全局样式文件

  1.    @import '~@/static/style/app.scss';

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定义字体。

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

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

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

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

请使用flex布局方式

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

你可能想看:
继续阅读本文相关话题
开发者选项在哪里打开开发者模式开发科技开发者开发者模式一直开着对手机有影响吗开发票需要提供什么信息开发是什么意思开发一个app软件多少钱开发的英文开发票怎么开开发保守妻子txt开发者工具开发票官网登录入口开发空间开发区开发票官网开发区管委官网开发区教育网开发者联盟开发者平台开发信开发语言排行开发者社区开发票开发者账号程序代码程序的英文程序员程序正义程序员需要什么学历程序员是干什么的程序员自学程序失控程序是什么意思程序教学程序员客栈官网程序编程软件程序员客栈程序员导航程序流程图程序员导航网程序文件程序法程序员论坛程序员计算器程序员接单程序员鱼皮程序员简历程序员接单平台uniappuniapp官网uniapp是做什么的uniapp面试题uniapp开发小程序uniapp和vue有什么区别uniapp开发app流程uniapp和微信小程序区别uniapp和vue有什么关系uniapp插件市场uniapp是什么uniapp弹框组件uniapp写本地文件uniapp左右滑动切换全屏的viewuniapp下载安装uniapp跳转uniapp可视化开发工具uniapp下拉菜单uniapp 生命周期uniapp vue3uniapp 自定义tabbaruniapp 组件库uniapp webviewuniapp imageuniapp swiperuniapp scroll-viewuniapp教程母猪人工授精技术教程多箱体养蜂技术教程凹陷修复技术教程汽车喷漆技术教程母牛人工授精技术教程鹅孵化技术教程修鞋补鞋技术教程鹅苗孵化技术教程ai技术入门教程技术开锁教程视频技术教程资源网技术教室技术员技术学习技术分析 教学
更多推荐
发表评论

共有[ 0 ]人发表了评论

🥰 😎 😀 😘 😱 🤨 🥵 😔 😤 😡 😭 🥱 🤡 ☠️ 💖 🤖 💢 💥

评论列表
暂无评论

暂时没有评论,期待您的声音!

品牌认证 W3C认证 MYSSL认证 TrustAsia 安全签章
扫码访问手机版
二维码图片