uni-app开发初体验

1.开发工具下载

地址: https://www.dcloud.io/hbuilderx.html

2.开发文档

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
uni-app开发文档: https://uniapp.dcloud.io/
vue开发文档:https://cn.vuejs.org/v2/guide/
注意:

• 由于 JavaScript 的限制，Vue 不能检测以下数组的变动:

1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如：vm.items.length = newLength
3. Vue 不能检测对象属性的添加或删除
4. 解决方案:Vue.set(object, propertyName, value)

• Class/Style绑定的时候对象的属性带有 - 必须用引号包起来
  比如:v-bind:class="{ active: isActive, ‘text-danger’: hasError }“是可以的
  v-bind:class=”{ active: isActive, text-danger: hasError }"则没有效果

3.项目源码

gitee: https://gitee.com/zouchengxin/uni-app-vultr1

4.体验

h5版: https://singletondog.top/uni-app-vultr1/unpackage/dist/build/h5/#/
app下载: https://gitee.com/zouchengxin/uni-app-vultr1/blob/master/unpackage/release/ 或 https://singletondog.top/uni-app-vultr1/unpackage/release/
android下载: https://gitee.com/zouchengxin/uni-app-vultr1/blob/master/unpackage/release/__UNI__C2730D1_0916212626.apk
ios下载: https://gitee.com/zouchengxin/uni-app-vultr1/blob/master/unpackage/release/__UNI__C2730D1_0916211213.ipa

5.uni-app组件式开发:

1. 组件值/事件传递
   (/components/component-demo/component-demo.vue)组件添加props属性

<template>
	<text @click='say'>{{text}}</text>
</template>
<script>
export default {
		props:{
			text:{
				type:String,
				default:'hello'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			say(){
				console.log(this.text);
				this.$emit('onClick',this.text);
			}
		}
	}
</script>
<style>

</style>

使用组件的地方在组件上添加对应属性

<template>
	<view>
		<uniCom text='hello...' @onClick="onSay('are you ok?')"></uniCom>
	</view>
</template>

<script>
	import uniCom from "@/components/component-demo/component-demo.vue";
	export default {
		components:{
			uniCom
		},
		data() {
			return {
				
			};
	},
		
		onLoad(options){
			
		},
		methods:{
			onSay(str){
				console.log(str);
			}
		}
	}
</script>
<style>

</style>

2. 结果: