前端笔记-uni-app

这里总结uniapp主要是为了开发微信小程序做准备

微信小程序开发用原生还是框架？ - 百度文库

使用uni-app开发小程序，比直接原生开发小程序好在哪里 - 知乎

主要uniapp使用的是vue模型，所以使用uni-app完成微信小程序开发需要先熟悉vue和微信小程序的一些知识。

一. 安装对应的编译器（必须）

uni-app官网

 打开后安装所需插件

 二. 创建新项目

选择uni-app 我这里用的是vue2

1. 目录结构

 和微信小程序一模一样基本

但是页面是vue文件

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{
   
   {title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

这个就是生成的vue文件，只能说终结缝合怪。

微信小程序的标签加上vue的js模板。

三. 样式

uniapp使用scss

uniapp 添加scss全局变量、scss公共类_今天超市大减价的博客-CSDN博客