请看下面一张Uni官网里面的一张图，这样的目录标签怎么做结构用什么软件可以生成？

来源：蜘蛛抓取(WebSpider) 时间：2024-02-28 02:00 标签： uniapp打开手机文件目录
uniapp用canvas生成一个分享商品的海报 前言uniapp用canvas生成一个分享商品的海报，因为用到了uni.downloadFile这个API，所以要注意图片在H5端跨域的问题。以下是本篇文章正文内容一、展示效果大致效果就是这样，点击生成海报的按钮，会用canvas生成一张海报，长按可以保存到手机上。二、使用步骤1.HTML部分代码如下：<!-- 生成海报的点击事件 -->
<view @click="generatePoster">点击分享</view>
<!-- 生成海报的canvas -->
<view class="my-canvas-box" @touchmove.stop.prevent :class="posterInfo.status ? 'show' : 'hide'" @click="posterInfo.status = false">
<canvas class="my-canvas" canvas-id="myCanvas" @longpress.stop="saveSharePic"></canvas>
<view class="canvas-tip">长按可保存海报</view>
</view>
@touchmove.stop.prevent这个是用来阻止滑动事件的，这个canvas显示的时候，不会让下面的内容滑动@click="posterInfo.status = false"这个点击事件是点击空白的区域，关闭生成的海报遮罩@longpress.stop="saveSharePic"这个方法是长按进行保存生成的海报2.CSS部分代码如下：.my-canvas-box {
width: 750rpx;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
z-index: 99;
&.hide {
display: none;
}
&.show {
display: block;
}
.canvas-tip {
color: #ffffff;
font-size: 24rpx;
margin-top: 30rpx;
text-align: center;
}
/* #ifdef MP-WEIXIN */
.my-canvas {
width: 550rpx;
height: 950rpx;
background-color: #ffffff;
margin: 200rpx auto;
}
/* #endif */
/* #ifdef APP-PLUS
H5 */
.my-canvas {
width: 550rpx;
height: 950rpx;
background-color: #ffffff;
margin-top: 220rpx auto;
}
/* #endif */
}
css这部分就没什么好说的了，就是一些样式的展示效果注意的是.my-canvas这个样式是控制显示白色canvas主体的样式，可以根据自己的实际需求修改大小样式用了scss，如果报错，记得修改一下3.JS部分代码如下：data部分data(){
return{
// 用来控制canvas遮罩层的显示与隐藏
posterInfo: {
status: false,
}
}
}
methods部分// 生成海报
generatePoster() {
// 这里是创建 canvas 绘图上下文
let context = uni.createCanvasContext('myCanvas');
// 这里可以根据自己的需求显示加载动画
uni.showToast({
title: '正在生成海报，请稍后',
icon: 'none',
duration: 3000
});
// 小程序码图片，下面可以放一个请求，来保存小程序码。然后赋值到qrImg这个变量上面
let qrImg = '';
// 给整个canvas填充白色背景（这个如果不加上的话，在APP端生成的海报没有白色背景）
context.setFillStyle('#ffffff');
context.fillRect(0, 0, 500, 900);
context.draw();
// 绘制用户昵称
context.setFontSize(14);
context.setFillStyle('#000000');
// 这里根据自己的项目填写用户昵称的字段
context.fillText('用户的昵称', 100, 48);
context.setFontSize(12);
context.setFillStyle('#999999');
context.fillText('的分享', 100, 68);
// 绘制价格
context.setFontSize(18);
context.setFillStyle('red');
context.fillText(`￥199`, 20, 366);
// 绘制商品名称，这里是调用一个方法，按字符串长度进行分割换行。【可以做一个优化】
this.drawText(this.goodsInfo.title, 20, 379, context);
// 绘制头像
uni.downloadFile({
url: '用户的头像地址（一定要是网络路径）',
success: function(res) {
context.save();
// 这个就是绘制圆形头像
context.beginPath();
context.arc(50, 50, 30, 0, 2 * Math.PI)
context.clip();
context.drawImage(res.tempFilePath, 20, 20, 60, 60);
context.restore();
context.draw(true);
}
});
// 绘制商品详情
uni.downloadFile({
url: '商品的图片网络地址',
success: function(res) {
context.drawImage(res.tempFilePath, 15, 92, 245, 245);
context.draw(true);
}
});
// 绘制小程序码
uni.downloadFile({
// 这个qrImg就是上面获取的小程序码
url: qrImg,
success: function(res) {
context.drawImage(res.tempFilePath, 165, 360, 100, 100);
context.draw(true);
}
});
// 绘制完成，让canvas显示【这里看自己项目，是否有loading动画】
this.posterInfo.status = true;
},
// 商品名称文字换行
drawText(context, x, y, canvas) {
let strArr = [];
let n = 11;
for (let i = 0, l = context.length; i < l / n; i++) {
let a = context.slice(n * i, n * (i + 1));
strArr.push(a);
}
strArr.forEach((item, index) => {
// 限制只能显示4行文字
if (index > 3) {
return;
}
y += 20;
canvas.setFontSize(12);
canvas.setFillStyle('#333333');
canvas.fillText(item, x, y);
});
},
// 长按保存生成的海报
saveSharePic() {
uni.showModal({
title: '提示',
content: '确定要保存分享海报吗？',
success: function(res) {
if (res.confirm) {
// canvas生成图片
uni.canvasToTempFilePath({
// 这里修改保存的图片格式
fileType: 'jpg',
canvasId: 'myCanvas',
quality: 1,
success: function(res) {
// 保存带哦本地
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function() {
uni.showToast({
title: '保存海报成功',
icon: 'none',
duration: 3000
});
},
fail: function() {
uni.showToast({
title: '保存海报失败',
icon: 'none',
duration: 3000
});
}
});
}
});
}
}
});
}
总结以上就是今天要讲的内容，本文仅仅简单介绍了uniapp生成商品分享海报和保存的方法，如果感觉保存的图片过小，可以再创建一个较大的canvas，然后不显示，保存生成的图片用较大的canvas，然后显示用小的canvas。要是在使用中遇到问题，欢迎下方评论或者私信给我，我会及时进行解答的
一、创建一个新的项目（导入已有项目忽略）1.新建项目2.设置项目名3.HbuilderX运行项目4.运行成功，会自动打开微信开发者工具5.uni-app 项目目录结构
┌─components
uni-app组件目录
│
└─comp-a.vue
可复用的a组件
├─pages
业务页面文件存放的目录
│
├─index
│
│
└─index.vue
index页面
│
└─list
│
└─list.vue
list页面
├─static
存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js
Vue初始化入口文件
├─App.vue
应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json
配置应用名称、appid、logo、版本等打包信息
└─pages.json
配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息二、配置环境1.填写自己的微信小程序的AppID2.在HBuilderX中，配置“微信开发者工具”的安装路径：注意：配置完成之后，在HbuilderX点击运行到小程序模拟器，会自动启动微信开发者工具3.在微信开发者工具中开启服务端口：三、新建页面1.创建新的tab页面2.创建非tab页面四、使用 Git 管理项目1.本地管理1.1 在项目根目录中新建 .gitignore 忽略文件，并配置如下：
# 忽略 node_modules 目录
/node_modules
/unpackage/dist
注意：忽略 unpackage 目录，默认 unpackage 目录不会被 Git 追踪
此时，为了让 Git 能够正常追踪 unpackage 目录，按照惯例，我们可以在 unpackage 目录下创建一个叫做 .gitkeep 的文件进行占位
1.2 打开终端，切换到项目根目录中，运行如下的命令，初始化本地 Git 仓库：
git init
git add .
git commit -m "init project"2.把项目托管到码云 注册并激活码云账号（ 注册页面地址：注册 - Gitee.com ）
生成并配置 SSH 公钥
创建空白的码云仓库
把本地项目上传到码云对应的空白仓库中

我要回帖

更多关于 uniapp打开手机文件目录 的文章

 

随机推荐