uniapp入门学习

uni-app介绍

什么是ui-app

ui-app是一个使用vue.js语法来开发所有前端应用的框架
（网页应用、安卓应用、苹果应用、各种小程序应用（微信、qq、支付宝等））
##线上产品
csdn ，开源中国，咪咕商城、中国银联、招商银行等等

ui-app社区和规模

380万开发者、几十万应用案例、8.5亿手机端用户、数千款ui-app插件、70+微信/qq群

uni-app基础

ui-app初体验

开发方式

1.使用DCloud的hbuilderX快速开发
2.使用脚手架来快速搭建和开发

1. 全局安装
   npm install -g @vue/cli

2. 创建项目
   vue create -p dcloudio/uni-preset-vue my-project

3. 启动项目
   npm run dev:mp-weixin

4. 微信小程序开发者工具导入dist

• 搭建过程可能出现vue和vue-template-complier版本不一致的问题。。。此时根据提示，重新安装对应的vue版本即可。npm install vue@2.6.10然后再重新运行项目 npm run dev:mp-weixin

项目结构介绍

项目目录

public ->index.html 给uiapp 做网页应用， 提供模板的功能
.gitignore ->git管理文件
babel.config.js ->js版本管理 比如es5转es6
package.json\package-lock.json ->node项目必备的包的描述文件
postcss.config.js->定义如何编译css代码,添加什么前缀、版本啊
README.md ->编写文字给用户看
tsconfig.json ->如果项目用js开发，可能会对语法进行规范，在这里进行配置
src中的目录结构：

pages：页面
static：静态资源（不要放样式）
App.vue：整个应用启动做的事情
main.js：入口文件（增加函数、方法等可以在这里定义）
pages.js:新增页面时，既要在pages增加文件，同时也需要在这里面配置文档路径、标题等。这里面有个globalStyle定义全局窗口样式（标题、文字、颜色等） （路劲谁放在前面谁就是首页）
uni.scss:这里是uni-app内置的常用样式变量

样式和sass

样式和sass

uniapp中直接支持小程序的rpx和h5的vw、vh

• rpx是小程序中的单位，750rpx=屏幕的宽度
• vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度

uniapp中内置有sass的配置了，怎么使用？

1. 首先全局安装对应的依赖

npm install sass-loader node-sass

2. vue组件中，在style标签上加入属性<style lang='scss'>

基本演示代码（pages/index2/index.html）：

<template>
	<view class="content">
		  <view class="rpx">rpx</view> 
          <view class="vw">vw</view>
          <view class="sass" >sass</view>
	</view>
</template>

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

		},
		methods: {
   

		}
	}
</script>

<style lang="scss">
	/*rpx是小程序中的单位，750rpx=屏幕的宽度*/
	.rpx{
   
        width: 750rpx;
        height: 100px;
        background-color: aqua;
    }
    .vw{
   
        /*vh、vw是h5中的单位，100vh=屏幕的高度，100vm=屏幕的宽度*/
        width: 50vw;
        height: 100px;
        background-color: tan;

    }
    .content{
   
        .sass{
   
            background-color: red;
            color:$uni-text-color-grey;//使用uni.scss里面定义好的颜色
        }

    }
</style>

基本语法

数据的展示

1. js里data中定义数据
2. template通过{ {数据}}展示

<view>{
   {
   msg}}</view>

4. 在标签属性上通过:data-index=‘数据’使用

 <view :data-color="color">color</view>

数据的循环

1. 通过特定的语法v-for将数据显示
2. item和index分别为循环项和循环索引
3. :key指定唯一的属性，用来提高循环效率

  <view v-for="(item,index) in arr" :key="item.id">{
   {
   item.id}}--{
   {
   item.text}}--{
   {
   index}}</view>

data(){
   
	return{
   
		arr:[
		     {
   id:0,text:"苹果"},