优秀的编程知识分享平台

网站首页 > 技术文章 正文

新手用uni-app开发下面内容你一定要知道

nanyue 2024-08-06 18:11:02 技术文章 5 ℃

在生产环境中

1、如何解决Html中相对路径问题? 解决H5图片部署问题

为啥有这个问题呢?原本uni-app 是针对小程序和app的他们都是从根目录开始计算的路径的,但是H5不是这样的

A: 相对路径

index.******.js

默认编译 :e.__uniConfig.router e.__uniConfig.router={mode:"hash",base:"/"}

H5请修改成 :e.__uniConfig.router e.__uniConfig.router={mode:"hash",base:"./"}

B:域名配置

"h5" : {

"title" : "H5test",

"domain" : "http://game.kfw001.com2019/test/h5",

"publicPath" : "http://game.kfw001.com/2019/test/h5"

}

2、不可以采用以下方式,我相信你会掉入这个坑

编译前:

<view class="content">

<image class="logo" src="./static/logo.png"></image>

<view class="text-area">

<text class="title">{{title}} --2222---</text>

</view>

</view>

编译后:『错了 错了』,请采用 1 解决这个问题

<uni-view data-v-614d56df="" class="content">

<uni-image data-v-614d56df="" class="logo">

<div style="background-position: 0% 0%; background-size: 100% 100%; background-repeat: no-repeat;

background-image: url(/pages/index/static/logo.png);">

</div>

<img src="/pages/index/static/logo.png">

<!---->

</uni-image>

技巧: 用: <img :src="require('static/logo.png')"/> 方法替换: src="./static/logo.png"

对于小图片可以的,require后可以将图片转成base64,直接嵌入到html中


3、如何解决css中图片资源路径问题? 采用如下内容

技巧: 用: <img :src="require('static/logo.png')"/> 方法替换: src="./static/logo.png"

对于小图片可以的,require后可以将图片转成base64,直接嵌入到html中

background-image: url(require('static/logo.png')) ;

最近发表
标签列表