uni-app H5上传采坑



  • 今天在使用uni-app上传H5的时候遇到了一些问题,现在想要分享一下。

    uni-app是什么

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。即使不跨端,uni-app同时也是更好的小程序开发框架。(官网上是这么说的)

    我们讨论一下上传的问题

    uni-app在上传H5的时候会有很多关于相对路径的问题,官网的相关路径提示如下:

    • css背景图片url:
      0_1568633363491_54062a99-a35d-40ba-97ac-6d42b905c594-image.png

    • image标签src路径:
      0_1568633398294_778bc9b8-f7d9-4d1e-8280-1ed5143f196f-image.png

    从上面可以看出,uni-app还不能很好的满足我们前端的相对路径上传的要求,这该怎么办呢?


    搞了一天后,我终于摸索出了一套方法,来满足相对路径的需求:

    • JS文件:上传前,先将manifest.json的h5配置项修改为:
    //manifest.json
    "h5" : {
            "title" : "这是title",
            "router" : {
                "mode" : "history",
                "base" : "./"                            /*   以当前目录作为运行基础路径   */
            },
            "domain" : "",
    	"publicPath": "./"
        }
    
    • css背景图片:
    .className {
    	background-image: url("./static/image/bg.jpg");   /*  前面加./  */
    	background-repeat:no-repeat; 
    	background-size:100% 100%;
    	-moz-background-size:100% 100%;
    }
    
    • image图片:所有图片使用<img>标签,并且把路径作为变量名传入。使用变量名的目的是防止框架”恶意“地在src前添加某些东西,比如/pages/或者/。
    <img :src="imgurl" lazy-load="true"></img>
    
    <script>
    	export default {
    		data(){
    			return {
    				imgurl: "这是图片路径"        //例:'./static/images/1.png'
    			}
    		}
    	}
    </script>
    
    • video视频:<video>标签会在uni-app编译过程中会把路径添加上工程路径,所以不能使用类似与img的方式。因此视频路径只能使用绝对路径。
    <video src="/static/video/视频.mp4" controls></video>
    

    点击发行->网站-H5手机版即可打包为H5,打包完成后会有以下目录结构:
    0_1568635802191_d49540d2-e255-4423-9900-71b53d40e72e-image.png
    注:img为css背景图片打包生成的,你也可以在实现项目的时候把图片放在img目录下。

    注:在填写的绝对路径上,框架打包后会在绝对路径上添加manifest.json中的base根目录头。

    注:在本地运行在浏览器上可能会发生路径错误,需要在打包好的文件夹build下自行添加相应的路径文件夹,然后在cmd中运行python -m http.server进行检查。

    另外值得注意的是,在浏览器地址栏上输入url的时候是不能在后面加上index.html的,否则就会出错。
    0_1568636153061_9c07a8db-2b80-4c4e-9905-fa830c04b28a-image.png

    以上就是我在这天采坑总结。总的一句话,uni-app真的难用。



  • 所以你在招新 h5 中用了这个方案吗?



  • 此回复已被删除!


  • @wqy 是的。在图片路径的时候,只能使用赋值的方法,但是视频就不行了


 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

与 Dian 的连接断开,我们正在尝试重连,请耐心等待