h5转uniapp

初入uni-app遇到的问题

本人之前是做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中，直接以上操作，高度不会自动适应，必须固定宽高 😂

🎈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" //去除头部导航后
    }
}

点击查看官方文档介绍

🌊6.uni-app 中保持用户登录状态

点击查看社区回复