This issue recommends an out-of-the-box web mobile component – the front-end shop.

Front-end shop is a web mobile solution based on Vue, uniApp, ColorUi and uView. It uses the latest front-end technology stack and perfectly supports wechat mini programs, including: Custom TabBar and top, map track playback, electronic signature, picture editor, custom camera/keyboard, photo watermark, online answer, ID recognition, peripheral location query, document preview, various charts, administrative area, poster generator, video playback, theme switching, timeline, waterfall flow, leaderboard, curriculum, gradient animation, loading animation The project uses the latest front-end technology stack, which can help you quickly build mobile projects.

Features

multi-end packaging : fast packaging and delivery, perfect support for wechat applet, H5, Android and IOS

Latest technology stack : Based on Vue, uniApp, colorUi, uView and other latest technology stack development

️ Rich cases : map track playback, electronic signature, picture editor, custom camera/keyboard, image watermarking, etc.

Component packaging : Secondary packaging of components with high frequency of daily use to meet basic work requirements

Diversified theme Ui : diversified Ui design color ratio, component style adjustment, theme can be switched

Excellent performance and experience : page loading speed is fast, App side supports native rendering, which can support a smoother user experience

Installation tutorial

1. Code acquisition :

git clone https://gitee.com/kevin_chou/qdpz.git

2. Download and install: “HBuildX”, “wechat Developer Tools”

3. Scan code and log in wechat developer tool

4. Drag the project into 【HBuildX】- Run – wechat mini program – Finish

Component directory

.
└─tn_components // Component template page entry 
	├─drag_demo				// Levitated sphere
	├─ancube.vue			// Levitated sphere
	├─anloading.vue			// Custom load box
	└─bgcolor.vue			// Background color
	└─bggrad.vue			// Background gradient
	└─charts.vue			// Graphic presentation
	└─clock.vue				// Daily check-in
	└─company.vue			// Custom camera
	└─course.vue			// Class information
	└─discern.vue			// Document recognition
	└─district.vue			// Administrative map
	└─guide.vue				// Introduction page
	└─imageEditor.vue		// Picture editor
	└─keyboard.vue			// Custom keyboard
	└─mapLocus.vue			// Map track
	└─medal.vue				// Member center
	└─mimicry.vue			// neomimicry
	└─openDocument.vue		// Document preview
	└─pano.vue				// webview Amap
	└─poster.vue			// Poster generator
	└─request.vue			// Simulated data request
	└─salary.vue			// Leaderboard
	└─search.vue			// Convenient query
	└─sign.vue				// Hand signature
	└─timeline.vue			// timeline
	└─timetables.vue		// Curriculum schedule

Example

ID identification :

Page navigation bar, top bar, top reminder and other parts refer to colorUi/uView implementation, style components do not contain logic code

Description :

• Compatible with H5, wechat mini program, App, other platforms have not been tested.
• The personnel information in the screenshot is random input and is not real.
• Based on the second modification of the original author can access Baidu/Ali face recognition, the page only provides style

Page directory :

.
├─tn_components // Component template page entry 
	├─discern				// ⬅️ Document recognition

Upload code :

uploadImg() {
	uni.chooseImage({
		count: 1,
		success: (chooseImageRes) => {
			const tempFilePaths = chooseImageRes.tempFilePaths;
			console.log(chooseImageRes);
			uni.showToast({
				icon: 'none',
				title: 'The upload succeeded. No interface preview is available',
				duration: 2000
			});
			return false;
			uni.uploadFile({
				url: https://www.zhoukaiwen.com, //Only example, not real interface address 
				filePath: tempFilePaths[0],
				name: 'file',
				header: {
					"Content-Type": "multipart/form-data",
					'X-Access-Token': uni.getStorageSync('token'),
				},
				success: (uploadFileRes) => {
					this.form.userBaseInfo.headPhoto = JSON.parse(uploadFileRes.data).message
				}
			});
		}
	});
}

Partial screenshot

This project uses the MIT open source license, and you can read more on your own.