uniapp

关于uniapp是什么？？
就是一个非常强大的 多应用开发平台，使用uniapp，可以开发各种app和各种小程序

下载

uniapp官网 uni-app快速上手 | uni-app官网 (dcloud.net.cn)
HBuilderX简介 - HBuilderX 文档 (dcloud.net.cn)

基本模板项目目录介绍

pages/ 里边存储的就是整个项目的所有页面
     目录/ 页面名
     xxx.vue 当前目录的文件 这里存储的是当前这个页面中的所有内容
    
    <template>
        这里写的是页面的内容（例：文本 视频 图片等等）
    </template>
    <script>
        这里是所有的页面数据和逻辑代码 
        	export default {   
		data() {  //data表示数据存储的位置
			return {
				title: 'Hello'
			}
		},
		onLoad() { //内置的具有指定功能的自动执行的函数

		},
		methods: { // 这里写的是自定义函数存储位置

		}
	}
    </script>
    <style>
        这里写的是页面的样式代码
    </style>
    
    
static/  静态资源目录 视频图片什么的
App.vue 总控制和总样式文件
index.html 入口文件 不用动不用修改
main.js 入口的js文件 不动不改
manifest.json 配置文件 这个文件是由 uniapp 特殊处理的文件，是已经变成图形化界面的文件
pages.json 文件
    "pages":[
    { 每有一个{}就代表有一个页
        "path" : "page/路径/文件", //路径
        "style": { //控制当前页的导航栏样式 
				"navigationBarTitleText": "uni-app" //导航栏标题文字内容 
			}
    }
    {
    "path":" page/路径"
    
    },
    {
        ......
    }
    ],
    	"globalStyle": { //全局导航栏样式
		"navigationBarTextStyle": "black", //导航栏字体颜色  只能是黑白！
		"navigationBarTitleText": "uni-app", //导航栏 文本内容
		"navigationBarBackgroundColor": "#F8F8F8", // 导航栏背景颜色
                                                颜色表达方式：
                                                1. 使用英文 red green ....
                                                2. 使用十六进制值  0123456789abcdef
                                                    #000000 #7bb707
                                                
		"backgroundColor": "#F8F8F8",
                "navigationStyle": "custom" //控制是否显示导航栏
	}

uniapp 里的 data

在页面上显示文本 之前我们是直接写的，类似于商品名 商品价格等信息 就应该定义到对应的位置

注意： 在uniapp中 数据需要声明script 里的 data 中 return 中的 {} 里

data() {
					return {
						//键:值,
						name: "zhangsan",
						age: 19,
						sex: "男"
						  // 注意 如果值是字符类型的数据 必须用单双引号包含
					}
				},

如果需要在页面（template里使用）data中的数据，需要使用文本插值语法{{键}}

<view class="">
			姓名:{{name}}
			年龄:{{age}}
			性别:{{sex}}
			{{bool}}
			同学:{{names[2]}}
			商品名:{{gname.name}}
			商品单价:{{gname.price}}
			商品库存:{{gname.num}}
		</view>

<script>
   export default {
   	data() {
               			return {
   			name: "李四",
   			age: 19,
   			sex: '男',
   			bool: true,
   			names: [
   				'张三',
   				'李四',
   				'王五',
   				'马六'
   			],
   			gname: {
   				"name": "男装",
   				"price": "100",
   				"num": "24"
   			},
   			arrobj: [{
   					"name": "男装",
   					"price": "100",
   					"num": "24"
   				},
   				{
   					"name": "男装",
   					"price": "100",
   					"num": "24"
   				},
   				{
   					"name": "男装",
   					"price": "100",
   					"num": "24"
   				},
   				{
   					"name": "男装",
   					"price": "100",
   					"num": "24"
   				}
   			]
   		}
   	},
   	methods: {

   	}
   }
</script>

data中 数据的值的类型可以是：

1. 字符串

   “abc” “张三”
   关于访问数据 {{键名}}

2. 数值

   1 2 3 24 44242
   关于访问数据 {{键名}}

3. 布尔类型

   true 真 满足 false 假 不满足
   9>3 结果也是 true;
   关于访问数据 {{键名}}

4. 数组类型

   ['值1','值2','值3',......]
    键:[1,2,3,4,5,6] //数字不需要引号
    关于访问数据  {{键名[索引值]}}<br>
   

注意:数组中的索引值是从0开始的

5. 对象

   {键1:'值1',键2:'值2',键3:'值3'.....}

6. 数组对象

   数组中的每一个值是一个对象
   

[
{键1:值1,键2:值2,.......}
{键1:值1,键2:值2,.......}
{键1:值1,键2:值2,.......}
{键1:值1,键2:值2,.......}
]

uniapp中的属性绑定

例如下边的这个案例，我们需要将 图片的地址定义到数据中，但是默认无法解析isrc这个数据

<image src="isrc" mode=""></image>
data() {
			return {
				isrc: "../../static/demo.png",
			}
		},

属性绑定的语法格式 <组件 属性="data中的键" ></组件>
在属性前加 : 就可以让属性的属性值解析data中的数据 <image :src="isrc" mode=""></image>

uniapp 里的 method

函数怎么声明

methods:{
				函数名(形参1,形参2,......){
					//函数核心代码
					//在函数内部，获取到data中的值 只需要加个this 
                                        // this.xx 获取data中的值
                                        // 能获取值就能修改 data中的值
				}
			}
                        

函数调用(使用函数)
{{ 函数名(实参1,实参2,......) }}