一、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做~
文章多有瑕疵，若得诸位共赏，不胜欢喜，请诸君畅所欲言，以待下次相约，谢观！