写在前面的话：最近要配合项目输出带水印的图片，之前的实现的方式是调uniapp封装好的相机，然后在图片输出的时候用canvas,把水印绘制上去，但是老感觉没有水印相机看着舒服.改成了现在的这种方式。

1.相机实现

水印相机实现有两种方式，在小程序端可以用camera来实现，但在安卓端不支持camera，使用uniapp的live-pusher来实现相机。

而live-pusher推荐使用nvue来做，好处是

• App平台：使用 <live-pusher/> 组件，打包 App 时必须勾选 manifest.json->App 模块权限配置->LivePusher(直播推流) 模块。

上代码！

<template>

	<view class="live-camera" :style="{ width: windowWidth, height: windowHeight }">

		<view class="preview" :style="{ width: windowWidth, height: windowHeight }">

			<live-pusher

				id="livePusher"

				ref="livePusher"

				class="livePusher"

				mode="FHD"

				beauty="0"

				whiteness="0"

				:aspect="aspect"

				min-bitrate="1000"

				audio-quality="16KHz"

				device-position="back"

				:auto-focus="true"

				:muted="true"

				:enable-camera="true"

				:enable-mic="false"

				:zoom="false"

				@statechange="statechange"

				:style="{ width: windowWidth, height: windowHeight }"

			></live-pusher>

			<!--这里修改水印的样式-->

			<cover-view class="remind">

				<text class="remind-text" style="">{{ message }}</text>

				<text class="remind-text" style="">经度：1002.32</text>

				<text class="remind-text" style="">纬度：1002.32</text>

			</cover-view>

		</view>

		<view class="menu">

			<!--底部菜单区域背景-->

			<cover-image class="menu-mask" src="/static/live-camera/bar.png"></cover-image>



			<!--返回键-->

			<cover-image class="menu-back" @tap="back" src="/static/live-camera/back.png"></cover-image>



			<!--快门键-->

			<cover-image class="menu-snapshot" @tap="snapshot" src="/static/live-camera/shutter.png"></cover-image>



			<!--反转键-->

			<cover-image class="menu-flip" @tap="flip" src="/static/live-camera/flip.png"></cover-image>

		</view>

	</view>

</template>



<script>

let _this = null;

export default {

	data() {

		return {

			dotype: 'watermark',

			message: '水印相机', //水印内容

			poenCarmeInterval: null, //打开相机的轮询

			aspect: '2:3', //比例

			windowWidth: '', //屏幕可用宽度

			windowHeight: '', //屏幕可用高度

			camerastate: false, //相机准备好了

			livePusher: null, //流视频对象

			snapshotsrc: null //快照

		};

	},

	onLoad(e) {

		_this = this;

		if (e.dotype != undefined) this.dotype = e.dotype;

		this.initCamera();

	},

	onReady() {

		this.livePusher = uni.createLivePusherContext('livePusher', this);

		this.startPreview(); //开启预览并设置摄像头

		this.poenCarme();

	},

	methods: {

		//轮询打开

		poenCarme() {

			//#ifdef APP-PLUS

			if (plus.os.name == 'Android') {

				this.poenCarmeInterval = setInterval(function () {

					console.log(_this.camerastate);

					if (!_this.camerastate) _this.startPreview();

				}, 2500);

			}

			//#endif

		},

		//初始化相机

		initCamera() {

			uni.getSystemInfo({

				success: function (res) {

					_this.windowWidth = res.windowWidth;

					_this.windowHeight = res.windowHeight;

					let zcs = _this.aliquot(_this.windowWidth, _this.windowHeight);

					_this.aspect = _this.windowWidth / zcs + ':' + _this.windowHeight / zcs;

					console.log('画面比例：' + _this.aspect);

				}

			});

		},



		//整除数计算

		aliquot(x, y) {

			if (x % y == 0) return y;

			return this.aliquot(y, x % y);

		},



		//开始预览

		startPreview() {

			this.livePusher.startPreview({

				success: (a) => {

					console.log(a);

				}

			});

		},



		//停止预览

		stopPreview() {

			this.livePusher.stopPreview({

				success: (a) => {

					_this.camerastate = false; //标记相机未启动

				}

			});

		},



		//状态

		statechange(e) {

			//状态改变

			console.log(e);

			if (e.detail.code == 1007) {

				_this.camerastate = true;

			} else if (e.detail.code == -1301) {

				_this.camerastate = false;

			}

		},



		//返回

		back() {

			uni.navigateBack();

		},



		//抓拍

		snapshot() {

			this.livePusher.snapshot({

				success: (e) => {

					_this.snapshotsrc = e.message.tempImagePath;

					_this.stopPreview();

					_this.setImage();

					uni.navigateBack();

				}

			});

		},



		//反转

		flip() {

			this.livePusher.switchCamera();

		},



		//设置

		setImage() {

			let pages = getCurrentPages();

			let prevPage = pages[pages.length - 2]; //上一个页面



			//直接调用上一个页面的setImage()方法，把数据存到上一个页面中去

			prevPage.$vm.setImage({ path: _this.snapshotsrc, dotype: this.dotype });

		}

	}

};

</script>



<style lang="scss">

.live-camera {

	justify-content: center;

	align-items: center;

	.preview {

		justify-content: center;

		align-items: center;

		.remind {

			position: absolute;

			bottom: 180rpx;

			left: 20rpx;

			width: 130px;

			z-index: 100;

			.remind-text {

				color: #dddddd;

				font-size: 40rpx;

				text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;

			}

		}

	}

	.menu {

		position: absolute;

		left: 0;

		bottom: 0;

		width: 750rpx;

		height: 180rpx;

		z-index: 98;

		align-items: center;

		justify-content: center;

		.menu-mask {

			position: absolute;

			left: 0;

			bottom: 0;

			width: 750rpx;

			height: 180rpx;

			z-index: 98;

		}

		.menu-back {

			position: absolute;

			left: 30rpx;

			bottom: 50rpx;

			width: 80rpx;

			height: 80rpx;

			z-index: 99;

			align-items: center;

			justify-content: center;

		}

		.menu-snapshot {

			width: 130rpx;

			height: 130rpx;

			z-index: 99;

		}

		.menu-flip {

			position: absolute;

			right: 30rpx;

			bottom: 50rpx;

			width: 80rpx;

			height: 80rpx;

			z-index: 99;

			align-items: center;

			justify-content: center;

		}

	}

}

</style>

2.水印图片绘制

图片水印返回上一页用<canvas>添加水印

<template>

	<view class="page">

		<view style="height: 80rpx;"></view>

		<navigator class="buttons" url="../camera/watermark/watermark"><button type="primary">打开定制水印相机</button></navigator>

		<view style="height: 80rpx;"></view>

		

		<view>拍摄结果预览图，见下方</view>

		<image  class="preview" :src="imagesrc" mode="aspectFit" style="width:710rpx:height:710rpx;margin: 20rpx;"></image>

		

		<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d" :style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" />

	</view>

</template>



<script>

	var _this;

export default {

	data() {

		return {

			windowWidth:'',

			windowHeight:'',

			imagesrc: null,

			canvasSiz:{

				width:188,

				height:273

			}

		};

	},

	onLoad() {

		_this= this;

		this.init();

	},

	methods: {

		

		//设置图片

		setImage(e) {

			console.log(e);

			//显示在页面

			//this.imagesrc = e.path;

			if(e.dotype =='idphoto'){

				_this.zjzClipper(e.path);

			}else if(e.dotype =='watermark'){

				_this.watermark(e.path);

			}else{

				_this.savePhoto(e.path);

			}

		},

		

		

		//添加照片水印

		watermark(path){

			uni.getImageInfo({

				src: path,

				success: function(image) {

					console.log(image);

					

					_this.canvasSiz.width =image.width;

					_this.canvasSiz.height =image.height;

					

					//担心尺寸重置后还没生效，故做延迟

					setTimeout(()=>{

						let ctx = uni.createCanvasContext('canvas-clipper', _this);

						

						ctx.drawImage(

							path,

							0,

							0,

							image.width,

							image.height

						);

						

						//具体位置如需和相机页面上一致还需另外做计算，此处仅做大致演示

						ctx.setFillStyle('white');

						ctx.setFontSize(40);

						ctx.fillText('live-camera', 20, 100);

						

						

						//再来加个时间水印

						var now = new Date();

						var time= now.getFullYear()+'-'+now.getMonth()+'-'+now.getDate()+' '+now.getHours()+':'+now.getMinutes()+':'+now.getMinutes();

						ctx.setFontSize(30);

						ctx.fillText(time, 20, 140);



						ctx.draw(false, () => {

							uni.canvasToTempFilePath(

								{

									destWidth: image.width,

									destHeight: image.height,

									canvasId: 'canvas-clipper',

									fileType: 'jpg',

									success: function(res) {

										_this.savePhoto(res.tempFilePath);

									}

								},

								_this

							);

						});

					},500)

					

					

				}

			});

		},

		

		//保存图片到相册，方便核查

		savePhoto(path){

			this.imagesrc = path;

			//保存到相册

			uni.saveImageToPhotosAlbum({

				filePath: path,

				success: () => {

					uni.showToast({

						title: '已保存至相册',

						duration: 2000

					});

				}

			});

		},

		

		//初始化

		init(){

			let _this = this;

			uni.getSystemInfo({

				success: function(res) {

					_this.windowWidth = res.windowWidth;

					_this.windowHeight = res.windowHeight;

				}

			});

		}

		

	}

};

</script>



<style lang="scss">

.page {

	width: 750rpx; 

	justify-content: center;

	align-items: center;

	flex-direction:column;

	display: flex;

	.buttons {

		width: 600rpx;

	}

}





</style>

一、 背景

页面截图功能在前端开发中，特别是营销场景相关的需求中, 是比较常见的。比如截屏分享，相对于普通的链接分享，截屏分享具有更丰富的展示、更多的信息承载等优势。最近在需求开发中遇到了相关的功能，所以调研了相关的实现和原理。

二、相关技术

前端要实现页面截图的功能，现在比较常见的方式是使用开源的截图npm库，一般使用比较多的npm库有以下两个：

• dom-to-image: github.com/tsayen/dom-…


• html2canvas: github.com/niklasvh/ht…

以上两种常见的npm库，对应着两种常见的实现原理。实现前端截图，一般是使用图形API重新绘制页面生成图片，基本就是SVG（dom-to-image）和Canvas（html2canvas）两种实现方案，两种方案目标相同，即把DOM转为图片，下面我们来分别看看这两类方案。

三、 dom-to-image

dom-to-image库主要使用的是SVG实现方式，简单来说就是先把DOM转换为SVG然后再把SVG转换为图片。

（一）使用方式

首先，我们先来简单了解一下dom-to-image提供的核心api，有如下一些方法：

• toSvg (dom转svg)


• toPng (dom转png)


• toJpeg (dom转jpg)


• toBlob (dom转二进制格式)


• toPixelData (dom转原始像素值)

如需要生成一张png的页面截图，实现代码如下：

import domtoimage from "domtoimage"



const node = document.getElementById('node');

domtoimage.toPng(node,options).then((dataUrl) => {

    const img = new Image();

    img.src = dataUrl;

    document.body.appendChild(img);

})

toPng方法可传入两个参数node和options。

node为要生成截图的dom节点；options为支持的属性配置，具体如下：filter，backgroundColor，width，height，style，quality，imagePlaceholder，cacheBust。

（二）原理分析

dom to image的源码代码不是很多，总共不到千行，下面就拿toPng方法做一下简单的源码解析，分析一下其实现原理，简单流程如下：

整体实现过程用到了几个函数：

• toPng（调用draw，实现canvas=>png ）


• Draw（调用toSvg，实现dom=>canvas）


• toSvg（调用cloneNode和makeSvgDataUri，实现dom=>svg）


• cloneNode（克隆处理dom和css）


• makeSvgDataUri（实现dom=>svg data:url）


• toPng

toPng函数比较简单，通过调用draw方法获取转换后的canvas，利用toDataURL转化为图片并返回。

function toPng(node, options) {

  return draw(node, options || {})

    .then((canvas) => canvas.toDataURL());

}

• draw

draw函数首先调用toSvg方法获得dom转化后的svg，然后将获取的url形式的svg处理成图片，并新建canvas节点，然后借助drawImage()方法将生成的图片放在canvas画布上。

function draw(domNode, options) {

  return toSvg(domNode, options)

  // 拿到的svg是image data URL, 进一步创建svg图片

    .then(util.makeImage)

    .then(util.delay(100))

    .then((image) => {

      // 创建canvas，在画布上绘制图像并返回

      const canvas = newCanvas(domNode);

      canvas.getContext("2d").drawImage(image, 0, 0);

      return canvas;

    });

  // 新建canvas节点，设置一些样式的options参数

  function newCanvas(domNode) {

    const canvas = document.createElement("canvas");

    canvas.width = options.width || util.width(domNode);

    canvas.height = options.height || util.height(domNode);

    if (options.bgcolor) {

      const ctx = canvas.getContext("2d");

      ctx.fillStyle = options.bgcolor;

      ctx.fillRect(0, 0, canvas.width, canvas.height);

    }

    return canvas;

  }

}

• toSvg


• toSvg函数实现从dom到svg的处理，大概步骤如下：


• 递归去克隆dom节点（调用cloneNode函数）


• 处理字体，获取所有样式，找到所有的@font-face和内联资源，解析并下载对应的资源，将资源转为dataUrl给src使用。把上面处理完的css rules放入中，并把标签加入到clone的节点中去。
  
• 处理图片，将img标签的src的url和css中backbround中的url，转为dataUrl使用。


• 获取dom节点转化的dataUrl数据（调用makeSvgDataUri函数）

function toSvg(node, options) {

  options = options || {};

  // 处理imagePlaceholder、cacheBust值

  copyOptions(options);

  return Promise.resolve(node)

    .then((node) =>

      // 递归克隆dom节点

      cloneNode(node, options.filter, true))

  // 把字体相关的csstext放入style

    .then(embedFonts)

  // clone处理图片，将图片链接转换为dataUrl

    .then(inlineImages)

  // 添加options里的style放入style

    .then(applyOptions)

    .then((clone) =>

      // node节点转化成svg

      makeSvgDataUri(clone,

        options.width || util.width(node),

        options.height || util.height(node)));

  // 处理一些options的样式

  function applyOptions(clone) {

    ...

    return clone;

  }

}

• cloneNode

cloneNode函数主要处理dom节点，内容比较多，简单总结实现如下：

• 递归clone原始的dom节点，其中, 其中如果有canvas将转为image对象。


• 处理节点的样式，通过getComputedStyle方法获取节点元素的所有CSS属性的值，并将这些样式属性插入新建的style标签上面, 同时要处理“:before，:after”这些伪元素的样式, 最后处理输入内容和svg。

function cloneNode(node, filter, root) {

  if (!root && filter && !filter(node)) return Promise.resolve();

  return Promise.resolve(node)

    .then(makeNodeCopy)

    .then((clone) => cloneChildren(node, clone, filter))

    .then((clone) => processClone(node, clone));

  function makeNodeCopy(node) {

  // 将canvas转为image对象

    if (node instanceof HTMLCanvasElement) return util.makeImage(node.toDataURL());

    return node.cloneNode(false);

  }

  // 递归clone子节点

  function cloneChildren(original, clone, filter) {

    const children = original.childNodes;

    if (children.length === 0) return Promise.resolve(clone);

    return cloneChildrenInOrder(clone, util.asArray(children), filter)

      .then(() => clone);

    function cloneChildrenInOrder(parent, children, filter) {

      let done = Promise.resolve();

      children.forEach((child) => {

        done = done

          .then(() => cloneNode(child, filter))

          .then((childClone) => {

            if (childClone) parent.appendChild(childClone);

          });

      });

      return done;

    }

  }

  function processClone(original, clone) {

    if (!(clone instanceof Element)) return clone;

    return Promise.resolve()

      .then(cloneStyle)

      .then(clonePseudoElements)

      .then(copyUserInput)

      .then(fixSvg)

      .then(() => clone);

    // 克隆节点上的样式。

    function cloneStyle() {

       ...

    }

    // 提取伪类样式，放到css

    function clonePseudoElements() {

       ...

    }

    // 处理Input、TextArea标签

    function copyUserInput() {

       ...

    }

    // 处理svg

    function fixSvg() {

       ...

    }

  }

}

• makeSvgDataUri

首先，我们需要了解两个特性：

• SVG有一个元素，这个元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助标签，我们可以直接在SVG内部嵌入XHTML元素，举个例子：

<svg xmlns="http://www.w3.org/2000/svg">

<foreignObject width="120" height="50">

<body xmlns="http://www.w3.org/1999/xhtml">

<p>文字。</p>

</body>

</foreignObject>

</svg>

可以看到标签里面有一个设置了xmlns=“http://www.w3.org/1999/xhtml”…标签，此时标签及其子标签都会按照XHTML标准渲染，实现了SVG和XHTML的混合使用。

• XMLSerializer对象能够把一个XML文档或Node对象转化或“序列化”为未解析的XML标记的一个字符串。

基于以上特性，我们再来看一下makeSvgDataUri函数，该方法实现node节点转化为svg，就用到刚刚提到的两个重要特性。

首先将dom节点通过

XMLSerializer().serializeToString() 序列化为字符串，然后在

标签 中嵌入转换好的字符串，foreignObject 能够在 svg

内部嵌入XHTML，再将svg处理为dataUrl数据返回，具体实现如下：

function makeSvgDataUri(node, width, height) {

  return Promise.resolve(node)

    .then((node) => {

      // 将dom转换为字符串

      node.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");

      return new XMLSerializer().serializeToString(node);

    })

    .then(util.escapeXhtml)

    .then((xhtml) => `<foreignObject x="0" y="0" width="100%" height="100%">${xhtml}</foreignObject>`)

  // 转化为svg

    .then((foreignObject) =>

    // 不指定xmlns命名空间是不会渲染的

      `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${

        foreignObject}</svg>`)

  // 转化为data:url

    .then((svg) => `data:image/svg+xml;charset=utf-8,${svg}`);

}

四、 html2canvas

html2canvas库主要使用的是Canvas实现方式，主要过程是手动将dom重新绘制成canvas，因此，它只能正确渲染可以理解的属性，有许多CSS属性无法正确渲染。

支持的CSS属性的完整列表：

html2canvas.hertzen.com/features/

浏览器兼容性：

Firefox 3.5+ Google Chrome Opera 12+ IE9+ Edge Safari 6+

官方文档地址：

html2canvas.hertzen.com/documentati…

（一）使用方式

// dom即是需要绘制的节点, option为一些可配置的选项

import html2canvas from 'html2canvas'

  html2canvas(dom, option).then(canvas=>{

  canvas.toDataURL()

})

常用的option配置：

全部配置文档：

html2canvas.hertzen.com/configurati…

（二）原理分析

html2canvas的内部实现相对dom-to-image来说要复杂一些, 基本原理是读取DOM元素的信息，基于这些信息去构建截图，并呈现在canvas画布中。

其中重点就在于将dom重新绘制成canvas的过程，该过程整体的思路是：遍历目标节点和目标节点的子节点，遍历过程中记录所有节点的结构、内容和样式，然后计算节点本身的层级关系，最后根据不同的优先级绘制到canvas画布中。

由于html2canvas的源码量比较大，可能无法像dom-to-image一样详细的分析，但还是可以大致了解一下整体的流程，首先可以看一下源码中src文件夹中的代码结构，如下图：

简单解析一下：

• index：入口文件，将dom节点渲染到一个canvas中，并返回。


• core：工具函数的封装，包括对缓存的处理函数、Context方法封装、日志模块等。


• css：对节点样式的处理，解析各种css属性和特性，进行处理。


• dom：遍历dom节点的方法，以及对各种类型dom的处理。


• render：基于clone的节点生成canvas的处理方法。

基于以上这些核心文件，我们来简单了解一下html2canvas的解析过程, 大致的流程如下:

• 构建配置项

在这一步会结合传入的options和一些defaultOptions，生成用于渲染的配置数据renderOptions。在过程中会对配置项进行分类，比如resourceOptions（资源跨域相关）、contextOptions（缓存、日志相关）、windowOptions（窗口宽高、滚动配置）、cloneOptions（对指定dom的配置）、renderOptions（render结果的相关配置，包括生成图片的各种属性）等，然后分别将各类配置项传到下接下来的步骤中。

• clone目标节点并获取样式和内容

在这一步中，会将目标节点到指定的dom解析方法中，这个过程会clone目标节点和其子节点，获取到节点的内容信息和样式信息，其中clone dom的解析方法也是比较复杂的，这里不做详细展开。获取到目标节点后，需要把克隆出来的目标节点的dom装载到一个iframe里，进行一次渲染，然后就可以获取到经过浏览器视图真实呈现的节点样式。

• 解析目标节点

目标节点的样式和内容都获取到了之后，就需要把它所承载的数据信息转化为Canvas可以使用的数据类型。在对目标节点的解析方法中，递归整个DOM树，并取得每一层节点的数据，对于每一个节点而言需要绘制的部分包括边框、背景、阴影、内容，而对于内容就包含图片、文字、视频等。在整个解析过程中，对目标节点的所有属性进行解析构造，转化成为指定的数据格式，基础数据格式可见以下代码:

class ElementContainer {

  // 所有节点上的样式经过转换计算之后的信息

  readonly styles: CSSParsedDeclaration;

  // 节点的文本节点信息, 包括文本内容和其他属性

  readonly textNodes: TextContainer[] = [];

  // 当前节点的子节点

  readonly elements: ElementContainer[] = [];

  // 当前节点的位置信息（宽/高、横/纵坐标）

  bounds: Bounds;

  flags = 0;

  ...

}

具体到不同类型的元素如图片、IFrame、SVG、input等还会extends ElementContainer拥有自己的特定数据结构，在此不详细贴出。

• 构建内部渲染器

把目标节点处理成特定的数据结构之后，就需要结合Canvas调用渲染方法了，Canvas绘图需要根据样式计算哪些元素应该绘制在上层，哪些在下层，那么这个规则是什么样的呢？这里就涉及到CSS布局相关的一些知识。

默认情况下，CSS是流式布局的，元素与元素之间不会重叠。不过有些情况下，这种流式布局会被打破，比如使用了浮动(float)和定位(position)。因此需要需要识别出哪些脱离了正常文档流的元素，并记住它们的层叠信息，以便正确地渲染它们。

那些脱离正常文档流的元素会形成一个层叠上下文。元素在浏览器中渲染时，根据W3C的标准，所有的节点层级布局，需要遵循层叠上下文和层叠顺序的规则，具体规则如下：

在了解了元素的渲染需要遵循这个标准后，Canvas绘制节点的时候，需要生成指定的层叠数据，就需要先计算出整个目标节点里子节点渲染时所展现的不同层级，构造出所有节点对应的层叠上下文在内部所表现出来的数据结构，具体数据结构如下:

// 当前元素

element: ElementPaint;

// z-index为负, 形成层叠上下文

negativeZIndex: StackingContext[];

// z-index为0、auto、transform或opacity, 形成层叠上下文

zeroOrAutoZIndexOrTransformedOrOpacity: StackingContext[];

// 定位和z-index形成的层叠上下文

positiveZIndex: StackingContext[];

// 没有定位和float形成的层叠上下文

nonPositionedFloats: StackingContext[];

// 没有定位和内联形成的层叠上下文

nonPositionedInlineLevel: StackingContext[];

// 内联节点

inlineLevel: ElementPaint[];

// 不是内联的节点

nonInlineLevel: ElementPaint[];

基于以上数据结构，将元素子节点分类，添加到指定的数组中，解析层叠信息的方式和解析节点信息的方式类似，都是递归整棵树，收集树的每一层的信息，形成一颗包含层叠信息的层叠树。

• 绘制数据

基于上面两步构造出的数据，就可以开始调用内部的绘制方法，进行数据处理和绘制了。使用节点的层叠数据，依据浏览器渲染层叠数据的规则，将DOM元素一层一层渲染到canvas中，其中核心具体源码如下：

async renderStackContent(stack: StackingContext): Promise<void> {

  if (contains(stack.element.container.flags, FLAGS.DEBUG_RENDER)) {

  debugger;

  }

  // 1. the background and borders of the element forming the stacking context.

  await this.renderNodeBackgroundAndBorders(stack.element);

  // 2. the child stacking contexts with negative stack levels (most negative first).

  for (const child of stack.negativeZIndex) {

  await this.renderStack(child);

  }

  // 3. For all its in-flow, non-positioned, block-level descendants in tree order:

  await this.renderNodeContent(stack.element);

  for (const child of stack.nonInlineLevel) {

  await this.renderNode(child);

  }

  // 4. All non-positioned floating descendants, in tree order. For each one of these,

  // treat the element as if it created a new stacking context, but any positioned descendants and descendants

  // which actually create a new stacking context should be considered part of the parent stacking context,

  // not this new one.

  for (const child of stack.nonPositionedFloats) {

  await this.renderStack(child);

  }

  // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

  for (const child of stack.nonPositionedInlineLevel) {

  await this.renderStack(child);

  }

  for (const child of stack.inlineLevel) {

  await this.renderNode(child);

  }

  // 6. All positioned, opacity or transform descendants, in tree order that fall int0 the following categories:

  // All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order.

  // For those with 'z-index: auto', treat the element as if it created a new stacking context,

  // but any positioned descendants and descendants which actually create a new stacking context should be

  // considered part of the parent stacking context, not this new one. For those with 'z-index: 0',

  // treat the stacking context generated atomically.

  //

  // All opacity descendants with opacity less than 1

  //

  // All transform descendants with transform other than none

  for (const child of stack.zeroOrAutoZIndexOrTransformedOrOpacity) {

  await this.renderStack(child);

  }

  // 7. Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index

  // order (smallest first) then tree order.

  for (const child of stack.positiveZIndex) {

  await this.renderStack(child);

  }

}

在renderStackContent方法中，首先对元素本身调用renderNodeContent和renderNodeBackgroundAndBorders进行渲染处理。

然后处理各个分类的子元素，如果子元素形成了层叠上下文，就调用renderStack方法，这个方法内部继续调用了renderStackContent，这就形成了对于层叠上下文整个树的递归。

如果子元素是正常元素没有形成层叠上下文，就直接调用renderNode，renderNode包括两部分内容，渲染节点内容和渲染节点边框背景色。

async renderNode(paint: ElementPaint): Promise<void> {

  if (paint.container.styles.isVisible()) {

    // 渲染节点的边框和背景色

    await this.renderNodeBackgroundAndBorders(paint);

    // 渲染节点内容

    await this.renderNodeContent(paint);

  }

}

其中renderNodeContent方法是渲染一个元素节点里面的内容，其可能是正常元素、文字、图片、SVG、Canvas、input、iframe，对于不同的内容也会有不同的处理。

以上过程，就是html2canvas的整体内部流程，在了解了大致原理之后，我们再来看一个更为详细的源码流程图，对上述流程进行一个简单的总结。

五、 常见问题总结

在使用html2canvas的过程中，会有一些常见的问题和坑，总结如下:

（一）截图不全

要解决这个问题，只需要在截图之前将页面滚动到顶部即可：

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

（二）图片跨域

插件在请求图片的时候会有图片跨域的情况，这是因为，如果使用跨域的资源画到canvas中，并且资源没有使用CORS去请求，canvas会被认为是被污染了，canvas可以正常展示，但是没办法使用toDataURL()或者toBlob()导出数据，详情可参考：developer.mozilla.org/en-US/docs/…

解决方案：在img标签上设置crossorigin，属性值为anonymous，可以开启CROS请求。当然，这种方式的前提还是服务端的响应头Access-Control-Allow-Origin已经被设置过允许跨域。如果图片本身服务端不支持跨域，可以使用canvas统一转成base64格式，方法如下。

function getUrlBase64_pro( len,url ) {

  //图片转成base64

  var canvas = document.createElement("canvas"); //创建canvas DOM元素

  var ctx = canvas.getContext("2d");

  return new Promise((reslove, reject) => {

  var img = new Image();

  img.crossOrigin = "Anonymous";

  img.onload = function() {

  canvas.height = len;

  canvas.width = len;

  ctx.drawImage(img, 0, 0, len, len);

  var dataURL = canvas.toDataURL("image/");

  canvas = null;

  reslove(dataURL);

  };

  img.onerror = function(err){

  reject(err)

  }

  img.src = url;

  });

}

（三）截图与当前页面有区别

方式一：如果要从渲染中排除某些elements，可以向这些元素添加data-html2canvas-ignore属性，html2cnavas会将它们从渲染中排除，例如，如果不想截图iframe的部分，可以如下：

html2canvas(ele,{

useCORS: true,

ignoreElements: (element: any) => {

  if (element.tagName.toLowerCase() === 'iframe') {

  return element;

  }

  return false;

  },

})

方式二：可以将需要转化成图片的部分放在一个节点内，再把整个节点，透明度设置为0， 其他部分层级设置高一些，即可实现截图指定区域。

六、 小结

本文针对前端截图实现的方式，对两个开源库dom-to-image和html2canvas的使用和原理进行了简单的使用方式、实现原理方面，进行介绍和分析。

参考资料：

1.dom-to-image原理

2.html2image原理简述

3.浏览器端网页截图方案详解

4.html2canvas

5.html2canvas实现浏览器截图的原理（包含源码分析的通用方法）

运营小伙伴突然找到我们说，我们的一个短链有三个？

第一反应就是不可能，但是事实胜于雄辩，还真的就是和运营小伙伴说的一模一样。

到底发生了什么呢？跟着我一起Review一下。

一、URL结构

1.1 URL概述

URL（统一资源定位符）是一个用于标识互联网上资源的地址。一个典型的URL结构通常包括以下几个部分：

1.2 URL示例

示例：一个完整的URL示例可能是下面这样的

https://www.xxx.com:8080/path/to/resource?key1=value1&key2=value2#section2

在上面的示例中，详细拆解如下：

https 是协议。
http://www.xxx.com 是域名。
8080 是端口号。
/path/to/resource 是路径。
key1=value1&key2=value2 是查询字符串。
#section2 是片段标识符。

二、URL的意义

URL（统一资源定位符）的意义在于它提供了一种标准化的方法来标识和访问互联网上的资源。它是互联网的基础构件之一，它不仅使得资源的定位和访问变得简单，还支持了互联网的组织、导航、安全和分享等多种功能。以下是URL的几个关键意义：

这些意义做开发的都懂，不懂的就自己百度吧，这里不做赘述。

三、硬菜：url?1=1为啥变成了url???1=1

3.1 故事背景

我们有一个自己的短链项目，用户访问短链的时候，我们自己服务器会进行重定向，这样的好处是分享出去的链接都是很短的，会有效提升用户的使用体验。

短链触发和服务器的交互流程如下：

sequenceDiagram

  用户->>+短链: 点击

  短链->>+服务器: 请求

  服务器->>+服务器: 找到映射的长链地址

  服务器->>+用户: 重定向到长链

  用户->>+长链: 请求并得到响应

3.2 事故现场

上面弄清楚了短链的基本触发流程，那我我们看看到底发生了什么。

• 客户端事故现场截图

从这个截图就可以明显的看出，这里有三个?，这是不合理的...

• 数据库存储的事故现场数据截图

哎，数据库里面只有一个问号吧？

3.3 问题分析和解决方案

• 问题分析

上面数据库看着正常的，别着急，咱们换个方式看看，我们执行下面这个SQL看看数据存储的实际长度是多少。

SELECT

	LENGTH(

	CONVERT ( full_link USING utf8 )) AS actual_length 

FROM

	t_short_link 

WHERE

	id = '0fcc75b3e1b243c4b36d71b1d58b3b41';

执行结果：

上面sql执行实际得到的长度是52，但是我们长链的实际长度却是49，那么问题就出来了，数据库里面多了两个我们肉眼看不见的字符，三个问号就是这个来的

• 解决方案

从上面分析了事故现场，我们已经知道是多了两个字符了，删掉即可。

注意：因为数据库看不到，所以不能直接编辑，可以选择一些可以看到的编辑器编辑之后更新，例如notepad++。

3.4 额外发现

在写文章的时候，我将连接复制到了掘金的MD编辑器，发现这里也是暴露了问题，上面提到的解决方案，大家也是可以复制进来然后删除多余字符的。

四、总结

程序员大多数都非常自信，相信自己的代码没有bug，相信有bug也不是我的问题，有的时候怼天怼地。

但是真的遇到问题，需要三思而后行，谋定而后动；是不是自己的问题，先检查检查，避免后面发现是自己的问题很尴尬。

希望本文对您有所帮助。如果有任何错误或建议，请随时指正和提出。

同时，如果您觉得这篇文章有价值，请考虑点赞和收藏。这将激励我进一步改进和创作更多有用的内容。

感谢您的支持和理解！

1.背景

一开始接到任务需要打印html，之前用到了vue-print-nb-jeecg来处理Vue2一个打印的问题，现在是遇到需求要在Vue3项目里面去打印十几页的打印和下载为pdf，难点和坑就在于我用的库vue3-print-nb来做分页打印预览，下载pdf后面介绍

2.预览打印实现

    <div id="printMe" style="background:red;">

        <p>葫芦娃，葫芦娃</p>

        <p>一根藤上七朵花 </p>

        <p>小小树藤是我家 啦啦啦啦 </p>

        <p>叮当当咚咚当当　浇不大</p>

        <p> 叮当当咚咚当当 是我家</p>

        <p> 啦啦啦啦</p>

        <p>...</p>

    </div>



    <button v-print="'#printMe'">Print local range</button>

因为官方提供的方案都是DOM加载完成后然后直接打印，但是我的需求是需要点击打印的时候根据id渲染不同的组件然后渲染DOM，后面仔细看官方文档，有个beforeOpenCallback方法在打印预览之前有个钩子，但是这个钩子没办法确定我接口加载完毕，所以我的思路就是用户先点击我写的点击按钮事件，等异步渲染完毕之后，我再同步触发真正的打印预览按钮，这样就变相解决了我的需求。

坑

3.掉头发之下载pdf

下载pdf这种需求才是我每次去理发店不敢让tony把我头发打薄的原因，我看了很多技术文章，结合个人业务情况，采取的方案是html2canvas把html转成canvas然后转成图片然后通过jsPDF截取图片分页最后下载到本地。本人秉承着不生产水，只做大自然的搬运工的匠人精神，迅速而又果断的从社区来到社区去，然后找到了适配当前业务的逻辑代码(实践出真知)。

import html2canvas from 'html2canvas'

import jsPDF, { RGBAData } from 'jspdf'



/** a4纸的尺寸[595.28,841.89], 单位毫米 */

const [PAGE_WIDTH, PAGE_HEIGHT] = [595.28, 841.89]



const PAPER_CONFIG = {

  /** 竖向 */

  portrait: {

    height: PAGE_HEIGHT,

    width: PAGE_WIDTH,

    contentWidth: 560

  },

  /** 横向 */

  landscape: {

    height: PAGE_WIDTH,

    width: PAGE_HEIGHT,

    contentWidth: 800

  }

}



// 将元素转化为canvas元素

// 通过 放大 提高清晰度

// width为内容宽度

async function toCanvas(element: HTMLElement, width: number) {

  if (!element) return { width, height: 0 }



  // canvas元素

  const canvas = await html2canvas(element, {

    // allowTaint: true, // 允许渲染跨域图片

    scale: window.devicePixelRatio * 2, // 增加清晰度

    useCORS: true // 允许跨域

  })



  // 获取canvas转化后的宽高

  const { width: canvasWidth, height: canvasHeight } = canvas



  // html页面生成的canvas在pdf中的高度

  const height = (width / canvasWidth) * canvasHeight



  // 转化成图片Data

  const canvasData = canvas.toDataURL('image/jpeg', 1.0)



  return { width, height, data: canvasData }

}



/**

 * 生成pdf(A4多页pdf截断问题， 包括页眉、页脚 和 上下左右留空的护理)

 * @param param0

 * @returns

 */

export async function outputPDF({

  /** pdf内容的dom元素 */

  element,



  /** 页脚dom元素 */

  footer,



  /** 页眉dom元素 */

  header,



  /** pdf文件名 */

  filename,



  /** a4值的方向: portrait or landscape */

  orientation = 'portrait' as 'portrait' | 'landscape'

}) {

  if (!(element instanceof HTMLElement)) {

    return

  }



  if (!['portrait', 'landscape'].includes(orientation)) {

    return Promise.reject(

      new Error(`Invalid Parameters: the parameter {orientation} is assigned wrong value, you can only assign it with {portrait} or {landscape}`)

    )

  }

  const [A4_WIDTH, A4_HEIGHT] = [PAPER_CONFIG[orientation].width, PAPER_CONFIG[orientation].height]



  /** 一页pdf的内容宽度, 左右预设留白 */

  const { contentWidth } = PAPER_CONFIG[orientation]



  // eslint-disable-next-line new-cap

  const pdf = new jsPDF({

    unit: 'pt',

    format: 'a4',

    orientation

  })



  // 一页的高度， 转换宽度为一页元素的宽度

  const { width, height, data } = await toCanvas(element, contentWidth)



  // 添加

  function addImage(

    _x: number,

    _y: number,

    pdfInstance: jsPDF,

    base_data: string | HTMLImageElement | HTMLCanvasElement | Uint8Array | RGBAData,

    _width: number,

    _height: number

  ) {

    pdfInstance.addImage(base_data, 'JPEG', _x, _y, _width, _height)

  }



  // 增加空白遮挡

  function addBlank(x: number, y: number, _width: number, _height: number) {

    pdf.setFillColor(255, 255, 255)

    pdf.rect(x, y, Math.ceil(_width), Math.ceil(_height), 'F')

  }



  // 页脚元素 经过转换后在PDF页面的高度

  const { height: tFooterHeight, data: headerData } = footer ? await toCanvas(footer, contentWidth) : { height: 0, data: undefined }



  // 页眉元素 经过转换后在PDF的高度

  const { height: tHeaderHeight, data: footerData } = header ? await toCanvas(header, contentWidth) : { height: 0, data: undefined }



  // 添加页脚

  async function addHeader(headerElement: HTMLElement) {

    headerData && pdf.addImage(headerData, 'JPEG', 0, 0, contentWidth, tHeaderHeight)

  }



  // 添加页眉

  async function addFooter(pageNum: number, now: number, footerElement: HTMLElement) {

    if (footerData) {

      pdf.addImage(footerData, 'JPEG', 0, A4_HEIGHT - tFooterHeight, contentWidth, tFooterHeight)

    }

  }



  // 距离PDF左边的距离，/ 2 表示居中

  const baseX = (A4_WIDTH - contentWidth) / 2 // 预留空间给左边

  // 距离PDF 页眉和页脚的间距， 留白留空

  const baseY = 15



  // 除去页头、页眉、还有内容与两者之间的间距后 每页内容的实际高度

  const originalPageHeight = A4_HEIGHT - tFooterHeight - tHeaderHeight - 2 * baseY



  // 元素在网页页面的宽度

  const elementWidth = element.offsetWidth



  // PDF内容宽度 和 在HTML中宽度 的比， 用于将 元素在网页的高度 转化为 PDF内容内的高度， 将 元素距离网页顶部的高度  转化为 距离Canvas顶部的高度

  const rate = contentWidth / elementWidth



  // 每一页的分页坐标， PDF高度， 初始值为根元素距离顶部的距离

  const pages = [rate * getElementTop(element)]



  // 获取该元素到页面顶部的高度(注意滑动scroll会影响高度)

  function getElementTop(contentElement) {

    if (contentElement.getBoundingClientRect) {

      const rect = contentElement.getBoundingClientRect() || {}

      const topDistance = rect.top



      return topDistance

    }

  }



  // 遍历正常的元素节点

  function traversingNodes(nodes) {

    for (const element of nodes) {

      const one = element



      /** */

      /** 注意： 可以根据业务需求，判断其他场景的分页，本代码只判断表格的分页场景 */

      /** */



      // table的每一行元素也是深度终点

      const isTableRow = one.classList && one.classList.contains('ant4-table-row')



      // 对需要处理分页的元素，计算是否跨界，若跨界，则直接将顶部位置作为分页位置，进行分页，且子元素不需要再进行判断

      const { offsetHeight } = one

      // 计算出最终高度

      const offsetTop = getElementTop(one)



      // dom转换后距离顶部的高度

      // 转换成canvas高度

      const top = rate * offsetTop

      const rateOffsetHeight = rate * offsetHeight



      // 对于深度终点元素进行处理

      if (isTableRow) {

        // dom高度转换成生成pdf的实际高度

        // 代码不考虑dom定位、边距、边框等因素，需在dom里自行考虑，如将box-sizing设置为border-box

        updateTablePos(rateOffsetHeight, top)

      }

      // 对于普通元素，则判断是否高度超过分页值，并且深入

      else {

        // 执行位置更新操作

        updateNormalElPos(top)

        // 遍历子节点

        traversingNodes(one.childNodes)

      }

      updatePos()

    }

  }



  // 普通元素更新位置的方法

  // 普通元素只需要考虑到是否到达了分页点，即当前距离顶部高度 - 上一个分页点的高度 大于 正常一页的高度，则需要载入分页点

  function updateNormalElPos(top) {

    if (top - (pages.length > 0 ? pages[pages.length - 1] : 0) >= originalPageHeight) {

      pages.push((pages.length > 0 ? pages[pages.length - 1] : 0) + originalPageHeight)

    }

  }



  // 可能跨页元素位置更新的方法

  // 需要考虑分页元素，则需要考虑两种情况

  // 1. 普通达顶情况，如上

  // 2. 当前距离顶部高度加上元素自身高度 大于 整页高度，则需要载入一个分页点

  function updateTablePos(eHeight: number, top: number) {

    // 如果高度已经超过当前页，则证明可以分页了

    if (top - (pages.length > 0 ? pages[pages.length - 1] : 0) >= originalPageHeight) {

      pages.push((pages.length > 0 ? pages[pages.length - 1] : 0) + originalPageHeight)

    }

    // 若 距离当前页顶部的高度 加上元素自身的高度 大于 一页内容的高度, 则证明元素跨页，将当前高度作为分页位置

    else if (

      top + eHeight - (pages.length > 0 ? pages[pages.length - 1] : 0) > originalPageHeight &&

      top !== (pages.length > 0 ? pages[pages.length - 1] : 0)

    ) {

      pages.push(top)

    }

  }



  // 深度遍历节点的方法

  traversingNodes(element.childNodes)



  function updatePos() {

    while (pages[pages.length - 1] + originalPageHeight < height) {

      pages.push(pages[pages.length - 1] + originalPageHeight)

    }

  }



  // 对pages进行一个值的修正，因为pages生成是根据根元素来的，根元素并不是我们实际要打印的元素，而是element，

  // 所��要把它修正，让其值是以真实的打印元素顶部节点为准

  const newPages = pages.map(item => item - pages[0])



  // 根据分页位置 开始分页

  for (let i = 0; i < newPages.length; ++i) {

    // 根据分页位置新增图片

    addImage(baseX, baseY + tHeaderHeight - newPages[i], pdf, data!, width, height)

    // 将 内容 与 页眉之间留空留白的部分进行遮白处理

    addBlank(0, tHeaderHeight, A4_WIDTH, baseY)

    // 将 内容 与 页脚之间留空留白的部分进行遮白处理

    addBlank(0, A4_HEIGHT - baseY - tFooterHeight, A4_WIDTH, baseY)

    // 对于除最后一页外，对 内容 的多余部分进行遮白处理

    if (i < newPages.length - 1) {

      // 获取当前页面需要的内容部分高度

      const imageHeight = newPages[i + 1] - newPages[i]

      // 对多余的内容部分进行遮白

      addBlank(0, baseY + imageHeight + tHeaderHeight, A4_WIDTH, A4_HEIGHT - imageHeight)

    }



    // 添加页眉

    if (header) {

      await addHeader(header)

    }



    // 添加页脚

    if (footer) {

      await addFooter(newPages.length, i + 1, footer)

    }



    // 若不是最后一页，则分页

    if (i !== newPages.length - 1) {

      // 增加分页

      pdf.addPage()

    }

  }

  return pdf.save(filename)

}

4.分页的小姿势

如果有需求把打印预览的时候的页眉页脚默认取消不展示，然后自定义页面的边距可以这么设置样式

@page {

  size: auto A4 landscape;

  margin: 3mm;

}



@media print {

  body,

  html {

    height: initial;

    padding: 0px;

    margin: 0px;

  }

}

5.关于页眉页脚

由于业务是属于比较自定义化的展示，所以我封装成组件，然后根据返回的数据进行渲染到每个界面，然后利用绝对定位放在相同的位置，最后一点小优化就是，公共化提取界面的样式，然后整合为pub.scss然后引入到界面里面，这样即使产品有一定的样式调整，我也可以在公共样式里面去配置和修改，大大的减少本人的工作量。在日常的开发中也是这样，不要去抱怨需求的变动频繁，而是力争在写组件的过程中考虑到组件的健壮性和灵活度，给自己的工作减负，到点下班。

参考文章

juejin.cn/post/732343…

前言导读

各位同学大家，有段时间没有跟大家见面了，因为最近一直在更新鸿蒙的那个实战课程所以就没有去更新文章实在是不好意思， 所以今天就给大家更新一期实战案例 高仿微信案例 希望帮助到各位同学工作和学习

效果图

特点

具体实现

• 
  

  启动页面

  
  

/**

 * 创建人：xuqing

 * 创建时间：2024年7月14日22:56:15

 * 类说明：欢迎页面

 *

 */

​

import router from '@ohos.router';

import { preferences } from '@kit.ArkData';

import CommonConstant from '../common/CommonConstants';

import Logger from '../utils/Logger';

import { httpRequestGet } from '../utils/OkhttpUtils';

import { LoginModel } from '../bean/LoginModel';

​

let dataPreferences: preferences.Preferences | null = null;

​

​

@Entry

@Component

struct Welcome {

​

   async  aboutToAppear(){

     let options: preferences.Options = { name: 'myStore' };

     dataPreferences = preferences.getPreferencesSync(getContext(), options);

     let getusername=dataPreferences.getSync('username','');

     let getpassword=dataPreferences.getSync('password','');

     if(getusername===''||getpassword===''){

       router.pushUrl({

         url:'pages/LoginPage'

       })

     }else {

       let username:string='username=';

       let password:string='&password=';

       let netloginurl=CommonConstant.LOGIN+username+getusername+password+getpassword;

       httpRequestGet(netloginurl).then((data)=>{

         Logger.error("请求数据--->"+ data.toString());

         let loginmodel:LoginModel=JSON.parse(data.toString());

          if(loginmodel.code===200){

            router.pushUrl({

              url:'pages/Index'

            })

          }else{

            router.pushUrl({

              url:'pages/LoginPage'

            })

          }

       })

     }

​

  }

​

  build() {

    RelativeContainer(){

      Image($r('app.media.weixinbg'))

        .width('100%')

        .height('100%')

​

    }.height('100%')

    .width('100%')

    .backgroundColor(Color.Green)

​

  }

}

登录页面

import CommonConstant, * as commonConst from '../common/CommonConstants';

import Logger from '../utils/Logger';

import { httpRequestGet } from '../utils/OkhttpUtils';

import  { LoginData, LoginModel}  from '../bean/LoginModel';

import prompt from '@ohos.promptAction';

import router from '@ohos.router';

import { preferences } from '@kit.ArkData';

let dataPreferences: preferences.Preferences | null = null;

​

​

​

/**

 * 创建人：xuqing

 * 创建时间：2024年7月14日17:00:03

 * 类说明：登录页面

 *

 */

//输入框样式

@Extend(TextInput) function  inputStyle(){

  .placeholderColor($r('app.color.placeholder_color'))

  .height(45)

  .fontSize(18)

  .backgroundColor($r('app.color.background'))

  .width('100%')

  .padding({left:0})

  .margin({top:12})

}

//线条样式

@Extend(Line) function  lineStyle(){

  .width('100%')

  .height(1)

  .backgroundColor($r('app.color.line_color'))

}

//黑色字体样式

@Extend(Text) function  blackTextStyle(size?:number ,height?:number){

  .fontColor($r('app.color.black_text_color'))

  .fontSize(18)

  .fontWeight(FontWeight.Medium)

}

​

@Entry

@Component

struct LoginPage {

​

  @State accout:string='';

  @State password:string='';

  async  login(){

    let username:string='username=';

    let password:string='&password=';

    let netloginurl=CommonConstant.LOGIN+username+this.accout+password+this.password;

      Logger.error("请求url"+netloginurl);

      await httpRequestGet(netloginurl).then((data)=>{

        Logger.error("请求结果"+data.toString());

        let loginModel:LoginModel=JSON.parse(data.toString());

        let msg=loginModel.msg;

        let logindata:LoginData=loginModel.user;

        let token=loginModel.token;

        let userid=logindata.id;

        let options: preferences.Options = { name: 'myStore' };

        dataPreferences = preferences.getPreferencesSync(getContext(), options);

​

        if(loginModel.code===200){

          Logger.error("登录成功");

          dataPreferences.putSync('token',token);

          dataPreferences.putSync('id',userid);

          dataPreferences.putSync('username',this.accout);

          dataPreferences.putSync('password',this.password);

          dataPreferences!!.flush()

         router.pushUrl({

           url:'pages/Index'

         })

        }else {

          prompt.showToast({

            message:msg

          })

        }

      })

  }

​

​

  build() {

     Column(){

       Image($r('app.media.weixinicon'))

         .width(48)

         .height(48)

         .margin({top:100,bottom:8})

         .borderRadius(8)

         Text('登录界面')

           .fontSize(24)

           .fontWeight(FontWeight.Medium)

           .fontColor($r('app.color.title_text_color'))

       Text('登录账号以使用更多服务')

         .fontSize(16)

         .fontColor($r('app.color.login_more_text_color'))

         .margin({bottom:30,top:8})

​

       Row(){

         Text('账号').blackTextStyle()

         TextInput({placeholder:'请输入账号'})

           .maxLength(12)

           .type(InputType.Number)

           .inputStyle()

           .onChange((value:string)=>{

             this.accout=value;

           }).margin({left:20})

​

       }.justifyContent(FlexAlign.SpaceBetween)

       .width('100%')

       .margin({top:8})

       Line().lineStyle().margin({left:80})

​

​

​

       Row(){

         Text('密码').blackTextStyle()

         TextInput({placeholder:'请输入密码'})

           .maxLength(12)

           .type(InputType.Password)

           .inputStyle()

           .onChange((value:string)=>{

             this.password=value;

           }).margin({left:20})

       }.justifyContent(FlexAlign.SpaceBetween)

       .width('100%')

       .margin({top:8})

       Line().lineStyle().margin({left:80})

​

       Button('登录',{type:ButtonType.Capsule})

         .width('90%')

         .height(40)

         .fontSize(16)

         .fontWeight(FontWeight.Medium)

         .backgroundColor($r('app.color.login_button_color'))

         .margin({top:47,bottom:12})

         .onClick(()=>{

           this.login()

         })

       Text('注册账号').onClick(()=>{

         router.pushUrl({

           url:'pages/RegisterPage'

         })

       }).fontColor($r('app.color.login_blue_text_color'))

         .fontSize(12)

         .fontWeight(FontWeight.Medium)

     }.backgroundColor($r('app.color.background'))

    .height('100%')

    .width('100%')

    .padding({

      left:12,

      right:12,

      bottom:24

    })

​

  }

}

• 
  

  主页index

  
  

  import home from './Home/Home';
  
  import contacts from './Contact/Contacts';
  
  import Discover from './Discover/Discover';
  
  import My from './My/My';
  
  import common from '@ohos.app.ability.common';
  
  import prompt from '@ohos.promptAction';
  
  ​
  
  ​
  
  @Entry
  
  @Component
  
  struct Index {
  
    @State message: string = 'Hello World';
  
  ​
  
    private backTime :number=0;
  
    @State fontColor: string = '#182451'
  
    @State selectedFontColor: string = 'rgb(0,196,104)'
  
    private controller:TabsController=new TabsController();
  
    showtoast(msg:string){
  
      prompt.showToast({
  
        message:msg
  
      })
  
    }
  
  ​
  
  ​
  
  ​
  
    @State SelectPos:number=0;
  
    private  positionClick(){
  
      this.SelectPos=0;
  
      this.controller.changeIndex(0);
  
  ​
  
    }
  
  ​
  
    private  companyClick(){
  
      this.SelectPos=1;
  
      this.controller.changeIndex(1);
  
    }
  
    private  messageClick(){
  
      this.SelectPos=2;
  
      this.controller.changeIndex(2);
  
  ​
  
    }
  
  ​
  
    private  myClick(){
  
      this.SelectPos=3;
  
      this.controller.changeIndex(3);
  
  ​
  
    }
  
  ​
  
    onBackPress(): boolean | void {
  
      let nowtime=Date.now();
  
      if(nowtime-this.backTime<1000){
  
        const  mContext=getContext(this) as common.UIAbilityContext;
  
        mContext.terminateSelf()
  
      }else{
  
        this.backTime=nowtime;
  
        this.showtoast("再按一次将退出当前应用")
  
      }
  
      return true;
  
    }
  
  ​
  
  ​
  
   // ['微信','通讯录','发现','我']
  
    build() {
  
      Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){
  
        Tabs({controller:this.controller}){
  
          TabContent(){
  
            home();
  
          }
  
          TabContent(){
  
            contacts();
  
          }
  
          TabContent(){
  
            Discover();
  
          }
  
          TabContent(){
  
            My()
  
          }
  
        }.scrollable(false)
  
        .barHeight(0)
  
        .animationDuration(0)
  
  ​
  
        Row(){
  
          Column(){
  
            Image((this.SelectPos==0?$r('app.media.wetab01'):$r('app.media.wetab00')))
  
              .width(20).height(20)
  
              .margin({top:5})
  
            Text('微信')
  
              .size({width:'100%',height:30}).textAlign(TextAlign.Center)
  
              .fontSize(15)
  
              .fontColor((this.SelectPos==0?this.selectedFontColor:this.fontColor))
  
          }.layoutWeight(1)
  
          .backgroundColor($r('app.color.gray2'))
  
          .height('100%')
  
          .onClick(this.positionClick.bind(this))
  
  ​
  
  ​
  
  ​
  
          Column(){
  
            Image((this.SelectPos==1?$r('app.media.wetab11'):$r('app.media.wetab10')))
  
              .width(20).height(20)
  
              .margin({top:5})
  
            Text('通讯录')
  
              .size({width:'100%',height:30}).textAlign(TextAlign.Center)
  
              .fontSize(15)
  
              .fontColor((this.SelectPos==1?this.selectedFontColor:this.fontColor))
  
          }.layoutWeight(1)
  
          .backgroundColor($r('app.color.gray2'))
  
          .height('100%')
  
          .onClick(this.companyClick.bind(this))
  
  ​
  
  ​
  
          Column(){
  
            Image((this.SelectPos==2?$r('app.media.wetab21'):$r('app.media.wetab20')))
  
              .width(20).height(20)
  
              .margin({top:5})
  
            Text('发现')
  
              .size({width:'100%',height:30}).textAlign(TextAlign.Center)
  
              .fontSize(15)
  
              .fontColor((this.SelectPos==2?this.selectedFontColor:this.fontColor))
  
          }.layoutWeight(1)
  
          .backgroundColor($r('app.color.gray2'))
  
          .height('100%')
  
          .onClick(this.messageClick.bind(this))
  
  ​
  
  ​
  
          Column(){
  
            Image((this.SelectPos==5?$r('app.media.wetab31'):$r('app.media.wetab30')))
  
              .width(20).height(20)
  
              .margin({top:5})
  
            Text('我')
  
              .size({width:'100%',height:30}).textAlign(TextAlign.Center)
  
              .fontSize(15)
  
              .fontColor((this.SelectPos==5?this.selectedFontColor:this.fontColor))
  
          }.layoutWeight(1)
  
          .backgroundColor($r('app.color.gray2'))
  
          .height('100%')
  
          .onClick(this.myClick.bind(this))
  
        }.alignItems(VerticalAlign.Bottom).width('100%').height(60).margin({top:0,right:0,bottom:0,left:0})
  
  ​
  
      }.width('100%')
  
      .height('100%')
  
  ​
  
  ​
  
    }
  
  }
  
  

  
  

  后续目标

  
  
  
  
  1. 微信朋友圈
  
  
  2. 聊天菜单(相册，拍摄...)组件栏
  
  
  3. 语音|视频页面
  
  
  4. 支持群聊头像
  
  
  5. 支持图片，红包等聊天内容类型（现已支持图片类型）
  
  
  6. 二维码扫描
  
  
  
  

最后总结:

因为篇幅有限我也不能整个项目都展开讲，有兴趣的同学能可以关注我B站课程。 后续能我会把这个项目更新到项目里面 供大家学习

B站课程地址：http://www.bilibili.com/cheese/play…

团队介绍

团队介绍：坚果派由坚果等人创建，团队由12位华为HDE以及若干热爱鸿蒙的开发者和其他领域的三十余位万粉博主运营。专注于分享 HarmonyOS/OpenHarmony，ArkUI-X，元服务，仓颉，团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，目前已开发鸿蒙 原生应用，三方库60+，欢迎进行课程，项目等合作。