在学习一个新的事物时，都需要了解它的基础知识，本文简单介绍了一部分基础知识，想要全面了解的建议大家浏览一下官网的介绍uni-app官网

项目创建及运行

使用 HbuiderX 方式

通过 HBuilderX 可视化界面

使用vue-cli 的方式

• 创建项目 test-uniapp

vue create -p dcloudio/uni-preset-vue test-uniapp
复制代码

• 命令执行后选中默认模版

• 项目目录结构

• 项目启动 npm run serve

• 在浏览器查看效果

通过vue-cli命令行

父级及子级数据的传递

场景：提取一个模板（btn.vue）,在父组件里传递颜色参数给子组件，当子组件按钮被点击时，把操作的数据返回给父组件

新建目录和文件

• 在src下新建components
• 右击components文件新建页面

注意：新建页面后，会自动在pages.json里生成一条数据，如果你重命名了你的文件记得查看此处的配置是否更新！！！

btn.vue

• 基本展示
• 从props-color获取父级传递的参数

父组件调用

• 通过import导入

import btn from '@/components/btn/btn.vue'
复制代码

• 使用components声明

export default {
    components: { btn },
}
复制代码

• 在 view 内直接使用（直接传递color）

<template>
    <view class="content">
        <!--color传递给btn-->
	<btn color='red'></btn>
    </view>
</template>
复制代码

子穿父级

• 父级使用 change 方法获取

<btn color='red' @change="change"></btn>
复制代码

• 父级声明 change 方法

methods: {
    change(text){
    console.log('数据传递',text)
    }
}
复制代码

• 子集使用this.$emit()派发数据给父级

onclick(){
    console.log('我被点击了')
    // 第一个参数是，父级使用的@change，this指向的是data和props的数据
    this.$emit('change',this.textValue)
}
复制代码

• 效果展示

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

组件的条件编译

• 代码展示

<template>
	<view class="content">
		<!-- #ifndef H5 -->
			<div>不在H5中显示</div>
		<!-- #endif -->
		<!-- #ifdef H5 -->
			<div>仅在H5中显示</div>
		<!-- #endif -->
	</view>
</template>
复制代码

• 效果对比

在 HBuilderX 中，ctrl+alt+/ 即可生成正确注释（js：// 注释、css：/* 注释 */、vue/nvue模板： ）。

更多详情 条件编译

uni app 配置

HbuiderX配置

• 查看HbuiderX配置：HbuiderX->偏好设置->运行配置，找到微信开发者工具，检查是否正确，不正确，可以点击浏览进行配置修改

微信小程序配置

HbuiderX 吊起微信小程序

• 下载微信小程序
• 配置微信小程序：设置->安全设置->安全->打开服务端口

安卓配置

• 打开USB调试：oppo为例

关于手机->版本号点击四次->进入开发者模式->返回设置->点击更多设置->打开USB调试->打开文件传输
其他机型请百度：打开usb调试模式

• 选择运行

或者安装安卓模拟器模拟器安装请参考

IOS

• MAC直接使用xcode安装模拟器 安装模拟器步骤
• 选择运行iPhone模拟器即可

uni Cloud云开发平台

uniCloud官方文档

创建项目

获取uni app标识

• 注册账号
• 登录后点击重新获取

云空间的使用

创建云空间->关联云空间

云函数

• 创建云函数

• 右击login，上传

• 云函数的使用

onLoad() {
    uniCloud.callFunction({
        name:'login',
        success(res) {
            console.log('云函数调用',res)
        }
    })
}
复制代码

• 控制台输出

新增 collection.add

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
	//event为客户端上传的参数
	const collection = db.collection('user')
	//新增
	 let res = await collection.add([{
			name: '了了来了'
		},
		{
			name: '了了来了s'
		},
	]) 
	//返回数据给客户端
	return {
		code:200,
		msg:'成功',
		data:res.data
	}
};
复制代码

查询 doc(_id).get()

const res =await collection.doc('1').get()
复制代码

修改 doc(_id).update/set

• update：ID存在则修改，不存在则不修改

 const res =await collection.doc('1').update()({
	name:'wawaset ',
	gender:2
}) 
复制代码

• set：如果ID不存在，则新建一条ID为查询ID的数据

const res =await collection.doc('1').set({
	name:'wawaset ',
	gender:2
})
复制代码

删除 doc(_id).remove()

const res =await collection.doc('606427c74f2517000148f92c').remove()
复制代码

「从zero开始学习开发小程序」实战篇