uni-app 强大的十端兼容

Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。

C:\Users\Administrator>node -v
v10.15.3

C:\Users\Administrator>vue -V
@vue/cli 4.5.9

C:\Users\Administrator>cd/Desktop
系统找不到指定的路径。

C:\Users\Administrator>cd desktop

C:\Users\Administrator\Desktop>vue create -p dcloudio/uni-preset-vue test-uniapp

vue的部分语法 在uni-app中是不支持的

<!-- 
	 1. 模板语法 就这个{{}} 我还以为 是 `${变量}` 呢
	 2. 数据绑定 data数据 计算属性等 在template中使用
	 3. 条件判断 指的是v-if= 别多想 v-else-if= v-else>
	 4. 列表渲染 就是 v-for='(item,index) in Arr" :key="index" 别多想
	 5. 基础组件的使用  普通标签与一些 uni-app特殊封装的标签 以及其 api
	 6. *自定义组件的使用 (简单使用) props 父传子 emit 子传父 slot 插槽
	 7. 基础 api 的用法 uni. 之类的都是uni-app封装的api 函数 传参 返回参数
	 8. 条件编译 注释 #ifdef APP-PLUS 注释只编译在app注释 #endif注释
	            注释 #ifndef APP-PLUS 注释不编译在app注释 #endif 注释
H5 || APP-PLUS || MP-ALIPAY
	9. 页面布局 <style>@import './index.css';
			/* body */page {
			/* px rpx rem vh vw */
	-->


// 3种 生命周期
//1. 应用生命周期 
onLaunch 应用初始化完成触发一次
onShow 应用 启动的时候, 或者从后台进入前台会触发
onHide 应用从前台进入后台会触发

//2. 页面生命周期
onLoad 监听页面加载
onReady 监听页面的初次渲染完成 如果渲染速度快, 会在页面进入动画 完成前触发
onShow 监听页面显示 写法一致 功能不同
onHide 监听页面隐藏 保留当前页面 打开新页面时触发navigateTo
onUnload 监听页面卸载 关闭当前页面 打开新页面时触发redirectTo

//3.组件生命周期
同 vue 

组件 v-show 隐藏了会触发销毁destroyed


// sass 变量和可以嵌套语法
<style lang="scss">
$width=200px
.content{
width: $width
&.box{
这里与 content 是同级的
}
}

// 添加小竖线的方式 给同级设置图标左侧
&::after {
content: '';
position: absolute;
top: 12px;
bottom: 12px;
left: 0;
width: 1px;
background-color: #ddd;}


在pages.json中 使用自带导航栏 tabbar
{
// 使用这种底部导航时 切换时 页面不会被关闭 也就失去了关闭 重新加载的生命周期
	// 为了对应 出现了 onTabItemTap(e)生命周期 tabBar点击触发 
	// e 是对象 对象里就是这里 list数组里的对象
	// 也可以在 onshow 中去操作
	"tabBar": {
		"color": "#666",
		"selectedColor": "#f07373",
		"borderStyle": "black",
		"list": [{
			"pagePath": "pages/index/index",
			"text": "首页",
			// 本地图片 大小 410kb  ,尺寸 建议 81*81
			"iconPath": "static/home.png",
			"selectedIconPath": "static/home-active.png"
		}, {
			"pagePath": "pages/about/about",
			"text": "关于",
			// 本地图片 大小 410kb  ,尺寸 建议 81*81
			"iconPath": "static/about.png",
			"selectedIconPath": "static/about-active.png"
		}, {
			"pagePath": "pages/my/my",
			"text": "我的",
			// 本地图片 大小 410kb  ,尺寸 建议 81*81
			"iconPath": "static/my.png",
			"selectedIconPath": "static/my-active.png"
		}]
	}
}

unicloud 
可以免费把图片放到网上 生成链接
h5域名配置 : 新增允许跨域的 域名地址 即可解决跨域

uniCloud.uploadFile({
此处可删除上传 云存储的图片
}) 




云函数的写法 获取数据 增删改查
//在前端中
methods: {
	open() {
	uniCloud.callFunction({
	name: "get_list",
	data: {name: "lining"},
	success(res) {
	console.log(res);},
	fail(err) {console.log(err);},
//在前端中 .then获取数据的 另一种写法
methods: {
	getLabel() {
	uniCloud.callFunction({
		name: "get_label"
			}).then((res) => {
		const {result} = res
		this.tabList = result.data
		console.log(this.tabList);
	})
	}
}





// 在前端 链接服务器的云函数中get_list/index.js下
'use strict';
const db = uniCloud.database() //获取数据库的引用
// 运行 在云端 (服务器端) 的函数
exports.main = async (event, context) => {
	// event为客户端上传的参数
	// context 包含了调用信息和运行状态, 获取每次调用 的上下文
	console.log('event : ', event)

// get 获取数据列表
let res = await db.collection('label').get()
//从数据库中获取 集合名字的所有数据
//let list = await db.collection('article').field({content:false}).get()
//拒收返回数据中的 content:内容 true 为只接受 content:内容
const {name} = event
//聚合 : 更精细化的去处理数据 求和 分组 指定哪些字段
//这是我们下面普通的 请求 很难做到的 
//使用聚合必须先获取 aggregate() 聚合操作的实例 
//.match() 根据条件过滤文档
// classify: name 筛选classify = 传进来的name字段 只返回这个条件成立的数据
//const list = await db.collection('article').aggregate().match({
classify: name
}).project({
//.project 与 field 类似
// true 只返回这个字段 , false / 0 表示拒收这个字段
content: 0
}).end(
// 聚合条件以准备 发起实际聚合请求
)





	// 新增
	const collection = db.collection('user') //获取集合的引用 传入集合的名字
	// let res = await collection.add([{//数据库增加记录
	// 	name: 'uni-app'
	// }, {
	// 	name: 'html',
	// 	type: '前端'
	// }]) 

	// 删除
	// let res = await collection.doc('600f85f27f06f30001bb57b5').remove()
	// 删除当前 user 集合下的 600f85f27f06f30001bb57b5 id 数据

	//修改 id为600f824cb2f9d800014cd8e5的数据
	// const res = await collection.doc('600f824cb2f9d800014cd8e5').update({
	// 	name: 'html'
	// })

	//修改 可创造id
	// const res = await collection.doc('600f824cb2f9d800014cd8e5').set({
	// 	name: 'vue-test',
	// 	type: '前端'
	// })
	// set id如果不存在会 创造id update则没有任何变化

	//查找 id为600f824cb2f9d800014cd8e5的数据
	// const res = await collection.doc('600f824cb2f9d800014cd8e5').get()

	//查找 name 为 vue-test 的数据 聚合 联合搜索
	const res = await collection.where({
		name: event.name
	}).get()

	console.log("数据插入: ");
	console.log(JSON.stringify(res)); //转成字符串
	// 返回数据给客户端
	// return {
	// 	code: 200,
	// 	msg: event.name + '的年龄是' + event.age,
	// 	context,
	// 	collection
	// }
	return {
		code: 200,
		msg: '查询成功',
		data: res.data
	}
};


// 图片上传 :src="src"></image> 直接就传上去了不需要通过云函数
methods: {
	open() {
let that = this
uni.chooseImage({
count: 1,//限制一张
success(res) {
const tempFilePath = res.tempFilePaths[0]console.log(tempFilePath);
uniCloud.uploadFile({
filePath: tempFilePath,
cloudPath: res.tempFiles[0].name,
success(res) {
console.log(res);
that.src = res.fileID
},fail(err) {
console.log(err);
}})},fail(err) {console.log(err);

// 图片删除
uniCloud.deleteFile({ //开发文档说明阿里云不支持此API，前端运行此API会报权限错误 现在得在云函数删除了
fileList: [
'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-g6mgqwpyyumrd8e2a0/cd830750-5f79-11eb-8ff1-d5dcf8779628.jpg'
],
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
}
})

// easyCom components/组件名/组件名.vue 可以直接使用

// 小程序 动态style 写法
<view :style="{height: statusBarHeight+'px'}">
statusBarHeight: 20



// 请求的封装(这里指云函数请求)
//1. 在根目录/common/htttp中
export default function $http(options) {
	// 双重处理 这是第二层
	const {
		url, //云函数名字
		data
	} = options
	// 要.then调用get_label就得声明一个 Promise
	// 此处是 uniCloud.callFunction({
	//自带的 Promise 返回给了 get_label的 Promise 
	return new Promise((reslove, reject) => {
		uniCloud.callFunction({
name: url,
data
}).then((res) => {
if (res.result.code === 200) {
reslove(res.result) //get_label().then 会收到reslove(数据)
} else {
reject(res.result) //get_label().catch 会收到reject(数据)
}
}).catch((err) => {
reject(err) //get_label().catch 会收到reject(数据)
})
})
}

// 2.在common/api/list.js中 
import $http from '../http.js'

export const get_label = (data) => {
return $http({
url: 'get_label', //只需在这里维护云函数的名字
data
})
}

export const get_list = (data) => {
return $http({
url: 'get_list',
data
})
}

//3. 在common/api/index.js中 
// import {
// 	get_label,
// 	get_list
// } from './list.js'

// export default {
// 	get_label,
// 	get_list
// }
// 批量导出文件

const requireApi = require.context(
	// api目录的相对路径
	'.',
	// 是否查询子目录
	false, //我这里居然传了一个字符串
	// 查询文件的一个后缀
	/.js$/
) //读取当前目录下所有js文件

let module = {}
// console.log(requireApi.keys());
requireApi.keys().forEach((key, index) => {

	if (key === './index.js') return
	console.log(key, index);
	Object.assign(module, requireApi(key))
})
console.log(module, 999);

// {get_label: ƒ get_label(data)
// get_list: ƒ get_list(data)} 999
export default module
// console.log(require.context, 9);
// console.log(require.context('.', false, /.js$/), 9)

// 4.在main.js中
import api from './common/api'
Vue.prototype.$api = api

// 5.在其他.vue中
getLabel() {
this.$api.get_label({
//name: "get_label"
}).then((res) => {
const {	data} = res
this.tabList = data
// console.log(res);
})}


:class="{active:activeIndex===index}"
activeIndex等于下标的时候会给我们动态的添加一个类active

.listcard-image_item {
//每张图片盒子
margin-left: 10px;
width: 100%;
border-radius: 5px;
overflow: hidden;

&:first-child {//第一张图片没有左边距
margin-left: 0;
}


uni-app小程序 组件标签 给子组件propos传值 不需要 冒号 :
<list-card mode="base"></list-card>
// 这是因为传的是字符串 纠错

利用sass的层次结构 可以实现同一组件 存在多个差异不大的3种卡片

好像 组件标签里面 不能 再用 组件标签 
能但是 得放solt

父传子的值 需要监听变化 才能赋值给 data


// 只展示前三张图片
<view v-if="index < 3" v-for="(item,index) in item.cover" :key='index' class="listcard-image_item">
						<image :src="item" mode="aspectFill"></image>
					</view>

// 在修改本地数据上传到云服务器的时候 不能用于修改数据 只能用于添加数据 修改的数据不会 被修改

//两者相同 但是前者在接受多个数据时有足够的优势
const {name : name} = event
const name = event.name

今天踩了个大坑  轮播图的轮播图item 中套scroll的可滚动内容时 其内容大型数据[下标] 需要使用轮播图的 v-for 所形成的 index下标 不然左右滑屏时 两边都是相同内容  需要松手才会变化


// this.listCatchData[currentindex] = data
//listCatchData是个对象 {currentindex:data}
//但是这样做 并不会触发 Vue 的数据更新
//这其实也是个懒加载的效果
this.$set(this.listCatchData, currentindex, data)
// this.$set() 手动刷新 三个值 
//哪个数组 数组的key 新的内容

//当只有两行数据的时候 会一直显示正在加载 v-if 大于7条数据 才会显示上拉加载更多 当你要拉到第七条 必定触发 上拉加载事件 就会更新数据 

//问题的正确解决之道 往往不在问题本身 

console.log里的 ++ 也会+1 会被执行

//插入图标 uni-app 使用方法 复制在线链接 在浏览器打开 复制内容保存到本地css 只保留 bas64 编码的src 然后使用样式添加伪元素的原理方式使用它<text class='iconfont icon-search'>  即可 但是这样会很麻烦 我们直接去插件市场 https://ext.dcloud.net.cn/ 搜索icons 作者： DCloud 使用HBuilderX导入插件 与components 合并 components下就多了个 uni-icons 组件 使用方式为 <uni-icons type="search" size="16" color="#999"></uni-icons>
<uni-icons type='heart'></uni-icons> 官方组件图标库

// 阻止冒泡
@click.stop="likeTap"

// 可以以默认值的方式 替代 配置 测试参数  2.结构赋值可以有默认值{"user_id":"60150ad9b487c00001e212a0"}
var {
user_id = "60150ad9b487c00001e212a0", //用户的id但是忘了在哪了 数据库/user/item/_id 
name,
page = 1,
pageSize = 10
	} = event

// 收藏的提示阻拦操作
setUpdateLikes() {
uni.showLoading({
//也可以有title
}) //显示加载 暂时阻止操作 从本地更新服务器数据时使用
this.$api.updata_like({
user_id: "60150ad9b487c00001e212a0",
article_id: this.item._id
}).then(res => {
uni.hideLoading() //隐藏加载
uni.showToast({// 提示弹窗  提示 成功或失败
title: this.like ? '收藏成功' : '取消收藏',//提示文字
icon: 'none' //默认的图标好丑不要
})
console.log(res, 1);
}).catch(() => {
uni.hideLoading() //隐藏加载
})}

//官方市场 LoadMore 加载更多 下载下来就是封装好的.vue组件 放在components文件夹下 且拥有同名免注册的机制

//没有数据时 请求数据时使用

<uni-load-more v-if="loading" status="loading" icontype='snow'></uni-load-more>
data(){return {loading:false}}
this.loading = true //显示加载动画
this.loading = false //关闭加载动画


// 页面跳转 主页跳其他页
open() { //主页导航栏页面跳转事件
uni.navigateTo({ //保留跳转
url: '/pages/home-seaech/home-seaech',
//搜索页 pages.json中注册的页面
})}

// 页面跳转 其他页跳主页
// nui.navigateTo({
// 	// 保留并跳转 但是会打开新页面
// })
// nui.navigateBack({
// 	// 返回到上一个曾经打开过的页面
// })
uni.switchTab({
//跳转到tabbar并关闭其他页面
url: '/pages/tabbar/index/index'})



"navigationStyle": "custom", //自定义导航栏 取消原来的导航栏

根据sass的嵌套语法 可以判断true/false 从而实现两套完全不同的样式
:class="{search:isSearch}"
所有嵌套在search下的scss样式 只在isSearch为true生效 isSearch是其它父组件props传过来的值

placeholder="请输入您要搜索的内容"input预留文字

<input class="navbr-search_text" type="text" v-model="val" placeholder="请输入您要搜索的内容" @input='inputChange' />
inputChange(e) {
const {value} = e.detailconsole.log(value, 333);}


uni-app 自带 vuex 无需npm安装 

.unshift添加到数组前面 与.push添加到数组后面


//mark是unfefind 未曾定义过  这是个手写函数调用的防抖
//if (!this.mark) {//这里其实就是if(true) 可以不写
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.getSearch(value)
}, 1000)
//}



// 利用浏览器缓存机制
historyLists: uni.getStorageSync("__history") || [] // 从浏览器缓存取出
uni.setStorageSync('__history', list) //保存到浏览器缓存
uni.setStorageSync('__history', []) //清空浏览器缓存 会保留名字 __history:[]
uni.removeStorageSync('__history') //清空浏览器缓存 连名字都清了

快捷键 clog

//自定义事件
//this.$emit() 父子



//uni.$emit() 全局
uni.$emit('labelChange', 'uni-app')


onLoad() {//或者mounted
			uni.$on('labelChange', (res) => {
				console.log(res);
			})
//打印结果 uni-app
//注意 vue是spa单页面应用 所有页面其实都显示在一页 路由跳转只是锚点跳转

//但是小程序却是 小程序应用 具有是否关闭上一级页面的功能
//如果你关闭了监听事件的页面就监听不到事件总线了
//说的简单点 uni-app 事件总线只能在 打开的页面触发