유니앱 소개 :
개요: uni-app은 프론트엔드 교차 플랫폼 프레임워크입니다. uni-app을 알고 있다면 일련의 코드(Vue 구문과 유사)를 사용하여 Android, ios 및 다양한 소형 프로그램(WeChat, qq, 알리페이 등) .
생태학: 완전한 생태학, 많은 타사 액세스는 간단한 구성만 필요합니다.
장점: 많은 개발자, 무제한 플랫폼 기능(네이티브 코드 혼합 및 네이티브 SDK 통합 지원), 우수한 성능, 풍부한 주변 생태계, 낮은 학습 비용 및 낮은 개발 비용
코드 스타일: Vue 코드 개발 스타일이 전체적으로 채택되어 Vue 구문이 지원됩니다.컴포넌트 라벨은 애플릿 사양에 가깝습니다.h5를 게시할 때 모든 Vue 구문을 지원하고 APP 및 애플릿에 게시할 때 일부를 지원합니다. Vue 구문.
uni-app과 vue 및 애플릿의 관계: vue의 많은 하드웨어 인터페이스는 지원하지 않지만 애플릿은 지원하고, uni-app은 각각의 장점을 결합하며, 인터페이스 기능은 WeChat 애플릿 사양에 가깝습니다(wx는 uni로 대체됨). 전체 코드 스타일은 vue에 가깝고 vue의 수명 주기를 기반으로 모든 wechat 애플릿 수명 주기도 지원합니다.
구성 요소 기반 개발 지원: Vue와 마찬가지로 사용자 지정 구성 요소 개발 방법을 지원하여 개발 효율성을 크게 높이고 소프트웨어 개발 아이디어(높은 응집력 및 낮은 결합)를 완전히 준수합니다.
uni-app 사양: vue SFC(single-file component) 사양을 따르고, 데이터 바인딩 및 이벤트 처리는 vue와 동일합니다. 여러 터미널과 호환되도록 플렉스 레이아웃을 사용하는 것이 좋습니다.
웹 코드와 유니앱 간의 간단한 비교:
<!-- web中标签写法： -->
<div class="main_box">
<img src="logo.png" alt="">
<p>
<span>标题:xxx</span>
</p>
</div>
<!-- uni-app中标签写法： -->
<view class="main_box">
<image src="logo.png" alt=""></image>
<view>
<text>标题:xxx</text>
</view>
</view>
조건부 컴파일:
크로스 플랫폼 개발 시 일부 호환성 문제가 발생할 수 밖에 없습니다. 구체적인 구문은 다음과 같습니다.
#ifdef APP-PLUS
写仅支持app下的代码块
#endif
#ifdef H5
写除h5平台以外平台的代码
#endif
#ifdef H5||MP-WEIXIN
写H5或微信小程序代码块
#endif
앱 측 Nvue 개발:
Nvue는 nativeVue(접미사 nvue가 있는 파일)의 약어이며 weex 렌더링 기능이 내장되어 있습니다(Weex는 개발자가 웹과 유사한 구문을 사용하여 iOS, Android 및 웹 애플리케이션을 단일 코드 기반) Nvue에서는 uni-app 구문을 사용하는 앱과 Weex를 사용하여 기본 앱 경험을 얻을 수 있습니다.
HTML5+:
HTML5+는 단일 앱 개발에서 구현하기 어려운 특정 기능을 해결하기 위해 앱 측에서 기본 Android 및 iOS 플러그인을 직접 호출할 수 있으며 개발 기능을 풍부하게 하는 많은 내장 API가 있습니다.
uni-app 지식 포인트:
구성 요소 : 사용자 지정 구성 요소, 기본 구성 요소
API : 네트워크 상태, 네트워크 요청, 시스템 정보 등 획득, 탐색 점프 API, uni-app에는 vue-router가 없지만 애플릿의 페이지 전환에 더 가깝습니다.
수명 주기:
구문 : 조건부 판단, 목록 렌더링 등, 레이아웃 스타일 처리, less/sass 및 기타 스타일 전처리기 사용
uni-app에 있는 각 .vue 파일의 구문:
<template>
<!-- v-bind动态绑定class事件名称,v-bind可以简写为冒号：，以及后面接数组或对象，语法和vue中一样，注意这里没有{
{}} -->
<view v-bind:class="className">
<!-- 数据绑定：{
{title}} -->
<text class="title">{
{title}}</text>
<!-- v-on:事件绑定，v-on可以用@简写和vue中一样 -->
<view v-on:click='clickHandle'>点我触发函数</view>
<!-- v-if:条件渲染 -->
<view v-if='false'>哈哈哈1</view>
<view v-else>哈哈哈3</view>
<view v-if='true'>哈哈哈2</view>
<!-- v-for列表渲染： -->
<view v-for='(item, index) in arr'>
{
{item}}{
{index}}
</view>
<view v-for='(value, key) in obj'>
{
{key}}-{
{value}}
</view>
</view>
</template>
<script>
export default {
// data初始化数据和vue中一样
data() {
return {
title: 'Hello，my name is kuhai',
className: 'active',
arr: ['a','b','c'],
obj: {
a:1,b:2}
}
},
onLoad() {
},
// 自定义方法写入的methods中和vue中一样
methods: {
clickHandle () {
// 拿到状态中的某个值：this.变量名
console.log(this.title)
console.log('点击了我')
// 改变状态中变量的值：this.变量名 = 值，和vue中一样
this.title = 'how are you ?'
}
}
}
</script>
<style>
.active {
background: skyblue;
}
</style>
개발 환경 설정 :
HbuiderX : HbuiderX 에디터는 uni-app에 대한 지원이 매우 높으며, uni-app 개발 시 HbuiderX 사용을 권장합니다.
HbuiderX 다운로드 및 설치 : HbuiderX 공식 홈페이지 https://dcloud.io/로 이동하여 geek 개발 도구를 찾아 설치합니다.
vue-cli로 uni-app 프로젝트 생성 : HbuilderX에서 컨트롤 패널을 클릭하여 uni-app 프로젝트를 생성하는 것 외에도 vue-cli를 통해 uni-app 프로젝트를 직접 생성할 수도 있습니다. vue-cli는 src에 있습니다. 다음, 즉 src 아래의 코드는 HbuiderX에서 생성된 코드와 동일합니다(scr 디렉터리 또는 전체 프로젝트 디렉터리를 HbuiderX로 드래그하여 프로젝트를 실행할 수 있음). 명령:
vue create -p dcloudio/uni-preset-vue 自己uni-app项目名称
创建完项目可以在项目下继续使用命令 yarn serve 或在HbuiderX中运行项目，更多打包项目到各个平台可以参考package.json文件
사용자 지정 구성 요소:
vue와 정확히 동일하며 vue 구문에 따라 작성하지만 다음 디렉토리 구조에 따라 폴더와 구성 요소 파일을 생성해야 합니다.
├── api // 统一接口目录
│ └── user.js // 用户接口 (按功能分组)
├── common // 公共目录
│ ├── common.js // 公共函数
├── components // 公共组件目录，文件夹名称必须components，且必须存放到项目根目录下
├── pages // 页面
│ ├── index
│ │ └── index.vue
│ ├── login
│ │ ├── login.vue
│ │ └── register
├── static // 静态资源 (css/js/图片/声音等等)
│ ├── images
│ │ ├── category.png
├── store // vuex缓存
│ └── index.js
└── utils // 工具目录
└── request.js // http请求库
├── App.vue
├── main.js // 入口文件
├── manifest.json // uniapp配置文件
├── pages.json // 页面配置
├── uni.scss // 公共样式
├── README.md // 自述文件
새로 생성된 구성 요소 폴더를 마우스 오른쪽 버튼으로 클릭하고 상단을 클릭하여 다음과 같은 구성 요소를 직접 생성합니다.
플랫폼 환경 구성: (WeChat 애플릿, 앱 실제 머신(시뮬레이터), h5)
1. Wechat 애플릿 개발 환경 구성:
기본 WeChat 애플릿 개발자 도구 열기 – 상단 설정 – 보안 설정 – 서비스 포트 열기 21743
HbuiderX 열기 – 상위 도구 – 설정 – 구성 실행 – WeChat 개발자 도구 경로 – 찾아보기 – 고유한 WeChat 개발자 도구 설치 경로 찾기, 백엔드 exe 파일 선택(선택할 수 없는 경우 WeChat Developer Tools.exe 폴더 선택)
2. Android 개발 환경 구성:
데이터 케이블로 Android 폰을 컴퓨터에 연결 – 전화 설정 – 전화 정보 – 버전 번호를 5번 클릭하여 개발자 디버깅 시작 – USB 디버깅 켜기 – HbuiderX 실행 – 전화 또는 에뮬레이터로 실행 –
uniCloud 클라우드 개발 플랫폼:
uniCloud는 Alibaba Cloud 및 Tencent Cloud와 공동으로 서버리스 모드 및 js 프로그래밍을 기반으로 하는 공식 클라우드 개발 플랫폼입니다. js를 사용하여 백엔드 비즈니스를 쉽게 개발할 수 있고 개발 비용이 저렴하며 주로 비즈니스에 집중하고 서버 운영 및 유지 관리에 신경을 쓸 필요가 없습니다. 비 게시하지 않으면 도메인 이름 없이 서버를 사용할 수 있습니다. -h5 프로젝트에서 uniCloud는 Tencent Cloud와 Alibaba Cloud가 크로스 터미널을 사용할 수 없는 단점을 해결할 수 있습니다.
uniCloud 개발 프로세스: uniapp 프로젝트 생성 – 클라우드 개발 환경 선택 – 클라우드 기능에 백엔드 코드 작성 – 프로젝트를 Ali 또는 Tencent 서버리스 환경에 배포 – 클라이언트에서 클라우드 기능 호출, uniCloud 클라우드 개발 성능 사용 성능 및 O&M을 걱정할 필요도 없습니다.
유니클라우드 구성:
클라우드 기능: 클라우드 기능은 맞춤형 노드 환경에서 실행되며 우수한 성능과 강력한 기능을 갖추고 js 계산을 실행하고 nosql 클라우드 데이터베이스를 읽고 쓸 수 있으며 네트워크를 운영하고 데이터를 프런트 엔드로 반환할 수 있습니다.
'use strict';
export.main = async (event, context) => {
// event为客户端上传的参数
console.log('event:' + event)
// 返回数据给客户端：
return event
}
클라우드 데이터베이스: SQL 문을 배우거나 관계형 유형을 이해하지 않고 클라우드 기능에서 noSql 기반 json 데이터베이스를 읽습니다.
클라우드 스토리지 및 CDN: CDN은 프런트엔드 및 클라우드 기능 모두에서 저장 및 운영할 수 있으며 프런트엔드를 CDN으로 직접 전송하여 시간 소모적인 서버 전송 대역폭 점유 등을 방지할 수 있습니다.
uniCloud 클라우드 개발 환경 구성:
1. HbuiderX에서 새 프로젝트를 만들고 uniCloud 클라우드 개발 항목을 선택합니다. 프로젝트를 입력합니다. uniCloud 폴더를 마우스 오른쪽 버튼으로 클릭하여 연결된 클라우드 서비스 공간 또는 프로젝트를 선택합니다. 처음 입력할 때 새 클라우드 서버를 생성해야 합니다. 공간(데이터베이스와 유사) - 좋은 공간을 만들어 선택 후 연동
2. 클라우드 개발 공간을 생성한 후 클라우드 기능을 계속 생성합니다. uniCloud 폴더 아래의 cloudfunctions 폴더를 마우스 오른쪽 버튼으로 클릭하고 새 클라우드 기능/클라우드 객체를 선택하여 클라우드 기능을 생성합니다. 그러면 클라우드 기능 폴더에 하나 더 생성됩니다. 새로 생성된 클라우드 기능 폴더 - 새로 생성된 클라우드 기능 폴더를 마우스 오른쪽 버튼으로 클릭하고 업로드 배포를 선택합니다.
uniCloud 웹 콘솔 사용:
1. 클라우드 기능: 프로젝트 아래의 uniCloud 폴더를 마우스 오른쪽 버튼으로 클릭하고 선택하여 uniCloud 웹 콘솔 열기-입력 후 현재 선택된 클라우드 공간(데이터베이스)이 기본적으로 선택됩니다.이 때 홈 페이지를 클릭할 수 있습니다. 왼쪽 상단 모서리에서 생성한 것을 볼 수 있습니다. 모든 클라우드 공간 - 생성한 클라우드 공간을 찾고 세부 정보를 클릭하여 클라우드 공간에 들어갑니다. 클라우드 함수/클라우드 개체를 찾고 함수/개체 목록을 선택하여 클라우드 함수를 작성한 내용을 확인합니다.
2. 클라우드 데이터베이스: 탐색 목록에서 클라우드 데이터베이스 찾기 - 새 테이블 만들기 - 계속 클릭하여 레코드 추가 - 오른쪽 제어판에서 표준 JSON 코드를 작성하고 실행하면 새 데이터가 추가됩니다.
3. 클라우드 저장소: 사진 등 일부 파일을 저장할 수 있습니다. 사진 및 기타 파일을 세부적으로 볼 수 있으며 여기에 있는 파일은 외부 네트워크에서 직접 액세스하거나 프로젝트에서 사용할 수 있습니다.
크로스 도메인 설정 : h5 프로젝트는 도메인 네임이 필요합니다. 이때 크로스 도메인 문제가 발생할 수 있습니다. 이때 도메인 네임은 크로스 도메인 설정에서 설정해야 합니다. 도메인 간 문제를 해결할 수 있습니다.
uniCloud의 클라우드 기능은 데이터베이스에 연결하여 추가, 삭제, 수정 및 쿼리를 실현합니다.
'use strict';
// 云函数类似node写的程序中的接口，login类似接口url,async (event, context)函数为接口处理函数，return类似response.send()
// 1.uniCloud.database()获取数据库引用：
const db = uniCloud.database()
exports.main = async (event, context) => {
// context包含调用信息和服务器运行状态
//event为客户端上传的参数
console.log('event : ', event)
// 2.db.collection(集合名称)获取集合引用，类似关系型数据库中的表，传入参数集合名称：数据库中的表：
const userCollection = db.collection('user01')
// 3.操作云数据库：
// 3-1.userCollection.add()增加数据：里面可以传入一个个对象或一个数组JSON数据,返回插入数据的寄存器索引地址(执行完函数后可以到网页查看数据就会有记录)
// let res1 = await userCollection.add({
// 'user_name': '00002',
// 'user_password': '22222'
// })
// console.log(JSON.stringify(res1))//{"id":"634a40dbb1fb07000109e6d4"}
// let res2 = await userCollection.add([
// {
// 'user_name': '00003',
// 'user_password': '33333'
// },
// {
// 'user_name': '00004',
// 'user_password': '44444'
// }
// ])
// 3-2.userCollection.doc().remove()删除某条数据：,doc()表示根据数据id修改数据，这里还可以使用where({字段名：值})
// let res3 = await userCollection.doc('634a40dbb1fb07000109e6d4').remove()
// console.log(JSON.stringify(res3))//{"affectedDocs":1,"deleted":1}
// // 3-3.userCollection.doc().update()修改某条数据：update可以使用set代替，区别：update不能更改不存在的数据，而set数据不存在就会自动增加一条
// let res4 = await userCollection.doc('634a40db398d85000146b882').update({
// user_name: '小红',
// user_password: '123',
// age: '18'
// })
// console.log(JSON.stringify(res4))//{"affectedDocs":1,"updated":1,"upsertedId":null}
// 3-4.userCollection.doc().get()查找某条数据：
let res5 = await userCollection.where({
user_name: event.user_name}).get()
console.log(JSON.stringify(res5))//{"affectedDocs":1,"data":[{"_id":"634a40db398d85000146b882","user_name":"小红","user_password":"123","age":"18"}]}
//返回数据给客户端，这里可以将结果返回给函数调用者，也就是调用者回调函数success中参数
return {
cod:200,
msg: '查询用户信息成功',
data:res5.data
}
};
비즈니스에서 클라우드 기능을 호출하여 데이터를 가져옵니다.
<template>
<view class="content">
<image class="logo" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6890a278-1079-4fec-a0d9-0a94d7532a45/a9778618-cfd8-4017-aaa8-98d2a38768bf.jpg"></image>
<view class="text-area">
<text class="title">{
{
title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
// uniCloud.callFunction调用云函数api：
uniCloud.callFunction({
// name指定云函数名（自己在uniCloud下cloudfunctions中编写的函数）：
name:"login",
// data:传入请求参数：
data: {
user_name: '小红'
},
// 成功后的回调：
success (res) {
console.log(res)
},
// 失败的回调：
fail (err) {
console.log(err)
}
})
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
파일 업로드 읽기 및 삭제:
<script>
export default {
data() {
return {
title: 'Hello',
imgUrl: null
}
},
methods: {
clickHandle () {
const _this = this
// 1.uni.chooseImage()选中图片api：
uni.chooseImage({
// 限制数量：
count: 1,
// 成功的回调，返回图表信息
success (res) {
// 拿到文件地址：res.tempFilePaths[0]
const tempFile = res.tempFilePaths
// 2.使用uniCloud.uploadFile()将文件上传到云储存,此api是云函数api应该放到云函数中，这里只是简单的测试:
uniCloud.uploadFile({
filePath: tempFile[0],
// 设置云储存中文件名称，这里要设置，否则报错，特别是文件后缀，测试发现文件格式后缀和这里不匹配没关系，最终都会将自己定义的名称存到云储存
cloudPath:String(Math.random()*5).split('.')[1] + '.png',
success (res) {
console.log(res)
// res.fileID上传到云储存后的文件地址，可以将此地址存到某个表中后面通过此地址就可以访问到文件
// res.filePath文件本地访问地址：
_this.imgUrl = res.fileID
},
fail (err) {
console.log(err)
}
})
},
// 失败的回调
fail (err) {
console.log(err)
}
})
// 3.使用uniCloud.deleteFile()将文件从云储存中删除,这个必须放到云函数中去:
uniCloud.deleteFile({
// 要删除的文件地址：
fileList: ['https://vkceyugu.cdn.bspapp.com/VKCEYUGU-6890a278-1079-4fec-a0d9-0a94d7532a45/a9778618-cfd8-4017-aaa8-98d2a38768bf.jpg']
success (res) {
console.log(res)
},
fail (err) {
console.log(err)
}
})
}
}
}
</script>
팁: 이 기사의 사진 및 기타 자료는 인터넷에서 가져온 것이므로 침해가 있는 경우 메일함([email protected])으로 이메일을 보내 저자에게 연락하여 삭제하십시오.
저자 : 괴로움의 바다