uni-app的创建与使用--1

一、uin-app简介

1. 由dcloud 公司开发的 多端融合框架
2. 1次开发 多端运行
3. 竞品：apiCloud ，appCan ，Codova
4. 技术架构
   Vue语法+小程序的api
5. 多端 Hybrid混合开发

6.  1.App端
    	HTML+
    	nvue（原生view）
    	native.js(js原生沟通的桥梁)
    	weex
    	内置ios/安卓的模块使用
    2.H5端
    	h5专用api
    3.各种小程序（微信为主）
   

二、准备工具

1. Hbuilderx （开发与编译工具）
2. 微信小程序开发工具（微信小程序预览测试）
3. 安卓模拟器/真机
4. 运行app

三、界面

四、新建项目

五、运行多端

1.H5

2.小程序

01 打开开发工具的服务端口

02 HBuilderx配置 微信开发工具的地址

03 配置微信小程序id

04 运行到微信小程序

3.App

01 打开模拟器或者手机

02 配置模拟器的端口

1. app端接口

    夜神模拟器端口号：62001 
    海马模拟器端口号：26944
    逍遥模拟器端口号：21503
    MuMu模拟器端口号：7555 
    天天模拟器端口号：6555
   

03 运行到模拟器

4.注意项

1. hbuilder可能需要下载对应的插件
2. 运行到安卓模拟器，有视图差别
3. 运行可以需要一定的诗句

六、Vue语法

1.模板语法

1. 文本渲染

    1）{{表达式}}
    2）v-text=“表达式”
    3）表达式
    	简单的js运算
    		{{2+3}}
    	js方法调用
    		{{title.length}}
    		{{title.split("").reverse().join("")}}
    	3元运算符
    		<view>{{title.length>15?'长度很长':'字少事大'}}</view>
    4）v-html 富文本
   

2. 条件渲染

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

3. 列表选项

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

4. 属性绑定

   <button v-bind:disabled=“true”>
   <button :disabled="true">
   

5. 表单绑定

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

6. 事件

   事件绑定：  <view v-on:click="响应"
   简写绑定：<view @click="事件响应"
   事件行内处理
   	<view @click="num++"
   事件响应函数(函数在methods定义)
   	<view @click="say"
   	<view @click="say"
   事件传参
   	不写参数
   	@click="say"
   	等同于 
   	@click=“say()”
   	等同于
   	@click=“say($event)”
   	$event 是一个固定写法 代表事件对象
   	@click=“doit(str)”
   	doit(str="你好"){
   		uni.showModal({title:str})
   	}
   事件对象 $event/e
   	
   		function say(e){
   	}
   	target目标对象
   	dataSet 组件传参
   	<view :data-title="title" @click="say">
   	function say(e){
    		 e.target.dataset.title
   	}
   

   2. uni-app页面

   1. 新建页面

   2. 页面配置 pages.json

      globalStyle全局样式
      默认页面的样式会应用全局样式页面写了style 配置，那么用的配置覆盖全局的配置
      
      pages页面
      	path页面路径
      	style 页面样式
      

   3.vue选项

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

   4.uni-app的生命周期

   1. Vue的生命周期

      创建

       beforeCreate
       created
       	可以使用this，没有dom
       	作用：
       	1.  初始数据
       	2.  注册监听事件
       	3. 开启定时器
       	4. ajax请求
      

      挂载

       beforeMount
       mounted
       	可以操作dom（节点）
       	作用：
       1.  操作dom
       2. ajax请求
      

      更新

       beforeUpdate
       updated
      

      卸载

       beforeDestroy
       	作用：
       1. 移除事件监听
       2. 移除停止定时器
       destroyed
      

   2. 小程序的生命周期
      onLoad加载

       能够获取页面的参数
       开启ajax，定时器，事件监听
       像vue的created
      

      onShow显示

       播放媒体
      

      onReady准备

       获取节点信息
       像vue的mounted
      

      onHide 后台运行

       停止播放媒体
      

      onUnload 卸载

       停止事件监听与定时器
      

   3. 小程序的全局方法

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

   4. app的全局方法

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

7. 组件

   表单
   button 按钮

    type
    	primary主要
    	warn警告
    	default 默认
    	size="mini"
    	disabled 是否可用
    input
    	value值
    	v-model对表单双向绑定
    	@change="$event.detail.value"
    	placeholder 提示文本
    picker
    	mode模式
    	time时间
    	date 日期
    	region地区
    	日期
    		start="09:01" 
    		end="21:01"
    	value值
    	@change="$event.detail.value"
    slider滑块
    	value 值
    	max 最大
    	min 最小
    	@change="$event.detail.value"