Introduction to uni-app
uni-appThe multi-terminal fusion framework developed by dcloud company, one development and multi-terminal operation is one use.
By using Vue.js+ 小程序的apito develop the framework of all front-end applications, developers write a set of codes to realize multi-terminal mixed development Hybrid: it
can be published to iOS, Android, Web (responsive), and various small programs (WeChat/Alipay/Baidu/ Toutiao/QQ/DingTalk/Taobao), quick apps and other platforms
preparation tools
Before using uni development, you need to install:
- Hbuilderx (development and compilation tools)
- WeChat Mini Program Development Tool (WeChat Mini Program Preview Test)
- Android emulator/real machine (there are many simulators on the market)
Precautions:
For the first run of hbuilder, you need to download the corresponding plug-in.
Run to the Android emulator, there is a difference in view.
It may take a certain amount of time to run
. Sometimes you need to refresh the page or re-run.
uni-app interface introduction
1. Create a project
2. How to run the project to multiple terminals
h52.1 Running in hbuilderx
tip: You need to install the plug-
in for the first run. After the plug-in is installed successfully, close the built-in operation and open it again.
2.2 Small program running
tip: It needs to be set up for the first run, and then you can run it directly.
01
Configure the address of the WeChat development tool in the WeChat development tool setting-server port 02 HBuilderx
03 Run settings
03.1 Configure the WeChat applet id
04 Run (you can run after the above settings are completed)
01 Set in WeChat development tool - server port
02 HBuilderx configures the address of WeChat development tools
03 Run settings
03.1 Configure WeChat applet id
04 run
Cases of successful running of applets
2.3 app || Simulator running
Note: Different simulators have different port numbers:
Yeshen simulator port number: 62001
Haima simulator port number: 26944
Xiaoyao simulator port number: 21503
MuMu simulator port number: 7555
Tiantian simulator port number: 6555
Thunderbolt simulation Emulator port number: 5554
tip:
Most of the reasons why the app does not run out of data are not written enough. The first run needs to configure
the emulator port number.
01 Open the emulator or mobile phone
02 Configure the port of the emulator
03 Run to the emulator
01 Open the emulator or mobile phone
02 Configure the port of the emulator
03 run to emulator
03.1 The plug-in needs to be downloaded for the first run
03.2 The plug-in is installed successfully and starts running
3. Vue syntax
3.1 Template Syntax
3.1.1. Text rendering
{
{
表达式}}
v-text=“表达式”
//简单的js运算
{
{
2+3}}
//js方法调用
{
{
title.length}}
{
{
title.split("").reverse().join("")}}
//3元运算符
<view>{
{
title.length>15?'长度很长':'字少事大'}}</view>
v-html 富文本
3.1.2. Conditional rendering
v-if
v-else-if
v-else
v-show
三元运算符
3.1.3. List options
- Strings, numbers, lists, and objects can all be traversed
- < view v-for=“(item,index) in list” ：key=“index”>{ {index+1}} { {item}} < /view>
- Be sure to ensure that the key value between sibling elements is unique
3.1.4. Property binding
<button v-bind:disabled=“true”>
<button :disabled="true">
3.1.5. Form binding
01 默认
:value="单向绑定"
02 input
v-model=“双向绑定”
03
@change=“$event.detail.value”
事件，事件的值$event.detail.value
3.1.6. Events
01 Event Binding
<button v-on:click="响应"></button>
简写绑定
<button @ click="响应"> </button>
02 Event inline processing
<view @ click="num++"> </view>
03 Event response function (function defined in methods)
<view @ click="say"> </view>
04Event parameter passing
//$event 是一个固定写法 代表事件对象
不写参数
<view @ click="say"> </view>
等同于
<view @ click="say（）"> </view>
等同于
<view @ click="say（$event)"> </view>
say(str = "你好") {
// 弹出提示
uni.showModal({
title: str
})
}
3.1.7. uni-app page
Page configuration pages.json:
-
Global style
globalStyle: The style of the default page will apply the global
style. If the page has written style configuration, then use the configuration to override the global configuration -
Page
pages:pathpage path;stylepage style
3.1.8. vue options
data data
methods method
computed calculation
watch monitoring
directive instruction
filter filtering
3.1.9 Life cycle of uni-app
vue life cycle
applet life cycle
applet global method
app global method
3.1.10. Components
4. Routing
4.1 Routing components
Official documentation of routing components
Navigation (navigator)
<navigator url="../options/options" open-type="reLauch"></navigator>
//tip：文件名不能加后缀 .vue
//url 跳转的页面
//open-type打开类型：
//navigate跳转
//redirect重定向（当前页面不留历史纪录）；
//navigateBack 返回
//reLauch 重启
//switchTab 跳转底部栏
4.2 Routing parameters
grammar:
传递：
<navigator url="../options/options?count=5&title=life">选项</navigator>
接收：
onLoad(option) {
//option的值
this.count = option.count
uni.setNavigationBarTitle({
title: option.title
})
},
the case
4.3 Routing APIs
4.3.1 Routing Jump
methods: {
goOption() {
uni.navigateTo({
url: "../options/options"
})
},
}
4.3.2 Redirection
uni.redirect({
url: "../options/options?count=100&title=来自js跳转"
})
4.3.3 Back
uni.navigateBack({
})
4.3.4 Bottom Bar Switching
uni.switchTab({
})
4.3.5 Restart
uni.reLunch({
})
4.4 Routing configuration
Official routing configuration documentation:
4.5 Get the current page getApp
01 Define globalData:{num:100}
the page to be used in app.vue 02 Go back to the app
var app=getApp（）
03 Get the value of globalData
onShow(){
this.num=app.globalData.num
}
04 Update globalData value
addNm(){
app.globalData.num++;
this.num=app.globalData.num
}
the case
4.6 Get page stack information getCurrentPages
5. Conditional compilation
Conditional compilation purpose: Different platforms display different features and functions
5.1 Template conditional compilation:
APPapp sideH5web pageMPMini Program:MP-WEIXINWeChat Mini Program
Syntax:
<!-- # ifdef H5 -->
H5：下载app 获取优惠卷
<!-- # endif -->
the case
5.2 css conditional compilation
/* #ifdef APP */
.active{
color:red}
/* #endif */
5.3 js conditional compilation
// #ifdef APP-PLUS
uni.showModal({
title:"你好App用户"
})
// #endif
css+js case
5.4 Conditional configuration page pages.json
5.4.1 Configure page navigation bar style
“style”:{
"h5":{
"titleNView":{
"titleText":"我是H5"
}
},
"app-plus": {
"titleNView":false //隐藏导航栏
}
}
the case
5.4.2 Configure display page path
// #ifdef MP-WEIXIN || APP
{
"path":"pages/condition/we",
"style":{
"navigationBarTitleText": "小程序专有页面"
}
},
// #endif
the case
end。。。