本人之前是做Vue項(xiàng)目開發(fā)的，此篇文章是相對(duì)于vue項(xiàng)目轉(zhuǎn)移至uni-app遇到的問題，以及對(duì)uniapp的學(xué)習(xí)~~~
????????
后續(xù)學(xué)習(xí)中遇到的問題也會(huì)持續(xù)更新的?? -------- Loading.....
uni-app官方地址
不得不說，人家的標(biāo)語還是很吸引人的，這要是學(xué)會(huì)了，Android和IOS開發(fā)不就失業(yè)了??
面臨著這么嚴(yán)重的問題，所以在選擇時(shí)一定要三思而后行，只能說學(xué)習(xí)成本肯定很大，而且還有各種坑等著你！
問題和遇到的坑：
??1.uni-app引用npm第三方庫問題
點(diǎn)擊查看官方文檔介紹
點(diǎn)擊查看社區(qū)回復(fù)
??2.路由跳轉(zhuǎn)問題(不支持之前的vue-router)
由之前的router文件夾下的index.js，變成目前的 pages.json
如何實(shí)現(xiàn)頁面間的跳轉(zhuǎn)，點(diǎn)擊查看官方文檔
??3.部分組件無法使用，只能使用相關(guān)原生組件問題(不支持dom操作)
??4.不支持window.操作問題
??5.公共樣式引入問題
不能放在 main.js內(nèi)
需要放到 App.vue style內(nèi)
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style>
@import url("static/scss/index.scss");
/*每個(gè)頁面公共css */
</style>
??6.不支持alert的問題,原生消息提示
uni.showToast({
title: '標(biāo)題',
duration: 2000,
icon:'none'
})
??7.sessionStorage的問題
存：
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function() {
console.log('success');
}
});
取：
uni.getStorage({
key: 'storage_key',
success: function(res) {
console.log(res.data);
}
});
點(diǎn)擊查看官方文檔介紹
點(diǎn)擊查看社區(qū)回復(fù)
??8.不支持iconfont圖標(biāo)問題
下圖是官方給出的回答：
盡量轉(zhuǎn)為圖片格式，網(wǎng)上有說可以用的相關(guān)方法，我參考了也，但是在手機(jī)上還是不顯示，有誰試出來了告訴我下 ??
參考地址：https://www.cnblogs.com/gfweb/p/11069062.html
??9.scss全局樣式書寫格式問題
當(dāng)你發(fā)現(xiàn)在全局樣式中這樣寫不正常的時(shí)候（在單頁面內(nèi)這樣寫是沒問題的）
注意在 App.vue中加上lang
??10.引入圖片命名時(shí)盡量不要使用中文
本人是在引入圖標(biāo)圖片時(shí)出現(xiàn)的問題，中文時(shí)H5顯示正常，app不正正常
??11.調(diào)整圖片<img>問題
之前一般都是 <img src="" alt="">，所以在樣式上可以直接 img{} 來設(shè)置，但是在 uniapp 和 微信小程序中是不一致的（圖二為微信小程序）
因此盡量通過給 <img src="" alt=""> 定義 class 進(jìn)行樣式處理 ??
??12.調(diào)整圖片<img>大小問題
在H5中，直接設(shè)置 img 的 width:100%,寬度會(huì)直接自適應(yīng)父元素的寬，高度也會(huì)等比例自動(dòng)適應(yīng)
在uniapp中，直接以上操作，高度不會(huì)自動(dòng)適應(yīng)，必須固定寬高 ??
??13.uni-app中Vuex使用問題
uni-app中this.$store為undefind ,必須要在main.js中加入這行代碼
Vue.prototype.$store = store
??14.部分HTML標(biāo)簽無法解析問題
<section>,<span>,<div>等這些在微信小程序中都不會(huì)被解析，因此盡量用 <view> 代替
點(diǎn)擊查看官方文檔介紹
??15.axios請(qǐng)求頭封裝問題
之前vue項(xiàng)目中用到的是axios，但是完全照搬過去的話，會(huì)發(fā)現(xiàn)微信小程序就會(huì)有問題。
因此就要換一種封裝請(qǐng)求的方法，uni-app上也有人家封裝好的，可以直接下載來用(個(gè)人感覺有點(diǎn)秘密糊糊，而且文檔不完善，畢竟不是大佬 ??)
uni-app攔截封裝地址
uni-app發(fā)起請(qǐng)求參考文檔
我這邊只是參考之前的代碼，簡單實(shí)現(xiàn)了請(qǐng)求(把請(qǐng)求走通了，不排除后面會(huì)有啥問題)
新建 https.js文件
/**
* Created by superman on 17/2/16.
* http配置
*/
'use strict'
import globalConfig from '../global.js' //全局配置的api請(qǐng)求地址
export function http(params) {
uni.request({
url: globalConfig.url.apiUrl + params.url,
method: params.method,
data: params.data,
dataType: 'json',
header: {
'Content-Type': 'application/json;charset=utf-8',
'channel-code': 'AXXXXXXXXX',
'client-type': 'MOH5',
'version': '0.0.1'
},
success: function(res) {
let code = res.data.retCode
console.log(res)
if (code == 'N00000') {
params.success(res.data)
} else {
uni.showToast({
title: res.data.retMsg,
icon: 'none',
duration: 2000
})
}
},
fail: function(err) {
console.log(err)
uni.showToast({
title: '服務(wù)器出現(xiàn)問題，請(qǐng)稍后再試',
icon: 'none',
})
}
})
}
export default http;
main.js引入
import http from 'static/js/https.js'
Vue.prototype.$http = http;
頁面應(yīng)用
// 獲取公告列表
getNoticeList() {
var _this = this;
this.$http({
url: 'core-api/cms/siteNotice/all',
method: 'POST',
success: (res) => {
console.log(res)
_this.noticeList = res.body.siteNoticeList
}
})
},
??16.不能使用類似于vue的路由嵌套問題
??17.路由攔截問題
一般在vue中可以通過設(shè)置...,進(jìn)行攔截，但是在uniapp中是不支持這樣的，因此是需要封裝一個(gè)公共的js方法，來進(jìn)行判斷
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
其他：
??1.H5正常但App異常的可能性
??2.vue h5轉(zhuǎn)換uni-app指南
??3.HBuilder/HBuilderX真機(jī)運(yùn)行、手機(jī)運(yùn)行、真機(jī)聯(lián)調(diào)常見問題
??4.App打開空白頁，H5沒問題
參考地址：https://blog.csdn.net/weixin_43343144/article/details/98085487
??5.自定義導(dǎo)航欄使用注意
{
"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index"
}
],
"globalStyle": {
"navigationStyle":"custom" //去除頭部導(dǎo)航后
}
}
