⑴ 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 頁面跳轉傳值和接收
首先介紹最原始的跳轉方法，類似於html中的 a 標簽，不過在uniapp中需要將 a 標簽換成
<navigator url='跳轉的地址'>……</navigator>
下面我們來重點介紹下跳轉傳值的方法
<view @tap="toOpportnity(item.id)">轉商機</view>；
寫一個onLoad函數
對象傳參的接收方法
單個參數的接收，這里使用id來進行介紹
首先要把傳遞過來的id進行賦值
請求介面，介面的url地址後面要加上傳遞過來的id【 /${this.id}/ 】
完整步驟如下：
對象傳參報錯解決方案（詳細請看本篇文章： https://www.cnblogs.com/sxdpanda/p/13304425.html ）
GET : 請求頁面， 並返回頁面內容【問伺服器要數據】。
POST : 大多用於提交表單或上傳文件，數據包含在請求體中【把數據提交給伺服器】。
HEAD : 類似於GET請求，只不過返回的響應中沒有具體的內容，用於獲取報頭。
PUT : 從客戶端向伺服器傳送的數據取代指定文檔中的內容【修改伺服器上的數據】。
DELETE : 請求伺服器刪除指定的頁面。
CONNECT : 把伺服器當作跳板，讓伺服器代替客戶端訪問其他頁面。
OPTIONS : 允許客戶端查看伺服器的性能。
TRACE : 回顯伺服器收到的請求，主要用於測試或診斷。
⑶ uniapp上傳圖片至伺服器，獲得在線圖片鏈接預覽（實戰）
功能需求：
前端選擇本地文件，將選擇好的文件顯示在界面上進行預覽，可同時選擇四張進行預覽。
思路如下：
前端選擇本地的png、jpg、等格式的圖片，將圖片以二進制的形式傳到後端伺服器，後端對二進制圖片進行處理，返回給前端一個伺服器鏈接在線圖片，在瀏覽器就可以打開鏈接訪問的那種。然後前端將這個圖片鏈接渲染在頁面進行預覽。
首先
我們看一下uniapp的官方文檔：
https://uniapp.dcloud.io/api/media/image?id=chooseimage
大概是這樣的
先寫一個模擬的demo
1：首先我是是用了colorUI的框架，在項目裡面引入
在page底下的vue文件引入
這樣一來，就不需要寫什麼樣式了，直接使用寫好的就行了。
效果是這樣的
每次選完圖片之後顯示在頁面上，我這里設置了最多可以選擇四張，圖片鏈接使用了臨時的blob，接下來就要使用後端小夥伴給的介面，將自己本地的二進制文件傳給他了。
在 chooseImage 選擇好圖片之後，寫一個成功的回調函數，在回到函數裡面添加一個圖片上傳的方法uploadFile，在方法裡面添加url，等參數。
若是請求成功
則返回一個圖片鏈接
添加介面之後 的，demo如下：
⑷ uni-app 入門到精通 （二）
18 年時候有幸接觸到 uniapp , 寫了一篇 《uni-app 入門到精通》 ，由於一些原因，該方案並沒有執行，該項目一系列文章也就沒有再寫下去，所以遭受到了許多人評論的吐槽，到如今公司項目的需求又要根據 uniapp 寫 H5 嵌入到 app 中，所以想根據項目實際開發分享一下，有興趣的夥伴可以參考和吐槽。
這一篇文章主要分享一下內容
uniapp 模板項目有兩種初始化方式
由於無法舍棄 VSCode ，我們採用 vue-cli 來初始化項目， HBuilderX 大家可以參照官方文檔
這種方式是可以通過 vue 腳手架命令指定模板，這個是 dcloudio 的官方提供模板
我們選擇默認模板即可，
成功後我們執行
打開瀏覽器地址，直接運行即可。
一般剛接觸前端的小夥伴可能會對 postcss 不太了解，這里簡單介紹一下，
當然 PostCSS 具體使用是需要引入一些插件的，例如常用的是 autoprefixer postcss-preset-env 等, 具體如何使用大家可以自行參考資料，畢竟這塊知識還是挺多的就不具體展開解釋了。
通常我們在寫移動端時候需要做的是頁面適配方案的確定， uni-app 支持的通用 css 單位包括 px、rpx ， 之前的 upx 方案已經被廢棄掉，官方解釋是目前市面上已經基本上支持了微信的 rpx 方案，所以 upx 中轉方案已經意義不大了，不過還可以繼續使用，不過已經不再推薦。
rpx 之初是由微信小程序提出一種方案，即根據寬度來進行適配以 750 寬屏幕為基準， 750rpx 恰好為屏幕寬度, uni-app 規定屏幕基準寬度 750rpx 。所以說如果你們的UI 設計以 750*1334 iphone 6/6s 為基準設計的話，你只需要將屏幕上 px 寫為 rpx 即可，不用做任何換算，如果不是的話，你就需要做如下換算：
uniapp 有自己一套路由管理機制，而未採用 vue-route 方案，個人認為這套方案還是比較成熟和好用的，以及可以滿足我們日常的需求:
保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。
2.uni.redirectTo(OBJECT)
關閉當前頁面，跳轉到應用內的某個頁面。
3.uni.reLaunch(OBJECT)
關閉所有頁面，打開到應用內的某個頁面。
注意： 如果調用了 uni.preloadPage(OBJECT)) 不會關閉，僅觸發生命周期 onHide
4.uni.switchTab(OBJECT)
跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。
注意： 如果調用了 uni.preloadPage(OBJECT)不會關閉，僅觸發生命周期 onHide
5.uni.navigateBack(OBJECT)
關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。
5.uni.preloadPage(OBJECT)
預載入頁面，是一種性能優化技術。被預載的頁面，在打開時速度更快。
以上路由API 已經滿足我們的需求，當然進行路由跳轉的前提是我們需要在 pages.json 進行路由配置, 包括路由和具體的樣式配置
而進行具體路由跳轉我們需要如下，需要多加一個 /
需要特別注意的一點是, 利用瀏覽器 在 進行 移動H5頁面調試時候，會出現頁面刷新之後頁面棧會消失，此時navigateBack不能返回，如果一定要返回可以使用history.back()導航到瀏覽器的其他歷史記錄。
uniapp 提供網路請求的 api 是 uni.request ，具體支持的請求方法可以參考官網 method 有效值
不過我們通常不會直接使用，而是進過一系列的封裝以方便我們的使用，具體封裝介面使用會在隨根據頁面數據請求一並展示。
⑸ uniapp 中api 獲取的數據怎樣讀取出來
根據截圖推測，你可能是剛接觸開發吧。
看樣子你的服務端的返回是直接print_r的，這個返回是列印數組內容的。
你可以使用json_encode返回json數據，然後就可以在uniap的js中console列印出來數據了，這樣就可以在小程序中的控制台看到返回了
⑹ 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獲取dom節點信息
首先明白一點，uni-app提供的view、button、image、text通通都是組件，不是h5的標簽，雖然用起來方便，但如果你想獲取dom節點信息，盡管給組件綁定一個id選擇器，用document.getElementById()等這種傳統的JS獲取dom方式是沒有任何效果。
因為他們是組件，除非你不用這些現成的組件，用回h5的標簽。
所以你如果想獲取uni-app提供組件的DOM元素，需要如下的方法。
uni.createSelectorQuery().in(this);用於創建一個實例。
in(this)在這里是為了規范頁面創建實例，避免獲取不到實例報null，用上總沒錯
query.select('#text')用於選擇DOM節點
boundingClientRect()返回dom節點的相關信息
拿到的是一些元素本身的寬高信息、距離頁面四邊的距離。
使用uni.createSelectorQuery()創建dom實例，需要在這個mounted()生命周期裡面進行，這個生命周期它代表組件已經創建完成，可以掛載實例，進而獲取dom元素
如果不寫在mounted生命周期里，你也可以寫在methods方法定義裡面，不過你需要這樣來調用。
⑻ 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 "";
}
⑼ uni-app h5界面開發，獲取本頁URL信息
開發單獨的h界面，對接到其他的模塊中去，會用到這些方法，因為其他界面只有通過URL附帶參數的方式傳值：
⑽ uniapp帶參返回上一頁功能實現
在uniapp開發過程中經常會遇到這種情況：
列表頁面A點擊item進入詳情頁B，詳情頁B進行操作後返回A列表頁並從A列表移除剛才操作的item，或者修改item的值，又或者返回之後直接刷新。
由於uniapp的uni.navigateBack沒有提供帶參的返回方法，所以我們只能另闢蹊徑。
這里我要實現的場景是A列表點擊item跳轉B頁面，B頁面提交表單後，點擊完成按鈕，返回A列表頁，並刷新當前列表組件（refs="apply"）
我們注意到uniapp中可以通過getCurrentPages()獲取頁面棧。
我們先在A頁面data中定義：
並在onShow中獲取當前頁面對象currPage:
將頁面對象遍歷出來可以看到currPage中有一個屬性 vm.(data中的值)可以取到當前頁面data中的值，所以onShow中：
接著在詳情頁面B中點擊完成按鈕獲取上個頁面對象prevPage：
修改上個頁面的值並返回上個頁面：
此處修改的值在A頁面的onShow中即可獲取到，根據onShow中取到的值再進行判斷是否需要刷新列表組件。
需要注意的是：
1、當A頁面為tabBar頁面時，從B頁面使用uni.navigateBack返回A頁面時，不會觸發onShow生命周期（不知道是框架bug還是有意設置區別），建議使用：
即可正常觸發onShow
2、通過$vm修改data值在app-plus中可以使用，在微信小程序中需要使用
的方法進行賦值