一陆爽、簡(jiǎn)單介紹Vue什往、uni-app、微信小程序三者之間的聯(lián)系
uni-app和Vue的關(guān)系
使用Vue.js開(kāi)發(fā)慌闭；在發(fā)布到H5時(shí)别威，支持所有的vue的語(yǔ)法；發(fā)布到App和小程序時(shí)驴剔，不支持部分vue語(yǔ)法(vue-router省古，需要dom操作的第三方插件、組件)丧失。
uni-app和小程序的關(guān)系
組件標(biāo)簽靠近小程序規(guī)范豺妓；接口能力（JS API）靠近微信小程序規(guī)范；擁有完整的小程序生命周期布讹。
web開(kāi)發(fā)與微信小程序的差別.png
二琳拭、入門(mén)微信小程序簡(jiǎn)單介紹
下載安裝微信開(kāi)發(fā)者工具，第一次打開(kāi)使用微信掃一掃即可描验，
創(chuàng)建項(xiàng)目：
創(chuàng)建微信小程序項(xiàng)目.png
微信小程序項(xiàng)目目錄結(jié)構(gòu)說(shuō)明：
微信小程序項(xiàng)目目錄結(jié)構(gòu)說(shuō)明.png
image.png
微信小程序生命周期：
image.png
三臀栈、uni-app簡(jiǎn)單介紹
uni-app 核心知識(shí)點(diǎn).png
uni-app特色：
1、條件編譯：
條件編譯.png
2挠乳、App端的Nvue（native vue）開(kāi)發(fā)
Nvue內(nèi)置了weex的渲染引擎权薯，在Nvue中我們既可以使用weex的組件和api，也可以使用uni-app的組件和api睡扬。
3盟蚣、HTML5+引擎
HTML5+引擎：可以幫助我們?cè)赼pp端直接調(diào)用原生插件，含大量的api方法卖怜。（只能在App端使用屎开，在H5和微信小程序端不可用。）
uni-app核心知識(shí)點(diǎn)：
1马靠、開(kāi)發(fā)規(guī)范：頁(yè)面文件遵循Vue單文件組件（SFC）規(guī)范奄抽。
image.png
2蔼两、組件標(biāo)簽靠近小程序規(guī)范。
uni開(kāi)發(fā)與普通web開(kāi)發(fā)的區(qū)別.png
3逞度、接口能力（JS API）靠近微信小程序規(guī)范额划。
vue開(kāi)發(fā)不可以直接api獲取手機(jī)原生功能，而uni-app可以直接使用uni前綴的api獲取档泽，如獲取當(dāng)前手機(jī)的網(wǎng)絡(luò)類(lèi)型：
image.png
4俊戳、數(shù)據(jù)綁定及事件處理同Vue.js規(guī)范。
5馆匿、為兼容多端運(yùn)行抑胎，建議使用flex布局。
uni-app語(yǔ)法（絕大部分和Vue.js一樣）
<template>
<!-- 1渐北、模版語(yǔ)法 -->
<!-- 2阿逃、數(shù)據(jù)綁定 -->
<!-- 3、條件判斷 :判斷某一塊元素是否需要渲染-->
<!-- 4赃蛛、列表渲染 :通過(guò)一個(gè)數(shù)組來(lái)渲染列表-->
<!-- 5恃锉、基礎(chǔ)組件的使用 :官網(wǎng)=>組件-->
<!-- 6、自定義組件的使用（簡(jiǎn)單使用） -->
<!-- 7焊虏、基礎(chǔ)api的用法 -->
<!-- 8、條件編譯 -->
<!-- 9秕磷、頁(yè)面布局 -->
<view>
<!-- <view class="content" :class="className" @click="open"> -->
<view class="content" v-bind:class="className" v-on:click="open">
{{title}}
</view>
<!-- <view>{{show?'條件判斷為真時(shí)顯示該內(nèi)容111':'條件判斷為假時(shí)顯示該內(nèi)容000'}}</view> -->
<view v-if="show">條件判斷為真時(shí)顯示該內(nèi)容111</view>
<view v-else>條件判斷為假時(shí)顯示該內(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: '我是一個(gè)初始化值',
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 = '啊啊啊我被點(diǎn)擊了'
},
change (e) {
console.log('我是當(dāng)前頁(yè)面的事件，我返回了'+e);
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.active1{
border: 1px solid red;
}
</style>
在進(jìn)行簡(jiǎn)單的條件判斷時(shí)澎嚣，三元運(yùn)算真的香^^
pages.json文件解析：各種配置
分包配置：
/* 以后項(xiàng)目體積過(guò)大了疏尿，這里的作用就體現(xiàn)出來(lái)了，
你的pages目錄下就放下面的tabbar的4個(gè)頁(yè)面就好 易桃，
其他的子模塊就按照我這樣進(jìn)行分包處理*/
"subPackages": [{
"root": "subIndex",
"pages": [{
"path": "index/index",
"style": {
"navigationBarTitleText": "分包"
}
}]
}]
...
...
...
推薦項(xiàng)目目錄擴(kuò)充：
King.png
（正常創(chuàng)建uni-app項(xiàng)目后褥琐，添加上圖所示的原項(xiàng)目沒(méi)有的文件）（組件放components文件下，要進(jìn)行頁(yè)面跳轉(zhuǎn)的頁(yè)面放到pages目錄下晤郑，且要在pages.json文件下進(jìn)行相應(yīng)的配置）
image.png
