uniapp新手入门

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

一. 什么是uniapp

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

二. uniapp应用

1.准备工具

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

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

3. uniapp项目组成

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

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

4. 如何运行到多端

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

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

3. 微信小程序
   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”

6.组件传参

自定义组件使用easycom方式，使用方式较vue简便了很多。组件定义完以后，可以不用import 导入，不用在components中注册，直接使用。

组件传参
1. 父组件向子组件传参，通过属性的方式进行传递
<steper :value="d1"></steper>，
2. 子组件通过props来接收
props:{ value:{ type:Number, default:1 ​} ​}
3. 子组件向父组件传参，
子组件通过this.$emit("事件名",传递的参数)

详细文章请看往期传送门
uniapp基础
uniapp进阶