阅读 253

「UNIAPP从zero开始学习开发小程序」基础篇

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

项目创建及运行

使用 HbuiderX 方式

通过 HBuilderX 可视化界面

使用vue-cli 的方式

  • 创建项目 test-uniapp
vue create -p dcloudio/uni-preset-vue test-uniapp
复制代码
  • 命令执行后选中默认模版

image.png

  • 项目目录结构

image.png

  • 项目启动 npm run serve

image.png

  • 在浏览器查看效果

image.png 通过vue-cli命令行

父级及子级数据的传递

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

新建目录和文件

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

image.png

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

image.png

btn.vue

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

image.png

父组件调用

  • 通过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)
}
复制代码
  • 效果展示

image.png

条件编译

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

image.png

组件的条件编译

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

image.png

在 HBuilderX 中,ctrl+alt+/ 即可生成正确注释(js:// 注释、css:/* 注释 */、vue/nvue模板: )。

image.png 更多详情 条件编译

uni app 配置

HbuiderX配置

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

image.png

微信小程序配置

HbuiderX 吊起微信小程序

image.png

安卓配置

  • 打开USB调试:oppo为例

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

  • 选择运行

image.png

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

IOS

uni Cloud云开发平台

uniCloud官方文档

创建项目

image.png

获取uni app标识

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

image.png

云空间的使用

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

Mar-31-2021 14-56-48.gif

云函数

  • 创建云函数

image.png

  • 右击login,上传

image.png

  • 云函数的使用
onLoad() {
    uniCloud.callFunction({
        name:'login',
        success(res) {
            console.log('云函数调用',res)
        }
    })
}
复制代码
  • 控制台输出

image.png

新增 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开始学习开发小程序」实战篇

文章分类
前端
文章标签