本文主要是介绍基于uniapp的QQ小程序开发（前端篇），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、uniapp简单介绍

1.什么是uniapp

        uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

2.uni-app的优点

• 与小程序的组件、API一致；
• 支持vue语法，微信小程序API
• 支持微信小程序自定义组件及JS SDK
• App端支持和原生混合编码
• 插件丰富,DCloud将发布插件到市场

3.配置及下载

        由于Hbuilder是uniapp的内置开发工具，下载hbuilder即可HBuilderX-高效极客技巧

二、开发前准备

1.下载hbuilder与QQ小程序开发者工具

        QQ小程序开发者工具下载地址小程序开发者工具 | 文档

        hbuilder下载请参见上文

2.在hbuilder中创建uniapp项目

        依次点击“文件->新建”后，弹出如下弹窗，

         创建好之后这就是我们项目中的各个文件夹

        其中各个文件用途如下（图片转自uni-app入门_呱呱的博客-CSDN博客_uni-app）。

        需要注意的是初次创建时components、htbrids、platforms、wxcomponents是不存在的。

3.运行项目

        点击“工具栏”中的运行符号，弹出各个运行平台。开发不同平台的小程序可以选择不同的开发者工具。需要注意的是，当我们运行到qq开发者工具时，需要添加项目。我们找到项目目录下的mp-qq进行在qq开发者工具中的加载。

         加载完毕之后我们就已经可以在qq开发者工具中实时查看自己项目运行情况了。由于用的uniapp开发，初始界面是默认的，如下图。

         这时我们已经做好了开发前的准备，现在可以在hbuilder中进行开发了。

三、进行开发

1.开发规范

        页面文件需要遵从Vue 单文件组件规范，具体文档请看单文件组件 — Vue.js。

2.开发需要语言

        由于是Vue框架，我们需要三门基础语言进行页面开发。 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，用到的语言分别是html、css、JavaScript。

        这几门语言的学习可以参照B站课程2022年度全网最全Web前端学习路线 - 哔哩哔哩

3.如何开发

        uniapp开发的框架可以参照uniapp的官方文档uni-app官网。按照需求进行页面配置和全局配置，配置好之后我们可以进行单个页面的开发。

        由于uniapp自带的组件的用途并不是很广泛，我们可以再官方的组件市场下载需要的插件，插架市场链接DCloud 插件市场，可以将完整的插件下载直接下载到hbuilder中进行代码的参照和学习。

 四、实例

        这是我的用uni-forms、uni-easyinput等插件开发的一个简单的投稿页面。

        操作端图片如下：

         下面是此页面的源码，供大家参考。

<template>
	<view class="container">
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">你好！这是申申如也的一个测试</text>
		</uni-card>

		<uni-section title="请填写表单" type="line">
			<view class="example">

				<uni-forms ref="Form" :rules="rules" :modelValue="FormData" labelPosition="top">
					<uni-forms-item label="类型" required name="theme">
						<uni-data-checkbox v-model="FormData.theme" :localdata="themes" />
					</uni-forms-item>

					<uni-forms-item label="标题" required name="title">
						<uni-easyinput v-model="FormData.title" placeholder="请输入标题" />
					</uni-forms-item>

					<uni-forms-item label="详细描述" name="introduction">
						<uni-easyinput type="textarea" v-model="FormData.introduction" placeholder="请输入描述" />
					</uni-forms-item>

					<uni-forms-item label="填入照片" name="image">
						<view class="imag">
							<image class="imagclass" style="height: 150rpx;width: 150rpx;" :src="FormData.imagsrc"
								@tap="chooseImag"></image>
						</view>
					</uni-forms-item>

					<uni-forms-item label="联系方式">
						<uni-forms-item label="QQ" name="QQ" labelPosition="left">
							<uni-easyinput v-model="FormData.qq" placeholder="QQ" />
						</uni-forms-item>
						<uni-forms-item label="手机" name="phonenumber" labelPosition="left">
							<uni-easyinput  v-model="FormData.phonenumber" placeholder="手机" />
						</uni-forms-item>
					</uni-forms-item>

				</uni-forms>
				<button type="primary" @click="submit('Form')">提交</button>
			</view>
		</uni-section>

	</view>
</template>

<script>
	var that = this;
	export default {

		data() {
			return {
				//基础数据

				FormData: {
					imagsrc: "../../static/logo.png",
					title: "",
					theme: 0,
					introduction: "",
					qq: "",
					phonenumber: ""
				},
				themes: [{
					text: '表白捞人',
					value: 0
				}, {
					text: '求助提问',
					value: 1
				}, {
					text: '寻物启事',
					value: 2
				}, {
					text: '失物招领',
					value: 3
				}, {
					text: '分享安利',
					value: 4
				}, {
					text: '吐槽',
					value: 5
				}],

				rules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '请输入标题'
						}]
					}
				}
			}
		},



		onLoad() {},
		/* onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.Form.setRules(this.rules)
		}, */

		methods: {
			onClickItem(e) {
				console.log(e);
				this.current = e.currentIndex
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			chooseImag() {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						_this.FormData.imagsrc = res.tempFilePaths[0];
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>

 五、结语

        本人由于是第一次开发小程序的前端，对vue没有一个很深的理解，如果文中有什么问题还请大家批评指正。我也在学习前后端链接和后端的一些东西，后期会写一写学习日记，也给大家提供一个参考，目前想的是后端用java做~

        文章多有瑕疵，若得诸位共赏，不胜欢喜，请诸君畅所欲言，以待下次相约，谢观！

这篇关于基于uniapp的QQ小程序开发（前端篇）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！