uniapp h5端配置title logo

解决步骤:

1.新建一个html文件

uniapp H5项目生成时本身是没有 index.html 等相关HTML文件,而图标又是要在HTML文件中设置。

现在我们在根目录下创建一个 count.html 文件(文件名按个人喜好来)

 

2.给h5设置配置

为了让 count.html 文件能够被编译,展示。我们可以这样做:

当然也可以直接修改源码视图(注意:在h5配置了以后会自动修改源码试图):

 3.编写count.html文件代码

<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
            })
        </script>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
		<!-- 图片看自己喜好放在哪个文件下面 -->
        <link rel="icon" href="/static/more/first.png" /> 
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
    </body>
</html>

4.添加 favicon.png 图片

在第三步代码中

 注意:按照操作步骤完以后,需要重新运行项目才能看到效果

 

 

 

要在uniapp h5中使用ucharts,你需要按照以下步骤进行操作: 1. 首先,你需要在你的uniapp项目中安装ucharts。可以使用npm或yarn进行安装,命令如下: ``` npm install ucharts --save ``` 或 ``` yarn add ucharts ``` 2. 安装完成后,你需要在你的vue组件中引入ucharts,代码如下: ```js import uCharts from 'ucharts'; ``` 3. 接下来,你需要在你的vue组件中定义一个canvas元素,并且给它一个唯一的ID。例如: ```html <canvas id="myChart" style="width:100%;height:300px;"></canvas> ``` 4. 在vue组件的mounted生命周期函数中,你需要初始化ucharts,并且传入你的canvas元素ID以及数据。例如: ```js mounted() { const canvas = document.getElementById('myChart'); const ctx = uni.createCanvasContext(canvas); const data = { categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], series: [{ name: '成交量1', data: [20, 40, 60, 80, 100, 120, 140] }, { name: '成交量2', data: [10, 20, 30, 40, 50, 60, 70] }] }; new uCharts({ $this: this, canvas, type: 'column', legend: { show: true, position: 'bottom', fontSize: 12, data: ['成交量1', '成交量2'] }, dataLabel: true, dataPointShape: true, background: '#FFFFFF', pixelRatio: uni.getSystemInfoSync().pixelRatio, categories: data.categories, series: data.series, animation: true, width: uni.upx2px(375), height: uni.upx2px(200), extra: { column: { width: uni.upx2px(40) } } }); } ``` 5. 最后,你需要在你的vue组件中引入ucharts的css文件。例如: ```html <style> @import "node_modules/ucharts/uCharts.css"; </style> ``` 这样,你就可以在uniapp h5中成功引入ucharts并且使用它了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值