uniapp基础（新手入门）-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp基础（新手入门）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言：
这篇文章主要写的是uniapp的基础知识，可以让大家快速上手uniapp，同时避掉一些可能踩到的坑。

一. 什么是uniapp

uniapp是由dcloud 公司开发的多端融合框架。uniapp的出现让我们的开发更为方便，一次开发，多端运行。更重要的是学习成本不会很大，因为uniapp主要是Vue语法加上小程序的api，学过vue和小程序，再学uniapp会更加得心应手。
介绍一下端
端分为App端（HTML+ nvue（原生view）native.js(js原生沟通的桥梁) weex内置ios/安卓的模块使用），H5端(h5专用api),各种小程序（微信为主）

二. uniapp应用

1.准备工具

我们在开发uniapp项目之前需要做如下准备，首先就是开发与编译工具Hbuilderx ，最好是用它，毕竟官方推荐，使用起来更加方便。还有用来微信小程序预览测试工具，微信小程序开发工具。第三个就是安卓模拟器/真机，用来运行app。这里大家可以使用mumu模拟器，或者雷电模拟器。

2. 创建我们的第一个uniapp项目

uniapp快速入门,前端,uni-app,微信小程序,小程序

3. uniapp项目组成

我们创建一个项目之后，发现里面主要由以下几部分组成

pages	页面
index	首页
index.vue	首页代码
static	静态资源
App.vue	根节点
index.html	模板文件H5
main.js	项目入口
manifest.json	项目配置
uni.css	样式表

4. 如何运行到多端

H5
点击运行到内资浏览器即可
APP
01 打开模拟器或者手机
02 配置模拟器端口
03 运行到模拟器

这里给大家写一下常见模拟器的端口号
夜神模拟器端口号：62001
海马模拟器端口号：26944
逍遥模拟器端口号：21503
MuMu模拟器端口号：7555
天天模拟器端口号：6555
雷电模拟器：5554

微信小程序
01 打开开发工具的服务端口
02 HBuilder X配置微信开发工具地址
03 配置微信小程序id
04 运行到微信小程序

Tips:
hbuilder可能需要下载对应的插件
运行到安卓模拟器，有视图差别
运行可能需要一定的时间,大家要耐心等待哦

三. uniapp语法

1. uni-app页面

我们新建一个页面，然后进行页面配置。页面配置在==pages.json==。我们可以配置全局样式==globalStyle==。默认页面的样式会应用全局样式，页面写了style 配置，那么用的配置覆盖全局的配置

pages页面有path页面路径和style 页面样式。

2. Vue语法

文本渲染

{{表达式}}
v-text=“表达式”
表达式（简单的js运算，js方法调用，3元运算符）
v-html 富文本

条件渲染

v-if
v-else-if
v-else
v-show
通过三元运算符

列表选项

字符串，数字，列表，对象都可以遍历
<view v-for="(item,index) in list" :key="index">{{index+1}} {{item}}</view>
一定要保证兄弟元素间的key值是唯一

属性绑定(v-bind ,也可以简写为:)
<button v-bind:disabled=“true”>
<button :disabled="true">

表单绑定

默认 :value=“单向绑定”
input v-model=“双向绑定”
@change=“$event.detail.value”事件

事件的值$event.detail.value

事件

事件绑定： < view v-on:click=“响应” >
简写绑定：<view @click=“事件响应” >
事件行内处理 <view @click=“num++” >
事件响应函数 (函数在methods定义)
<view @click=“say”>

事件传参
不写参数
@click="say" 等同于 @click=“say()” 等同于 @click=“say($event)”
$event 是一个固定写法代表事件对象

事件对象 $event/e
function say(e){ }
其中 target目标对象
dataSet 组件传参
<view :data-title="title" @click="say"> function say(e){ e.target.dataset.title }

3. vue选项

data 数据 methods 方法 computed 计算
watch监听 directive指令 filter过滤

4 .uni-app的生命周期

Vue的生命周期

创建 beforeCreate created
挂载 beforeMount mounted
更新 beforeUpdate updated
卸载 beforeDestroy destroyed

小程序的生命周期

onLoad 加载（能够获取页面的参数开启ajax，定时器，事件监听像vue的created ）
onShow 显示（播放媒体）
onReady准备（获取节点信息像vue的mounted ）
onHide 后台运行停止播放媒体
onUnload 卸载停止事件监听与定时器

小程序的全局方法

onPullDownRefresh 下拉刷新
onReachBottom() 触底更新
onShareAppMessage右上角分享
onPageScroll 页面滚动
onShareTimeline 分享到朋友圈

app的全局方法

onBackPress 手机的返回键被点击 onNavigationBarButtonTap 导航栏按钮被点击

5.表单

button 按钮
type 类型（primary主要 warn警告 default 默认） size=“mini”
disabled 是否可用

input
value值
v-model对表单双向绑定
@change=“$event.detail.value”
placeholder 提示文本

picker
mode 模式
time时间 date 日期 region地区
value值
@change=“$event.detail.value”

slider 滑块
value 值 max 最大 min 最小
@change=“$event.detail.value”

四 . 路由

·路由组件
navigator 导航
url 跳转页面的地址
open-type 打开类型
( navigate跳转
redirect重定向（当前页面不留历史记录）
navigateBack返回
relauch 重启
switchTab 跳转底部栏 )

路由传参
传递 url:path?name=mumu&age=18
接收
onLoad(option){} option的值{name:“mumu”,age:18}

路由api
uni.navigateTo({url}) 跳转
uni.redirectTo({url}) 重定向
uni.navigateBack() 返回
uni.switchTab() 底部栏切换
uni.reLaunch() 重启

路由配置 tabBar
color
selectedcolor
list
(pagePath iconPath selectedIconPath text )

获取当前页面 getApp
01 在App.vue 定义globalData:{num:100}
02 要使用的页面获取app
var app = getApp()
03获取globalData的值
onShow(){ this.num = app.globalData.num }
04 更新globalData值
addNum(){ app.globalData.num++; this.num = app.globalData.num }

获取页面栈 getCurrentPages
var page = getCurrentPages();
获取当前的页面栈，是一个数组（1-5）

uni.navigateBack({delta:page.length}) page[page.length-1] 获取当前页面的信息（不要去修改）

五. 条件编译

为了让不同的平台展示不同特性与功能，在小程序，H5，App中可以显示不同的内容
模板条件编译
格式  内容 
条件 APP App端 H5 网页 MP 小程序(MP-WEIXIN 微信小程序
css条件编译（这里设置了APP的颜色，大家可以仿照写其他端的）

/* #ifdef APP */
>    .active{color:red}
>    /* #endif */

js条件编译（这里设置了APP的提示框，大家可以仿照写其他端的）

	// #ifdef APP
	uni.showModal({ title:"你好App用户" }) 
	// #endif
>

条件配置在 pages.json中配置（可以让某个页面只在某端实现，某端特有，其他端看不到）

	“style”:{   
	"h5":{
>       "titleNView":{
>           "titleText":"我是H5"
>        }   },  
>   "app-plus": {
>       "titleNView":false //隐藏导航栏   } } 
>       		
>       // #ifdef MP-WEIXIN	|| APP	 { 	"path":"pages/condition/we", 	
>       "style":{ 		
>       "navigationBarTitleText":
> "小程序专有页面" 	} }, 
> // #endif