The traditional h5 has only one end, the browser. The uni-app can span multiple terminals, although it is still a front-end, which is different from the traditional h5.
Changes in the network model
In the past, most of the web pages were b/s, and the server-side code was mixed in the page;
Now it is c/s, the front and back ends are separated, json data is obtained through js api (similar to uni.request of ajax), and the data is bound to the interface for rendering.
file type change
It used to be a .html file, the development was also html, and the operation was also html.
Now it is a .vue file, and the development is vue. After compilation, the runtime has become a js file.
Modern front-end development rarely uses HTML directly, but basically develops, compiles, and runs. So uni-app has the concept of compiler and runtime.
Changes in the code structure within the file
In the past, there was a large html node with script and style nodes in it;
Now template is a first-level node, used to write tag components, script and style are parallel first-level nodes, that is, there are 3 first-level nodes.
before
copy code<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
</script>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Now. This is called vue single file component specification sfc
copy code<template>
<view>
注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。
</view>
</template>
<script>
export default {
}
</script>
<style>
</style>
Changes in how external files are referenced
Previously introduced external js and css through script src and link href;
Now it is written in es6, import introduces external js modules (not files) or css
before
copy code<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
Now
js needs to come in and become an object.
There is a tool class in the common directory of util.jshello uni-app, you can search for this example in hello uni-app to view.
copy code<script>
var util = require('../../../common/util.js'); //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>
And in this util.js, encapsulate the previous function as an object method
copy codefunction formatTime(time) {
return time;//这里没写逻辑
}
module.exports = {
formatTime: formatTime
}
Of course there are some advanced usages
copy codevar dateUtils = require('../../../common/util.js').dateUtils; //直接使用js模块的属性。在hello uni-app有示例
import * as echarts from '/components/echarts/echarts.simple.min.js'; //将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例
css external file import
copy code<style>
@import "./common/uni.css";
.uni-hello-text{
color:#7A7E83;
}
</style>
The global style is written in app.vue in the root directory, and each page will load the style in app.vue.
In addition, vue supports component import, which can more easily encapsulate a library including interface, js, and styles.
The following is a component library that imports a corner label, displays an abc on the page and has a digital corner label 1 in the upper right corner. For details, see
copy code<template>
<view>
<uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->
</view>
</template>
<script>
import uniBadge from "../../../components/uni-badge.vue";//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
export default {
data() {
return {
}
},
components: {
uniBadge //2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
}
}
</script>
If you need to import vue components globally, that is, each page can be used directly without reference and registration, it is processed in main.js in the project root directory. The following is an example in hello uni-app.
copy code//main.js
import pageHead from './components/page-head.vue' //导入
Vue.component('page-head', pageHead) //注册。注册后在每个vue的page页面里可以直接使用<page-head></page-head>组件。
The above-mentioned component usage methods belong to the concept of traditional vue. After uni-app 2.7, a simpler component use technology , easycom , was introduced. You don't need to reference and register components, you can use components directly in the template area.
Changes to components/labels
It used to be an html tag, eg <div>, and now it's an applet component, eg <view>.
So what's the difference between a paragraph of English 标签and 组件a paragraph surrounded by angle brackets?
In fact, the label is an old concept, and the label belongs to the built-in thing of the browser. Components, however, can be freely extended.
Similar to you can encapsulate a piece of js into a function or module, you can also encapsulate a ui control into a component.
uni-appReferring to the applet specification, a number of built-in components are provided.
The following is the mapping table of html tags and uni-app built-in components:
- div is changed to view
- Change span and font to text
- a changed to navigator
- change img to image
- input is just an input box. In the original html specification, input is not only an input box, but also radio, checkbox, time, date, and file selection functions. In the uni-app and applet specifications, input is just an input box. Other functions uni-app has separate components or APIs: radio component , checkbox component , time selection , date selection , image selection , video selection , multimedia file selection (including image and video) , general file selection .
- form , button , label , textarea , canvas , video are still there.
- select changed to picker
- Change iframe to web-view
- ul and li are gone, and they are replaced by view. Do lists generally use the uList component
- audio is no longer recommended, it is changed to api. In fact, the old HTML tags of the background audio api document
can also be used in uni-app. The uni-app compiler will convert the old tags into new tags when compiling, such as compiling div into view. But this usage is not recommended, it is easy to get confused when debugging the H5 side.
In addition to the changes, a number of new components commonly used on mobile phones have been added
- scroll-view area scroll view container
- swiper swipeable area view container
- icon icon
- rich-text rich text (not executable js, but can render various text formats and pictures)
- progress progress bar
- slider slider indicator
- switch switch selector
- cameracamera _
- live -player
- mapmap _
-
cover-view can cover the view container of the native component
Cover-view needs to be emphasized a few more words. The video, map, canvas, and textarea of the non-h5 end of uni-app are native components, and the level is higher than other components. To cover native components, you need to use the cover-view component. See level introduction
In addition to built-in components, there are many open source extension components that encapsulate common operations. DCloud has established a plug-in market to include these extension components. For details, please refer to the plug-in market .
js changes
js changes are divided into three parts: operating environment changes, data binding mode changes, and api changes.
- The operating environment has changed from a browser to a v8 engine
Standard js syntax and api are supported, such as if, for, settimeout, indexOf, etc.
However, browser-specific window, document, navigator, and location objects, including cookie storage, are only available in browsers, and are not supported by apps and applets.
Some people may think that js is equivalent to js in the browser. In fact, js is managed by the ECMAScript organization, and the js in the browser is the w3c organization supplemented with special objects such as window, document, navigator, and location based on the js specification.
In each end of uni-app, except for the h5 end, the js of the other end runs under an independent v8 engine, not in the browser, so the objects of the browser cannot be used. If you have done small program development, you should know this very well.
This means that many HTML libraries that rely on document, such as jqurey, cannot be used.
Of course, apps and applets support web-view components, which can load standard HTML. This kind of page still supports browser-specific objects window, document, navigator, and location.
- The previous dom operation was changed to the MVVM mode of vue
Now the front-end trend is to de-domize, switch to mvvm mode, write more concisely, greatly reduce the number of lines of code, and at the same time have better differential rendering performance.
uni-app uses vue's data binding method to solve the problem of interaction between js and dom interface.
If you want to change the display content of a dom element, such as the display text of a view:
In the past, the id was set for the view, and then the dom element was obtained through the selector in js, and the assignment operation was further performed through js to modify the attribute or value of the dom element.
The following demonstrates a piece of code. There is a displayed text area and a button on the page. After clicking the button, the value of the text area will be modified.
copy code<html>
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
document.getElementById("spana").innerText="456"
})
function changetextvalue () {
document.getElementById("spana").innerText="789"
}
</script>
</head>
<body>
<span id="spana">123</span>
<button type="button" onclick="changetextvalue()">修改为789</button>
</body>
</html>
The current practice is the binding mode of vue, bind a js variable to the dom element, modify the value of the js variable in the script, the dom will automatically change, and the page will automatically update and render
copy code<template>
<view>
<text>{
{textvalue}}</text><!-- 这里演示了组件值的绑定 -->
<button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->
</view>
</template>
<script>
export default {
data() {
return {
textvalue:"123",
buttontype:"primary"
};
},
onLoad() {
this.textvalue="456"//这里修改textvalue的值，其实123都来不及显示就变成了456
},
methods: {
changetextvalue() {
this.textvalue="789"//这里修改textvalue的值，页面自动刷新为789
}
}
}
</script>
export default {} Note in the above code data(): {return { }}.
In the design of Vue, the data that needs to be bound in the page is stored here, and it can be correctly bound and rendered by the interface when it is written in the data.
Note: The vue page of uni-app is the single-file component specification of vue. According to the definition of vue, only functions are accepted and must be wrapped with return.
If you have learned the data binding of applet, but don't know vue, pay attention to:
- The data binding of the applet refers to Vue, but I modified it myself. Only standard vue is supported in uni-app, data binding syntax of applet is not supported
- The setData in the applet does not exist in uni-app, because vue is automatically two-way data binding. Modify the data directly by assignment, if the data is bound to the interface, the interface will automatically update the rendering
From the above example, it can also be seen that the writing of events has changed.
- In the past, the event of the element was onxxx="", and a js or reference function name was written in it, such as the above code.
onclick="changetextvalue()" export default {}Now, you need tomethods: {}write a method in js and then use it in the component@click="changetextvalue()"
In js, the level with data and methods, as in the above example code, is onload()called life cycle. The life cycle in a normal vue page is called the page life cycle. The life cycle in the app.vue file in the project root directory is called the application life cycle.
In addition onload, there are onreadymany other life cycles, see the life cycle of uni-app for details
In advanced usage, vue supports setting ref (reference mark) to components, which is similar to setting an id to a dom element in html before, and then it can also be this.$refs.xxxused to . as follows:
copy code<template>
<view>
<view ref="testview">11111</view>
<button @click="getTest">获取test节点</button>
</view>
</template>
<script>
export default {
methods: {
getTest() {
console.log(this.$refs.testview)
}
}
};
</script>
- js api changes
Because the api of uni-app refers to the applet, it is very different from the js api of the browser, such as
- alert, confirm changed to uni.showmodel
- ajax changed to uni.request
- Cookies and sessions are gone, local.storage is changed to uni.storage
There are many js apis of uni-app, but they are basically the apis of small programs. Just change wx.xxx to uni.xxx. see details
uni-app supports conditional compilation on different sides, and can use the unique api of each side without restrictions. For details, please refer to conditional compilation.
css changes
Standard CSS is basically supported.
The selector has 2 changes: * The selector is not supported; there is no body in the element selector, and it is changed to page. This is the case with WeChat Mini Programs.
copy codepage{
}
In terms of units, px cannot dynamically adapt to screens of different widths, and rem cannot be used for nvue/weex. If you want to use a unit that adapts to the screen width, it is recommended to use rpx, which is fully supported. unit of measure documentation
uni-app recommends using flex layout, which is a bit different from traditional flow layout. But the feature of flex is that no matter what technology supports this type of layout, web, applet/quick application, weex/rn, native iOS, and Android development all support flex. It is a new generation layout scheme that takes all ends. For related tutorials, please learn from Baidu.
uni-app's vue file supports all web layout methods, whether streaming or flex. But in nvue, only flex is supported because it is rendered using the native typesetting engine on the app side.
Pay attention to the background image and font file in css, try not to be larger than 40k, because it will affect the performance. On the applet side, if it is larger than 40k, it needs to be placed in the server-side remote reference or imported after base64, and cannot be placed locally as an independent file reference.
Project structure and page management
The engineering structure of uni-app has separate requirements, see details
Every page that can be displayed must be registered in pages.json . If you have developed small programs, then pages.json is similar to app.json. If you are familiar with vue, there is no vue routing here, it is all managed in pages.json.
The homepage of the original project is generally index.html or default.html, which is configured in the web server. The home page of uni-app is configured in pages.json, and the first page under the page node is the home page. Usually in the /pages/xx directory.
In the app and applet, in order to improve the experience, the page provides a native navigation bar and bottom tabbar. Note that these configurations are done in pages.json, not in the vue page, but the click event listener is displayed on the vue page. do in.
If you are familiar with applet development, the comparison changes are as follows:
- It turned out that app.json was split into two. Page management was moved into pages.json of uni-app; non-page management was moved into manifest.json
- The original app.js and app.wxss were merged into app.vue
Epilogue
Finally, this article is not a complete tutorial of uni-app. To understand and master uni-app, you need to go through the documentation of uni-app carefully.
To master vue well, you still need to go to vue official website to learn further. Or through professional uniapp video courses, learn together with Vue with uni-app. There are many free courses at station b. Recommended dark horse courses. You can also choose what you like.
People who know Vue have a 27% higher salary than ordinary front-end people who don't know Vue.
Those who know how to uniapp earn higher wages than those who do not know how to uniapp!
Roll up!
If you are familiar with Mini Programs, but not Vue, here is another article that sums it up very well: Differences and Comparisons between Vue and WeChat Mini Programs
material:
Vernacular uni-app [also the difference between html, vue and applet] - DCloud Answers
