前言：掌握HTML+CSS+JavaScript爷光，了解 Vue.js+原生微信程序更容易上手
一峻贮、前言
uni-app是基于通用的前端技術(shù)棧席怪，采用vue語法+微信小程序api，無額外學習成本纤控。一套代碼挂捻，多端發(fā)布(開發(fā)者編寫一套代碼，可發(fā)布到ios嚼黔、android细层、H5以及各種小程序等多個平臺)。
即使不跨端唬涧，uni-app也是更好的小程序開發(fā)框架
好處：減少學習成本(個人)疫赎，減少開發(fā)成本(公司)
二、 搭建開發(fā)環(huán)境
1碎节、前期準備：安裝編輯器HbuilderX(HBuilderX是通用的前端開發(fā)工具捧搞，但為了uni-app做了特別強化)+微信開發(fā)者工具(開發(fā)微信小程序必備，建議下載穩(wěn)定版)
2狮荔、創(chuàng)建項目：安裝完成后打開HBuilderX胎撇，在窗口欄找到：文件=>新建=>項目
3、運行殖氏，在窗口欄找到：運行晚树，然后根據(jù)需求運行到對應平臺即可
注意：
1、若是運行到微信開發(fā)者工具雅采，第一次運行時需要配置小程序ide的相關(guān)路徑才能運行成功爵憎。（找到微信開發(fā)者工具慨亲，打開文件所在位置，復制路徑）
2宝鼓、若路徑已配置好刑棵，第一次運行還報錯，可以打開端口號:設(shè)置-安全設(shè)置-端口號（開啟）
三愚铡、uni-app核心知識點：
1蛉签、開發(fā)規(guī)范：頁面文件遵循Vue單文件組件（SFC）規(guī)范。
2沥寥、組件標簽靠近小程序規(guī)范碍舍。
3、接口能力（JS API）靠近微信小程序規(guī)范营曼。
接口能力（JS API）靠近微信小程序規(guī)范乒验，但需要把前綴wx換成uni，vue開發(fā)不可以直接api獲取手機原生功能蒂阱，而uni-app可以直接使用uni前綴的api獲取锻全，如獲取當前手機的網(wǎng)絡(luò)類型：
4、數(shù)據(jù)綁定及事件處理同Vue.js規(guī)范录煤，同時補充了App及頁面的生命周期鳄厌。
5、為兼容多端運行妈踊，建議使用flex布局了嚎。
uni-app特色：
1、條件編譯：
2廊营、App端的Nvue（native vue）開發(fā)
Nvue內(nèi)置了weex的渲染引擎歪泳，在Nvue中我們既可以使用weex的組件和api，也可以使用uni-app的組件和api露筒。
3呐伞、HTML5+引擎
HTML5+引擎：可以幫助我們在app端直接調(diào)用原生插件，含大量的api方法慎式。（只能在App端使用伶氢，在H5和微信小程序端不可用。）
4瘪吏、uni-app中的數(shù)據(jù)綁定
uni-app中的數(shù)據(jù)綁定絕大部分與Vue一致
<template>
<!-- 1癣防、模版語法 -->
<!-- 2、數(shù)據(jù)綁定 -->
<!-- 3掌眠、條件判斷 :判斷某一塊元素是否需要渲染-->
<!-- 4蕾盯、列表渲染 :通過一個數(shù)組來渲染列表-->
<!-- 5、基礎(chǔ)組件的使用 :官網(wǎng)=>組件-->
<!-- 6蓝丙、自定義組件的使用（簡單使用） -->
<!-- 7级遭、基礎(chǔ)api的用法 -->
<!-- 8香嗓、條件編譯 -->
<!-- 9、頁面布局 -->
<view>
<!-- <view class="content" :class="className" @click="open"> -->
<view class="content" v-bind:class="className" v-on:click="open">
{{title}}
</view>
<!-- <view>{{show?'條件判斷為真時顯示該內(nèi)容111':'條件判斷為假時顯示該內(nèi)容000'}}</view> -->
<view v-if="show">條件判斷為真時顯示該內(nèi)容111</view>
<view v-else>條件判斷為假時顯示該內(nèi)容000</view>
<button type="default" @click="show=!show">切換內(nèi)容</button>
<view>
<view v-for="(item,index) in arr">{{item}}-{{index}}</view>
<view v-for="(item,value) in arr1">{{item}}-{{value}}</view>
</view>
<view hover-class="active1"> <!-- div -->
<text>11111</text> <!-- span -->
</view>
<!-- 自定義組件 -->
<btn color="blue" @change='change'>插入組件中插槽的內(nèi)容</btn>
<movable-area style="height:100px;width: 100px;border: 1px solid red;">
<movable-view>1212</movable-view>
</movable-area>
</view>
</template>
<script>
import btn from '@/componment/btn/btn.vue'
export default {
components:{
btn
},
data() {//初始化數(shù)據(jù)
return {
title: '我是一個初始化值',
className: 'active',
show: false,
arr:['uni-app','vue','html'],
arr1:{
key1:'value1',
key2:'value2',
key3:'value3'
}
}
},
onLoad() {
// 兩秒之后將tiele的值變?yōu)椤癶ello uni-app”
setTimeout(()=>{
/* 小程序“this.setData({
title:'hello uni-app',
}) */
this.title = 'hello uni-app';
},2000)
},
methods: {//自定義的事件装畅、方法
open () {
this.title = '啊啊啊我被點擊了'
},
change (e) {
console.log('我是當前頁面的事件，我返回了'+e);
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.active1{
border: 1px solid red;
}
</style>
5沧烈、condition啟動模式
condition啟動模式配置掠兄，僅在開發(fā)期間生效，用于模擬直達頁面的場景锌雀。如：小程序轉(zhuǎn)發(fā)后蚂夕，用戶點擊打開的頁面。
6腋逆、組件
uniapp 對比 vue
view ------ div
text ------ span
image ------ img
其他標簽基本一致婿牍，詳情查看官網(wǎng)
7、nuiapp中樣式以及sass的使用
1惩歉、rpx是響應式的px,是一種根據(jù)屏幕寬度自適應的動態(tài)單位等脂。一750寬的屏幕為基準，750rpx恰好為屏幕寬度撑蚌。屏幕越寬上遥，rpx的實際效果會等比放大。
2争涌、使用@import語句可以導入外聯(lián)樣式表粉楚。
3、支持常用的選擇器(element亮垫、class模软、id等），注意：uni-app中不能使用通配符選擇器*.
4饮潦、在App.vue中的樣式一般為全局樣式燃异。
5、uni-app支持使用的字體圖標害晦，使用方式與普通web項目相同特铝，需注意：
①字體文件小于40kb，uni-app會自動將其轉(zhuǎn)化為base64格式壹瘟。
②字體文件大于40kb鲫剿，需要開發(fā)者自己轉(zhuǎn)換，否則使用將不生效稻轨。
③字體文件的引用路徑推薦使用~@開頭的絕對路徑：
@font-face{
font-family:test1-icon;
src:usl('~@/static/iconfont.ttf');
}
6灵莲、scss/sass的使用：工具-插件安裝-找到之后直接安裝
8、uni-app中的數(shù)據(jù)綁定/事件綁定：與vue一模一樣
9殴俱、uni-app的生命周期
生命周期：一個對象從創(chuàng)建政冻、運行到銷毀的整個過程枚抵。
生命周期函數(shù)：在生命周期的每個階段都會伴隨著對應函數(shù)的觸發(fā)，這些函數(shù)就稱為生命周期函數(shù)明场。
uni-app支持如下應用生命周期函數(shù)：
uni-app支持的頁面生命周期函數(shù)：
