Ⅰ uniapp 獲取當前頁面路徑
uniapp獲取當前頁面路徑
方式一:
方式二:
用官方已經掛在的 $mp 變數獲取
var pages = getCurrentPages() // 獲取棧實例
pages是一個數組對象,每個對象裡面其實就是已經打開的頁面的對象,可以根據pages.length查看跳轉級數
應用場景(返回固定頁面):
如果A為根頁面,直接使用
其中A頁面不是根頁面
如圖
若從A頁面-->B頁面-->D頁面,從D返回A,只需delta為 2,即
若從A頁面-->C頁面-->F頁面-->G頁面-->D頁面,從D返回A,需要設置delta: 4,即
使用var pages = getCurrentPages() // 獲取所有打開頁面,
若A為第三級頁面(即從根頁面到A頁面跳轉兩次),計算返回級數
Ⅱ uni-app 代碼
一個uni-app工程,默認包含如下目錄及文件:
┌─common 用於存放一些通用的 js/css/less/scss
│─cloudfunctions 雲函數目錄(阿里雲為aliyun,騰訊雲為tcb)
│─ components 符合vue組件規范的uni-app組件目錄
│ └─comp-a.vue 可復用的a組件
├─hybrid 存放用於webview的本地網頁的目錄, 詳見
├─platforms 存放各平台專用頁面的目錄, 詳見
│ ├─ app-plus app
│ ├─ h5 h5
│ ├─ mp-weixin 微信小程序
├─ pages 業務頁面文件存放的目錄
│ ├─index
│ └─index.vue index頁面
├─ static 存放靜態資源(如圖片、視頻等)的目錄, 打包時其內容直接拷貝而不編譯
├─wxcomponents 存放小程序組件的目錄, 詳見
│ └──custom 微信小程序自定義組件
│ ├─index.js
│ ├─index.wxml
│ ├─index.json
│ └─index.wxss
├─ main.js Vue初始化入口文件
├─ App.vue 應用配置,用來配置App全局樣式以及監聽 應用生命周期
├─ manifest.json 配置應用名稱、appid、logo、版本等打包信息, 詳見
└─ pages.json 配置頁面路由、導航條、選項卡等頁面類信息, 詳見
運行在視圖層的js,避免邏輯層和渲染層交互通信折損。
僅支持編譯到微信小程序、H5、app-vue
nvue可用bindingx代替
運行在視圖層的js,避免邏輯層和渲染層交互通信折損。
性能比WXS更好。
僅支持編譯到 app-vue 和 H5
在視圖層操作dom,因此可接觸到dom、bom API,可使用f2、echarts、threejs庫,但不可直接訪問邏輯層數據,因此不可以使用 uni 相關介面(如:uni.request)
基於 weex 改進的原生渲染引擎,提供了原生渲染能力。
vue頁面使用webview渲染;nvue頁面使用原生渲染。一個項目中兩種頁面可以混用。
僅可在App.vue中監聽,在其它頁面監聽無效。
onLaunch 、onShow、onHide 、onError 等
onLoad 、onShow 、onReady 、onHide 、onUnload 、onPullDownRefresh 、onReachBottom 、onBackPress、onPageScroll等
同vue組件生命周期
beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed
通過pages.json配置,通過 navigator 組件或調用 API 跳轉,類似小程序
可以在 vue-config.js 中配置更多環境
vue頁面是webview渲染的、app端的nvue頁面是原生渲染的。
為保證通用,應使用flex布局
rpx和px是通用的,但 rem、vw、vh、百分比等在nvue中不支持
rpx不支持動態橫豎屏切換計算,使用rpx建議鎖定屏幕方向
App端,在 pages.json 里的 titleNView 或頁面里寫的 plus api 中涉及的單位,只支持 px,不支持 rpx
沒有 * 選擇器
page 代替了 body 選擇器
App.vue 中的樣式為全局樣式,nvue頁面不支持全局樣式
不支持 / 的絕對路徑
引入字體圖標請參考, 字體圖標
Ⅲ uniapp 中api 獲取的數據怎樣讀取出來
根據截圖推測,你可能是剛接觸開發吧。
看樣子你的服務端的返回是直接print_r的,這個返回是列印數組內容的。
你可以使用json_encode返回json數據,然後就可以在uniap的js中console列印出來數據了,這樣就可以在小程序中的控制台看到返回了
Ⅳ uniapp中如何獲取網頁地址參數
uniapp 中要獲取地址 http://xxxxxxx/#/pages/my/index ?id=124 的參數
1:獲取本頁面的地址
let local = location.href;
2:獲取參數
let payment_id = this.getParam(local, "payment_id");
//獲取url中的參數
getParam(path, name) {
var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
if (reg.test(path))
return unescape(RegExp.$2.replace(/\+/g, " "));
return "";
}
Ⅳ uniapp開發的時候別人想要訪問怎麼辦
uniapp開發的時候別人想要訪問怎麼辦:
1.第一種解決方法:
直接創建一個vue.config.js文件,並在裡面配置devServer,直接上代碼,重啟跑項目。
2.第二種解決方法:
在src目錄下找到mainfest.json文件,修改該文件,點擊「源碼視圖」看到h5,介面調用。
3.還有一種無需配置:
使用HBuilder X 內置瀏覽器,不存在跨域問題,推薦使用
Ⅵ uniapp如何獲取網頁源碼
通過使用腳手架創建的項目可以更清晰的看到它的架構,也可以直接閱讀打包編譯的源碼。
第一點:首先選擇免費源碼,免費網站源碼有很多網站都能下載到,這類免費代碼也是屬於測試過的,可以選擇下載。
第二點:免費源碼的廣告文件刪除,免費源碼下載後,要進行一次清理,首先做的就是刪除裡面的廣告文件,比如一些廣告快捷鍵鏈接等。
第三點:免費源碼的修改工作。免費網站源碼盡量選擇網站下載站自己本身做個測試的進行下載,且需要有一定的修改能力。
Ⅶ 踩坑記-uniapp+uView(HBuilder)
Q:方案1:有雙搜索圖標的原因是,多餘的那個灰色搜索圖標是移動端解析 input type='search' 時,自帶的圖標樣式。故只需要將input search類型改成常規text類型即可。找到search組件的源碼,將 comfirm-type="search" 去掉即可。如下圖:
方案2:通過控制編譯後的原生dom元素來去掉多餘的搜索圖標。例如:
Ⅷ uniapp自學筆記(三)動態獲取數據
ok,我們目前已經完成了首頁,如果我們只是為了製作一個文章系統的話,首頁+列表頁+詳情頁已經足夠滿足我們的使用了。
所以我們開始在pages中創建這倆頁面。
現在pages.json路由中增加這倆:
前面我們首頁中的icon列表是一個靜態頁面頁,我們需要連接才能跳轉到列表頁面。
這里我們需要用到uniapp內置的跳轉方法:
這里我們先把頁面之間的跳轉關系完成,完成後,我們會在頁面之間傳遞參數,再通過ajax完成動態數據交互!
如法炮製!我們把詳情頁面也完成:
這里涉及到了一個我們非常熟悉的知識:生命周期,我們需要在生命周期onload的時候,把數據注入到頁面中。
所謂生命周期就是onload,onready之類的那一套東西,這里如果細說的話會非常的復雜。因為onshow,onhide在不同的.vue中,這里指APP.vue和子頁面.vue中又稍微有所不同。
這里我整理了一個列表,感興趣的同學可以研究研究。不願意研究,其實你光掌握一個onload也足夠你應對大多數情況了。
學會使用生命周期以後,我們接下來要進入ajax通過埠查詢數據,然後渲染到頁面上。
uniapp提供一個uni.request方法,幫助我們獲取ajax的數據,請看例子:
uniapp的ajax使用方法就是小程序和vue的結合。這里需要注意的是,uniapp在頁面跳轉的時候,可以發送一個參數,在接收的頁面中通過options.xx來接收。注意看上面的例子,是在onload生命周期中接收的,options就是onload的一個參數。
跳轉的時候,可以發現id就是拼接進去的。
這里可能會遇到一個問題,那就是你從本地請求的埠可能會產生跨域的問題。
這里推薦兩種解決方法:第一個,使用xhbuilder內置的瀏覽器
第二個,如果你用的是chrome瀏覽器,可以安裝跨域 插件 來解決這個問題。
這個插件的名字是:Allow-Control-Allow-Origin。如果你打不開chrome插件市場的話,你可能要想辦法翻牆一下。
這里還有一個問題,那就是,我們頁面頂部的title,是在路由pages.json中設置的,但是我們的數據是動態的。
當我們點擊了某一項的時候,需要動態的修改一下標題,這個時候需要使用uniapp提供的setNavigationBarTitle方法。
上面遺漏了一個知識,就是當我們通過ajax獲取到了內容以後,如果這個內容是字元串還好,但是它有可能是一個富文本,就是我們常說的內容詳情。
如果內容是一段html的話,我們就不能直接放到項目中,那樣是無法解析出來的。這個時候我們需要使用rich-text標簽。
這樣就可以正確解析出內容了。
到目前為止,我們已經完成了首頁, 列表頁和詳情頁。項目的基礎功能已經搭建完畢了,接下來,我們將會進入其他強大功能的學習。
因為最近有一些忙,uniapp的教程可能會暫停一段時間,這一段時期我會給大家推薦一些輕松的教程或者龍哥故事匯的一些文章,希望大家見諒哈。
Ⅸ uniapp使用websocket怎麼用有演示代碼嗎
uniapp是支持使用websocket的,具體怎麼使用你可以看下uniapp官方的開發文檔。
要測試websocket,你得學會自己搭建websocket伺服器。
如果嫌麻煩,可以試試第三方的websocket框架。
我近期在uniapp插件市場中找到一款叫做GoEasy的插件,使用下來整體效果不錯,你也可以試試。
他們有提供相關的demo,結合demo和開發文檔一起看,上手很快的。
1、如果你只是做簡單的websocket消息推送,可以看這個hello world的demo源碼:網頁鏈接
2、如果你是做即時通訊/聊天類的產品,可以看看這個聊天的demo源碼:網頁鏈接
希望以上內容能幫到你,有用記得採納哦。
Ⅹ uniapp源碼怎麼改
第一步:找到文件
第二步:看一下源碼復不復雜,復雜的話放棄(也不是不行) 看到了嗎,核心代碼寫的就是一個text標簽,也沒有插槽,所以不能自定義擴展組件。所以只要在這里改一下就好了。
第三步:修改思路主要是是利用作用域插槽傳值 總結就是利用作用域插槽,不想自定義的時候用默認內容,想自定義的時候利用作用域把值再傳回來 核心代碼粘一下 //修改