uni-app开发 经验和技巧总结

文章目录

各位粉丝小伙伴、小哥哥小姐姐、路过的读者朋友，感谢您的浏览和支持。 有幸入围一年一度的CSDN博客之星评选活动，希望大家可以点击链接 https://bss.csdn.net/m/topic/blog_star2020/detail?username=cufeecr 或扫描下方二维码投出宝贵的一票或者多票，让我更进一步，江湖救急，要是有帮得上忙的地方绝对义不容辞，可以为你互投，也可以帮忙下载资源，还可以互关三连，多谢啦。 新的一年，愿我们一起变得更强???

前言

uni-app 是一个基于 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 在开发过程中可能会用到一些经验和技巧，可以加速开发，归纳如下。

1.自定义组件模板

在开发时，很多情况下需要自定义组件，在自定义组件时，可以使用HBuilderX提供的模板，包括默认模板、使用less的组件等，但是因为一般在自定义模板时需要定义name、props等，而这些组件中并未包含该属性，因此可以自定义模板。 点击创建组件窗口右上角的自定义模板，如下：

uni-app self define template click

在弹出的目录中创建模板名.txt，里边写入模板内容即可，例如创建带有属性的模板.txt如下：

<template name="组件名称">
	<view>
		......
	</view>
</template>
<script>
	export default {
		name: "组件名称",
		//属性
		props: {
			属性名称: {
				type: String, //属性类型
				value: "值"
			},
			......
		},
		//组件生命周期
		created: function(e) {

		},
		methods: {
			函数名称: function(obj) {

			},
		}
	}
</script>
<style>
	**组件样式**
</style>

保存后，即可在创建组件时选择该模板。