实习二阶段总结

标签：总结 uniapp vue 组件 watermarker 阶段实习 data 页面

这次干的活是将签字版生成的图片和网页的内容结合生成一张图片。

一、全局水印

本人了解过一点点小程序，但这次算是初次接触uniapp，说实话给我的印象非常糟糕。他先给我分配的任务是，在uniapp中的每个页面添加水印。本人初次接触水印，从网上搜一下其实不是很难。真正的难点是如何将水印全局使用。

本人多次使用一心，讯飞等ai得到的结果都是全局注册组件，然后页面单独引用，二十多个页面谁会给他一个个写标签啊。按照vue的固有想法是，只要将组件挂载到App.vue里就好了，但是uniapp好像是没有根组件，导致第一种思路走不通。网上找了第二种方法在main.js注册组件的时候，将他干到html的body中去.然而第二个让我感觉很**的地方出现了，uniapp不能获取document，也就是说，uniapp没有办法获取到dom对象，无论是原生js或者是ref，获取到的值都是undefined，微信小程序自带的方法没有办法获取到dom对象（至少我没办法）。只能够获取到dom的一些参数，来修改dom的样式之类的。网上还找到了一个方法，就是在vue.config.js里写入脚本，在每个page页面的第一个标签下加上组件的标签，但是这么写的问题是，项目是组件和页面写在一起了没有办法区分已有的页面和组件（我实在想不到怎么操作）;

最后我找到了终极解决办法,思路是一个大佬的，就是使用vue-inset-loader，具体的做法是

先下载依赖vue-inset-loadernpm install vue-inset-loader；

在unapp中创建vue.config.js页面，然后进行配置

const path = require('path')

module.exports = {
	configureWebpack: {
		module: {
			rules: [{
				test: /.vue$/,
				use: {
					loader: path.resolve(__dirname, "./node_modules/vue-inset-loader")
				},
			}]
		},
	}
}

main.js全局注册组件

import watermarker from "@/components/waterMarker/waterMarker.vue"
Vue.component('watermarker', watermarker);

在pages.json中进行配置

	// wdstest
	"insetLoader": {
		//配置
		"config": {
			//将需要引入的组件名起了个confirm的名字在下面label中使用 右侧为需要插入的标签
			"watermarker": "<watermarker />"
		},
		// 全局配置  
		//需要挂在的组件名
		"label": ["watermarker"],
		//根元素的标签类型 也就是插入到页面哪个根元素下默认为div 但是uniapp中需要写为view
		"rootEle": "view"
	},

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/kanban/main",
			"style": {
				"navigationBarTitleText": "业务看板",
             //这两行是新加的配置   
				"label": ["watermarker"],
				"rootEle": "view"
			}
		},
    .....//下面还有其他页面的配置

在第一个页面启动页面上增加配置.。

这样就能够实现所有页面添加水印的效果了。（非常好用）

二、签字板

签字板其实并不难，主要是恶心，（其实最后的实现效果个人认为很拉胯。）这里主管推荐我使用html2canvas，但是这个东西需要用到dom对象，但是uniapp尴尬在没有办法获取dom对象。所以这里又找了wxml2canvas进行编写。

首先canvas画一个签字板就不说什么了。将canvas里的内容生成图片也不说了。

代码是我网上抄的，主要是因为用自己的代码一直在出问题，只好借来大佬的代码进行更改

						<view class="share__canvas share__canvas1 " style="position: absolute; left: 10086px;">
							<view class="share__canvas1-text draw_canvas" data-type="text" data-text="这里填写相关信息">这里填写相关信息
							</view>
							<image class="share__canvas2-image draw_canvas" :src="tempimg" data-type="image"
								:data-url="tempimg">
							</image>
						</view>
						<canvas canvas-id="canvas1"
							style="width: 330px;height: 240px;position: absolute; left: 10010px;" width="300"
							height="600" class="share__canvas"></canvas>

		methods: {
			// 测试图片的地址
			drawImage1() {
				let self = this;
				let drawImage1 = new wxml2canvas({
					width: 330,
					height: 700,
					element: 'canvas1',
					background: '#f0f0f0',
					progress(percent) {},
					finish(url) {
						console.log(url, "url")
					},
					error(res) {}
				});

				let data = {
					list: [{
						type: 'wxml',
						class: '.share__canvas1 .draw_canvas',
						limit: '.draw_canvas',
						x: 0,
						y: 0
					}]
				}
				//将这张图画到canvas上
				drawImage1.draw(data);
			},

这么写效果是呈现出来了，但是又有了一个问题，那就是我的文字只有写在view标签的data-text里才能在canvas上显示，同样的图片需要再data-url里填写图片的网络地址（这里还必须附带data0type来表示你所转换的类型，例如：如果你的图片是base64的那一堆乱码，你就需要在data-type里写上 data-type="image" data-base64="1"等），里面的细节貌似还有很多，本人实在难以领悟（希望有大佬可以告诉一个更好的办法）。

暂时就想写这么多。

标签：总结,uniapp,vue,组件,watermarker,阶段,实习,data,页面
From： https://www.cnblogs.com/laonianrenws/p/18235085

实习二阶段总结