解釋

由dcloud 公司開發的 多端融合框架

1次開發 多端運行

競品：

apiCloud ，appCan ，Codova

技術架構

Vue語法+小程序的api

端Hybrid混合開發

App端

HTML+
nvue（原生view）
native.js(js原生溝通的橋梁)
weex
內置ios/安卓的模塊使用

H5端

h5專用api

各種小程序

（微信為主）

準備工具

Hbuilderx （開發與編譯工具）
微信小程序開發工具（微信小程序預覽測試）

安卓模擬器/真機

運行app

新建項目

運行多端

H5

小程序

1 打開開發工具的服務端口

2 HBuilderx配置 微信開發工具的地址

3 配置微信小程序id

4 運行到微信小程序

App

1 打開模擬器或者手機

2 配置模擬器的端口

夜神模擬器端口號：62001

海馬模擬器端口號：26944

逍遙模擬器端口號：21503

MuMu模擬器端口號：7555

天天模擬器端口號：6555

3 運行到模擬器

注意項

hbuilder可能需要下載對應的插件
運行到安卓模擬器，有視圖差別
運行可以需要一定的詩句

Vue語法

模板語法

文本渲染

{{表達式}}

v-text=“表達式”

表達式

簡單的js運算 {{2+3}}
js方法調用{{title.length}}{{title.split(“”).reverse().join(“”)}}
3元運算符{{title.length>15?‘長度很長’:‘字少事大’}}

v-html 富文本

條件渲染

v-if
v-else-if
v-else
v-show
通過三元運算符

列表選項

字符串，數字，列表，對象都可以遍歷
{{index+1}} {{item}}
一定要保證兄弟元素間的key值是唯一

屬性綁定

#### 表單綁定 默認 :value="單向綁定" input v-model=“雙向綁定” @change=“$event.detail.value” 事件，事件的值$event.detail.value #### 事件 ##### 事件綁定：

$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
}

響應方法

uni-app頁面

新建頁面

頁面配置pages.json

globalStyle全局樣式

默認頁面的樣式會應用全局樣式
頁面寫了style 配置，那么用的配置覆蓋全局的配置

pages 頁面

path頁面路徑
style 頁面樣式

vue選項

data數據
methods方法
computed計算
watch監聽
directive指令
filter過濾

uni-app的生命周期

Vue的生命周期

創建

beforeCreate

created

可以使用this，沒有dom
作用：

初始數據

注冊監聽事件

開啟定時器

ajax請求

掛載

beforeMount

mounted

可以操作dom（節點）
作用：

操作dom

ajax請求

更新

beforeUpdate

updated

卸載

beforeDestroy

作用：

移除事件監聽

移除停止定時器

destroyed

小程序的生命周期

onLoad加載

能夠獲取頁面的參數
開啟ajax，定時器，事件監聽
像vue的created

onShow顯示

播放媒體

onReady準備

獲取節點信息
像vue的mounted

onHide 后臺運行

停止播放媒體

onUnload 卸載

停止事件監聽與定時器

小程序的全局方法

onPullDownRefresh 下拉刷新

onReachBottom()觸底更新

onShareAppMessage右上角分享

onPageScroll頁面滾動

onShareTimeline分享到朋友圈

app的全局方法

onBackPress手機的返回鍵被點擊

onNavigationBarButtonTap導航欄按鈕被點擊

組件表單

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”

全局vuex

路由

路由組件

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

colorselectedcolorlistpagePathiconPathselectedIconPathtext

獲取當前頁面getApp

1 在App.vue定義globalData:{num:100}2 要使用的頁面獲取appvar app = getApp()03獲取globalData的值onShow(){this.num = app.globalData.num}4 更新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] 獲取當前頁面的信息（不要去修改）

條件編譯

目的:不同的平臺展示不同特性與功能

模板條件編譯

格式<!-- #ifdef H5 -->內容<!-- #endif -->條件APPApp端H5網頁MP小程序MP-WEIXIN微信小程序

css條件編譯

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

js條件編譯

// #ifdef APP-PLUSuni.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

總結

以上是生活随笔為你收集整理的uni 笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。