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

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

一、名目构造

在实现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)范例

2.     
3.         
4.         
5.             {{title}}
6.         
7.     
9.  
11.     export default {
12.         data() {
13.             return {
14.                 title: 'Hello'
15.             }
16.         },
17.         onLoad() {
18.  
19.         },
20.         methods: {
21.  
22.         }
23.     }
25.  
27. //这里能够誊写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的接口能力（JSAPI）非常亲近微信小程序范例，但需将前缀 wx 调换为 uni，详见uni-app接口范例

三、css样式范例

全局样式与全部样式

uni.scss文件中预置了一些全局样式scss变量，这些变量用于界说应用的整体样式格调，比如：文字色彩、配景色彩、边框色彩等等。 需要细致的是这个文件不要随便修改，如果要变动的话只能修改变量的值，不要修改变量的名。那末如果咱们希望增加一些自界说的全局样式，应当怎么去做呢？参考下面的方法：

首先，自身写一个样式文件，比如:app.scss，该文件中自界说样式誊写。将该文件搁置于/static/style目录下

其次在app.scss文件的末端，引入uni.scss文件，引入语句为：@import'~@/uni.scss';

最后在App,vue的样式中，引入这个自界说全局样式文件

2.    @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形式构造。

本文链接：https://addon.ciliseo.com/gan-huo-fen-xiang-uniapp-kai-fa-xiao-cheng-xu-de-kai-fa-gui-fan.html