uniapp概述

---

前言

Union Application
基于Vue.js的前端框架，开发规范同小程序
一套代码即可编译到iOS,Android，H5，小程序等多个平台

其他优势：
支持npm与自定义组件，社区活跃，版本迭代快

开发软件推荐：HBuilderX(APP开发版),自动生成，还有提示等，开发最便捷
npm install -g @vue/cli

uniapp规范：

1. 结构
   template
   script
   style
2. 组件标签靠近小程序
3. 接口（js api）靠近小程序
4. 数据绑定及事件处理同Vue.js
5. 布局：flex，uniapp框架会自己解决兼容问题，不用顾及前缀

6.条件编译：方便二次修改
7.app端的Nvue开发
8.app端的HTML5+，原生ios和安卓

参考：https://uniapp.dcloud.io/vue-components

环境搭建

HBuilderX

设置：失去焦点自动保存
插件scss编译

vue/cli

npm install -g @vue/cli
vue -V
vue create -p dcloudio/uni-preset-vue 项目名
json配置文件可以查看命令scripts
npm run serve

文件结构

css

美工一般以iPhone750px设计
rpx自适应像素750rpx
字体，高度不用rpx
左右30rpx
常用flex布局

ps：upx的问题，微信动态绑定等使用uni.upx2px方法，比较麻烦

js

export default {
		name:"tab",
		data() {
			return {
				num:0,
				tab:['重疾险','寿险','医疗险','意外险','年金险','责任险']
			};
		},
		methods:{
			tabs(index){
				this.num = index
			}
		},

html的变量可以直接写data里的tab
属性值：
text{{ }}

组件

基础组件
https://uniapp.dcloud.io/component/
navigator（a）
view（div）
text(span)
image（img）

自定义组件在components可以直接引用

组件模板应该只包含一个根元素。
如果在多个元素上使用v-If，请改用v-else-If来链接它们。

api

生命周期

应用或页面或者组件从创建到消灭中间经过的一系列过程

应用的生命周期
onLaunch应用启动
onShow多次
onHide
onError

页面的生命周期
onLoad页面加载
onShow页面显示多次
onReady页面初次渲染完成
onHide页面隐藏
onUnload页面卸载

组件生命周期
created创建实例创建完成后立即执行
mounted模板渲染后调用，类似onReady

ps：
h5端index，onLoad不执行，需要先created，后面页面用onLoad才会执行

beforeCreate ==> onload ==> created，防止onLoad先跑而导致获取不到created保存下来的缓存，可以给onload加setTimeout

		// 页面加载
		onload() {
			setTimeout(()=>{
				
			},2000)
		}

数据绑定

和vue类似，不用el，生命周期

后端如何把数据交给前端

后端自己搭建服务器

提高接口
前端调用接口

云数据库+云函数

接口即为云函数
前端调用云函数
和后端搭建服务器提供接口非常相似，快速上手

云数据库+clientdb

直接在前端页面操作数据库，有单独的数据库渲染组件等

但是数据一多容易较为混乱，需要进行封装，封装后的形式类似与云数据库+云函数的模式

uniCloud开发流程（云函数+云存储）

1. 创建云环境
2. 创建空间或关联
3. 在database创建db_init.json，初始化云数据库
4. 在cloudfunctions新建云函数，event前端传入的参数，context前端上下文（客户端操作系统等），写好后记得上传云函数
5. 页面上调用云函数callFunction

前端调用云函数callFunction如下：
name函数名，data给后端（云函数）的数据
后端（云函数）返回给前端页面的数据res.result.data

uniCloud.callFunction({
				name:"article",
				data:{
					page:1,
					limit:8
				},
				success:(res) =>{
					console.log(res)
					this.articleList = res.result.data
				},
				fail:(err) => {
					console.log(err);
				}
			})

ps: 云数据库类似monogodb，索引可以提高搜索效率，对于文章搜索，可以把标题加在索引上~

编写代码

云函数：js，use strict
云数据库：json，集合-记录
云存储和CDN

severless
调用

云数据库操作（云函数）

初始化数据库
https://uniapp.dcloud.io/uniCloud/hellodb?id=db-init

数据库后台操作
导入的json文件格式没有，

数据json的增删改查

'use strict';
// 获取数据库和集合的引用
const db = uniCloud.database()
const userCollection = db.collection('user')

// event为客户端上传的参数
exports.main = async(event,content) =>{
	// 解构event参数
	let {name,password,phone} = event
	// IO操作异步await
	let res = await userCollection.add({
		name,password,phone
	})
	return res
	// 返回_id
};

删除：collection.doc(_id).remove()
.doc()可以换为.where({ })条件删除

更新：collection.doc(_id).update()

查询：collection.get()全部
collection.skip(0).limit(10).get()

上传图片（云存储）

open(){
	let self = this
	uni.chooseImage({
		count:1,
		success(res) {
			const tempFilePath = res.tempFilePaths[0]
			uniCloud.uploadFile({
				filePath:tempFilePath,
				success(res) {
					self.src = res.fileID
				},
				fail(err) {
					console.log(err)
				}
			})
		}
	})
}

删除图片

const Koa = require('koa');
const app = new Koa();
const router = require('koa-router')()


// get请求的路由,给前端
router.get('/',async(ctx)=>{
	ctx.body = {
		data:[
			{
				'message':'',
			}
		]
	};
	// 对象
	ctx.query ={};
})

// 启动路由
app.use(router.routes())
app.use(router.allowedMethods())



// 接口编写
const router = require('koa-router')()

router.post('',async ctx=>{
	
})

module.exports = router.routes()


// app.js路由配置
const Koa = require('koa')
const app = new Koa()
const json = require('koa-json')
const router = require('koa-router')()

// 中间件
app.use(json)

// 配置路由接口
const newlydata = require('./')
router.use('',newlydata)
// 启动
app.use(router.routes()).use(router.allowedMethods())

app.listen(8000)
console.log('启动成功')


'use strict';
const db = uniCloud.database()

// event为客户端上传的参数
exports.main = async(event,content) =>{
	const collection = db.collection('user')
	let res = collection.add([
		{
			name:'apple'
		},
		{
			name:'pear'
		}
	])
	return {}
};


open(){
	let self = this
	uni.chooseImage({
		count:1,
		success(res) {
			const tempFilePath = res.tempFilePaths[0]
			uniCloud.uploadFile({
				filePath:tempFilePath,
				success(res) {
					self.src = res.fileID
				},
				fail(err) {
					console.log(err)
				}
			})
		}
	})
}
uniCloud.deleteFile({
	fileList:['http',],
	success(res) {
		
	},
	fail(err) {
		
	}
})

一些问题

// 为什么不直接以对象，而以函数return的方式？
// 直接对象的话，会保留上次的变量值，不会被初始化；而如果return的话，每次刷新页面都会初始化

		data() {
			return {
				title: 'Hello'
			}
		},

兼容

值 平台 参考文档
APP-PLUS 5+App HTML5+ 规范
APP-PLUS-NVUE 5+App nvue Weex 规范
H5 H5
MP-WEIXIN 微信小程序 微信小程序
MP-ALIPAY 支付宝小程序 支付宝小程序
MP-BAIDU 百度小程序 百度小程序
MP-TOUTIAO 头条小程序 头条小程序
MP-QQ QQ小程序 （目前仅cli版支持）
MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序

img地址

图片地址放在data里，h5页面图片加载不出来，但是微信小程序可以

html的地址自动提示"…/…/static/index-active.png" 可以
data里的地址要改为：微信小程序保持不变，但是h5页面要改为"…/…/…/static/index-active.png"