uniapp笔记

官网

https://uniapp.dcloud.net.cn/

参考

vue

• 渲染
• 组件
• 数据
• 事件触发

微信小程序

• 生命周期
• 路由
• 插槽

数据

定义

data(){
	return {q:123}
}

更新

	this.q = 456

渲染(跟vue类似)

数据渲染

{{name}}

列表渲染

	
	{{item.name}}
	修改

判断渲染

	123

双向绑定

组件

组件调用

组件通讯

父传子

传：

收：

{
	{this.abc}
	……
	props:[abc]
}

事件触发

 v-on:click="fn1"

公共

传

uni.$emit('sendData',this.msg)

收

uni.$on('sendData',(e)=>{
})

路由

普通页面

pages.json

//第一页为首页
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/cloud_page/cloud_page",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],

tabbar页面

	"tabBar": {
		"list": [{
			"pagePath": "pages/index/index",
			"text": "首页"
		}, {
			"pagePath": "pages/cloud_page/cloud_page",
			"text": "云服务"
		}]
	}

跳转

跳转方：

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

被跳转放:

// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

云开发

搭建环境

浏览器部署

• 进入网址
  https://unicloud.dcloud.net.cn/home

• 创建服务空间
  

IDE

• 创建开发环境文件—在项目根文件夹下点击右键—创建uniCloud云开发环境—阿里云

• 关联开发环境—在uniCloud关联

• 初始化数据库 — 在uniCloud文件夹—database—右键—创建db_init.json

• db_init.json代码格式

{
	"bendibao": {
		"data": [{
			"id": 1,
			"name": "美食",
			"icon": "http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i2onyj302u02umwz.jpg"
		}, {
			"id": 2,
			"name": "洗浴足疗",
			"icon": "http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i2j4dj302u02umwy.jpg"
		}, {
			"id": 3,
			"name": "结婚啦",
			"icon": "http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i56i0j302u02u744.jpg"
		}, {
			"id": 4,
			"name": "卡拉OK",
			"icon": "http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i2uzvj302u02udfo.jpg"
		}, {
			"id": 5,
			"name": "找工作",
			"icon": "http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i2rnlj302u02umwz.jpg"
		}, {
			"id": 6,
			"name": "辅导班",
			"icon": "http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i2zloj302u02udfn.jpg"
		}, {
			"id": 7,
			"name": "汽车保养",
			"icon": "http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i69eij302u02ua9w.jpg"
		}, {
			"id": 8,
			"name": "租房",
			"icon": "http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i6j2lj302u02u0sj.jpg"
		}, {
			"id": 9,
			"name": "装修",
			"icon": "http://ww1.sinaimg.cn/large/006ThXL5ly1fj8w5i6z1pj302u02ua9u.jpg"
		}]
	}


}

• 初始化云数据库—db_init.json—右键—初始化云数据库
• 新建云函数—在uniCloud/cloudfuntions文件夹右键—新建云函数/云对象（名称作为函数调用的接口名）
• 编写云函数—在创建的云函数文件夹下的index.js

// 获取数据库
const db=uniCloud.database()
// 获取集合表
const list=db.collection('bendibao')
exports.main = async () => {
	// 获取表里面的数据 get()
	const res= await list.get()
	return res
};

• 上传部署—右键云函数文件夹—点击上传部署

调用

在**.vue**中调用

data() {
			return {
				list: []
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {
				// 调用云函数 uniCloud.callFunction()
				uniCloud.callFunction({
					// 云函数的名称（调用哪一个云函数）
					name: 'getList',
					success: (res) => {
						console.log(res);
						this.list = res.result.data
					}
				})
			}
		}

• ps:如果出现【应用未关联服务空间】—HBuilder的控制台—H5—连接云端函数