uni-app如何自定义内容生成二维码？

学而不思则罔，思而不学则殆

注：
此次仅演示HbuildX编辑器的操作流程

1. 创建uni-app项目

关于创建uni-app项目的步骤，不再进行赘述，可查看 【uni-app 创建项目】

2.HbuildX插件市场安装相关插件

插件地址： https://ext.dcloud.net.cn/plugin?id=39#detail

点击该按钮，即可将插件安装到项目中.
会自动生成相关文件 /project_name/components/tki-qrcode

3.使用该插件

3.1 在需要使用的页面进行引入

<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		}
	}
</script>

3.2 页面上使用该插件

<!-- 二维码展示区域 -->
<view class="qrcode-wrap">
	<view class="qrimg">
		<tki-qrcode ref="qrcode" :cid="cid" :val="val" :size="size" :unit="unit" :background="background"
					:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv"
					:onval="onval" :loadMake="loadMake" :usingComponents="usingComponents" :showLoading="showLoading"
					:loadingText="loadingText" @result="qrR" />
	</view>
</view>

data() {
			return {
				cid: 'tki-qrcode-canvas', // 二维码唯一ID
				val: 'https://blog.csdn.net/Dark_programmer', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#000000', // 背景色
				foreground: '#ffffff', // 前景色
				pdground: '#ffffff', // 角标色
				icon: '', // 二维码图标 二维码中心的icon图标
				iconsize: 60, // 二维码中心icon图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时是否自动重新生成二维码
				loadMake: true, // 组件加载完成后是否自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				usingComponents: false, // 是否使用了自定义组件模式
				showLoading: true, // 是否显示loading
				loadingText: '二维码生成中', // loading展示文案
			}
		},

如此就可以展示出二维码了

---

---

完整代码展示：

<template>
	<view class="container">
		<!-- 二维码展示区域 -->
		<view class="qrcode-wrap">
			<view class="qrimg">
				<tki-qrcode ref="qrcode" :cid="cid" :val="val" :size="size" :unit="unit" :background="background"
					:foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv"
					:onval="onval" :loadMake="loadMake" :usingComponents="usingComponents" :showLoading="showLoading"
					:loadingText="loadingText" @result="qrR" />
			</view>
		</view>
		<!-- 二维码配置区域 -->
		<view class="qrcode-setting">
			<label>
				二维码内容
			</label>
			<input type="text" v-model="val" />
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
		data() {
			return {
				cid: 'tki-qrcode-canvas', // 二维码唯一ID
				val: 'https://blog.csdn.net/Dark_programmer', // 要生成的二维码值
				size: 400, // 二维码大小
				unit: 'upx', // 单位
				background: '#000000', // 背景色
				foreground: '#ffffff', // 前景色
				pdground: '#ffffff', // 角标色
				icon: '', // 二维码图标 二维码中心的icon图标
				iconsize: 60, // 二维码中心icon图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时是否自动重新生成二维码
				loadMake: true, // 组件加载完成后是否自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				usingComponents: false, // 是否使用了自定义组件模式
				showLoading: true, // 是否显示loading
				loadingText: '二维码生成中', // loading展示文案
			}
		},
		beforeMount() {
			// 因为H5会产生跨域问题，所以进行环境区分来赋值
			this.icon = 'http://touxiangkong.com/uploads/allimg/20203301301/2020/3/YNVjqi.jpg'
			// #ifdef H5
			this.icon = '/imgApi/uploads/allimg/20203301301/2020/3/YNVjqi.jpg'
			// #endif
		},

		methods: {
			qrR() {
				console.log('qrR')
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.qrcode-wrap {
			box-sizing: border-box;
			padding: 20rpx 40rpx;
			display: flex;
			justify-content: center;
			height: 500rpx;

			.tki-qrcode {
				padding: 30rpx;
				height: 400rpx;
				border-radius: 16rpx;
				background-color: #e8de61;
			}
		}

		.qrcode-setting {
			margin-top: 30rpx;
			padding: 10rpx 20rpx;
			box-sizing: border-box;

			input {
				border: 1rpx solid #e9f0fd;
				height: 64rpx;
				line-height: 64rpx;
				text-indent: 12rpx;
				border-radius: 12rpx;
			}
		}
	}
</style>

效果图：

关于H5请求会产生跨域问题，可查看 【uni-app 跨域问题】