uniapp printing function realization

The requirement to be realized is to install the Android APP packaged by uniapp into the SUNMI all-in-one machine (the all-in-one machine has a built-in printer), and automatically print the receipt after the user pays successfully. Three-party things, so I went to uniapp’s plug-in application market to search for printing plug-ins, and finally found a free and easy-to-use plug-in ( SUNMI printing plug- in), which contains basic usage of printing. Every time I test the printing effect, it is a packaged copy Go to the U disk and then go to the SUNMI all-in-one machine to install and test;

The method of installing and using the plug-in is as follows:

For example, if I print something on the test.vue page, just introduce the print plug-in to print on this page.

<template>
	<view>
		<button class="btn" @click="btnclick">点击测试打印</button>
		
	</view>
</template>

<script>
	const print = uni.requireNativePlugin('Sunmi-Print-Inner');   //在页面引入打印插件
	var isConnect = false;   //打印是否已连接判断
		
	export default {
		data() {
			return {
				startres:"",
				lianjie:"",
				riqi:"2023年05月10",
				list:[
					{f1:'某某某中心小学食堂',f3:"2023-05-13 12:22:33",f5:"0.01",f4:"张三"},
					{f1:'某某某中心小学食堂',f3:"2023-05-13 12:22:33",f5:"0.01",f4:"李四"},
				],
			}
		},
		methods: {
			btnclick(){
				this.start()
			},
			start() {
				let that=this
				print.connect(res => {
					isConnect = res.connect == "hello"
					that.print();//打印
				})          
			},
		    print() {
				let that=this
				if(isConnect){
					this.lianjie="isConnect连接成功，可以进行打印了"
					//打印小票
					/*print.printText({
					        text:"商米打印测试",
					        align:1,
					        size:30,
					        bold:true,
					        // underline:true,
					        // compact:true,
					        skip:true
					})
					//空白行分割之前打印内容（类似走空白）
					print.printDividingline({
						style:"4",
						height:"10"
					}),
					//按列打印一行简单的内容，每列分别居左、居中、居右
					print.printColumnsText({
					    texts:["一", "二二", "三三三"],
					    lengths:[10, 10, 10],
					    aligns:[0, 1, 2]
					})
					//虚线分割线      
					print.printDividingline({
					                style:"3",
					                height:"3"
					            }),
								
					//打印网络端的图片logo
					print.printBitmap({
					    url:"http://img.pconline.com.cn/images/upload/upc/tx/itbbs/1607/06/c3/23806812_1467754402821_1024x1024.jpg",
					    align:1
					})
					//空白行分割之后的打印内容（类似走空白）
					print.printDividingline({
					                style:"4",
					                height:"10"
					            }),
					*/
					let list=that.list
					let riqi=that.riqi
					for(let i=0;i<list.length;i++){
						print.printDividingline({
							style:"4",
							height:"50"
						})
						print.printText({
						        text:list[i].f1,
						        align:1,
						        size:32,
						        bold:true,
						})
						print.printDividingline({
							style:"4",
							height:"20"
						})
						print.printText({
						        text:"     支付时间："+list[i].f3,
						        align:0,
						        size:24,
						})
						print.printDividingline({
							style:"4",
							height:"10"
						})
						print.printBitmap({
						    path:"/static/jiucanquan.png",
						    align:1
						})
						print.printDividingline({
							style:"4",
							height:"10"
						})
						print.printText({
						        text:"     金额："+list[i].f5+"元",
						        align:0,
						        size:24,
						})
						print.printDividingline({
							style:"4",
							height:"10"
						})
						print.printText({
						        text:"     就餐日期："+riqi,
						        align:0,
						        size:24,
						})
						print.printDividingline({
							style:"4",
							height:"10"
						})
						print.printText({
						        text:"     就餐人员："+list[i].f4,
						        align:0,
						        size:24,
						})
						print.printDividingline({
							style:"4",
							height:"50"
						})
						print.printText({
						        text:"当日有效 过期作废",
						        align:1,
						        size:28,
						})
						print.printDividingline({
							style:"4",
							height:"6"
						})
						print.printText({
						        text:"教体系统食堂财务平台",
						        align:1,
						        size:28,
						})
						//空白行分割之前打印内容（类似走空白）
						print.printDividingline({
							style:"4",
							height:"60"
						})
						print.printDividingline({
							style:"4",
							height:"60"
						})
						print.printDividingline({
							style:"4",
							height:"30"
						})
						//虚线分割线
						print.printDividingline({
							style:"3",
							height:"3"
						})
						//切纸
						print.cutPaper()
					}
					
					that.over() //最后关闭打印
					
				}
		    },
			over() {
				print.disconnect()
			}
		}
	}
</script>
<style>

</style>

 The printing effect is as follows:

The position setting of the printed content only has three effects: left, center and right. If you want to move inward, you can add a space in front of the text. A space occupies one character, and a Chinese character occupies two characters. If you want to print complex styles , you can cut a picture and print it as a picture.