1. Introduction
1.1 The mainstream hybrid framework ReactNative and Flutter have already been discussed in the first two sections. In this section, let’s look at the environment construction and use of uni-app. Although uni does not have ReactNative in the world, Flutter is widely used, but due to its simple and fast features, there are still many domestic users.
1.2 uni-app is a cross-platform hybrid framework supported by the Vue.js framework. Vue is also widely used in the development of web front-ends, small programs, and H5. Its responsive programming features are deeply loved by the front-end web, and it is currently following AngularJS The most streamlined js framework.
Two, development tools
2.1 The main development tool for vue and uni is HbuilderX, which is also one of the most popular tools for developing js front-ends.
2.2 HbuilderX official website: https://www.dcloud.io/hbuilderx.html
2.3 Create uni project
Fill in the project name, select the default template, and select 3 for the vue version
project structure
├─pages // 页面存放文件夹，等同于 微信小程序中的 pages
│ └─index // 默认生成的页面
├─static // 静态资源存放文件夹
└─uni_modules // uni-app组件目录
│ └─uni-xxx // uni-app 所提供的业务组件，等同于 微信小程序中的组件
├─App.vue // 应用配置文件，用来配置全局样式、生命周期函数等，等同于 微信小程序中的app.js
└─main.js // 项目入口文件
├─mainfest.json // 配置应用名称、appid、logo、版本等打包信息，
└─pages.json // 配置页面路径、窗口样式、tabBar 等页面类信息，等同于 微信小程序中的app.json
└─uni.scss // uni-app内置的常用样式变量2.4 Run to browser
compilation process
It can be seen that the operation is successful
Three project configuration
3.1 Entry file
3.2 Vue also supports hot loading, and the modified content will update the content immediately
Change Hello to Hello World
You will see that the content will be updated synchronously
3.3 Project packaging and running configuration manifest.json
3.4 It is also possible to release and package native and applet apps with a set of codes
Fourth, other introductions
4.1 Vue can call js and css mutually
js import
// Absolute path, @ points to the project root directory, in the cli project @ points to the src directory
import add from '@/common/add.js';
// relative path
import add from '../../common/add. js';
css import
<style>
@import "../../common/uni.css";.uni-card {
box-shadow: none;
}
</style>
Static resource import
<!-- Absolute path, /static refers to the static directory under the root directory, in the cli project /static refers to the static directory under the src directory --> <
image class="logo" src="/static/logo.png" ></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- relative path -->
<image class="logo" src="../ ../static/logo.png"></image>
Native plug-in introduction
const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
4.2 The introduction of this section is over. After all, uni is developed by a domestic team and has rich Chinese documents. For more information, you can visit the official website to learn