本人之前是做Vue项目开发的，此篇文章是相对于vue项目转移至uni-app遇到的问题，以及对uniapp的学习~~~
🚩🚩🚩🚩
后续学习中遇到的问题也会持续更新的👍 -------- Loading.....
image.png
uni-app官方地址
不得不说，人家的标语还是很吸引人的，这要是学会了，Android和IOS开发不就失业了😱
面临着这么严重的问题，所以在选择时一定要三思而后行，只能说学习成本肯定很大，而且还有各种坑等着你！
问题和遇到的坑：
🎈1.uni-app引用npm第三方库问题
🎈2.路由跳转问题(不支持之前的vue-router)
由之前的router文件夹下的index.js，变成目前的 pages.json
image.png
如何实现页面间的跳转，点击查看官方文档
🎈3.部分组件无法使用，只能使用相关原生组件问题(不支持dom操作)
🎈4.不支持window.操作问题
🎈5.公共样式引入问题
不能放在 main.js内
需要放到 App.vue style内
<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");
/*每个页面公共css */
</style>
🎈6.不支持alert的问题,原生消息提示
uni.showToast({
title: '标题',
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);
}
});
🎈8.不支持iconfont图标问题
下图是官方给出的回答：
image.png
尽量转为图片格式，网上有说可以用的相关方法，我参考了也，但是在手机上还是不显示，有谁试出来了告诉我下 😂
参考地址：https://www.cnblogs.com/gfweb/p/11069062.html
🎈9.scss全局样式书写格式问题
image.png
当你发现在全局样式中这样写不正常的时候（在单页面内这样写是没问题的）
image.png
注意在 App.vue中加上lang
image.png
🎈10.引入图片命名时尽量不要使用中文
本人是在引入图标图片时出现的问题，中文时H5显示正常，app不正正常
🎈11.调整图片<img>问题
之前一般都是 <img src="" alt="">，所以在样式上可以直接 img{} 来设置，但是在 uniapp 和 微信小程序中是不一致的（图二为微信小程序）
image.png
image.png
因此尽量通过给 <img src="" alt=""> 定义 class 进行样式处理 👌
🎈12.调整图片<img>大小问题
在H5中，直接设置 img 的 width:100%,宽度会直接自适应父元素的宽，高度也会等比例自动适应
在uniapp中，直接以上操作，高度不会自动适应，必须固定宽高 😂
image.png
image.png
🎈13.uni-app中Vuex使用问题
uni-app中this.$store为undefind ,必须要在main.js中加入这行代码
Vue.prototype.$store = store
🎈14.部分HTML标签无法解析问题
<section>,<span>,<div>等这些在微信小程序中都不会被解析，因此尽量用 <view> 代替
点击查看官方文档介绍
🎈15.axios请求头封装问题
之前vue项目中用到的是axios，但是完全照搬过去的话，会发现微信小程序就会有问题。
因此就要换一种封装请求的方法，uni-app上也有人家封装好的，可以直接下载来用(个人感觉有点秘密糊糊，而且文档不完善，毕竟不是大佬 😂)
uni-app拦截封装地址
uni-app发起请求参考文档
我这边只是参考之前的代码，简单实现了请求(把请求走通了，不排除后面会有啥问题)
新建 https.js文件
/**
* Created by superman on 17/2/16.
* http配置
*/
'use strict'
import globalConfig from '../global.js' //全局配置的api请求地址
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: '服务器出现问题，请稍后再试',
icon: 'none',
})
}
})
}
export default http;
main.js引入
import http from 'static/js/https.js'
Vue.prototype.$http = http;
页面应用
// 获取公告列表
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中可以通过设置...,进行拦截，但是在uniapp中是不支持这样的，因此是需要封装一个公共的js方法，来进行判断
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
其他：
🌊1.H5正常但App异常的可能性
🌊2.vue h5转换uni-app指南
🌊3.HBuilder/HBuilderX真机运行、手机运行、真机联调常见问题
🌊4.App打开空白页，H5没问题
参考地址：https://blog.csdn.net/weixin_43343144/article/details/98085487
🌊5.自定义导航栏使用注意
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index"
}
],
"globalStyle": {
"navigationStyle":"custom" //去除头部导航后
}
}
网友评论