1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序 -- (六) 小程序 云开发+自定义组件

微信小程序 -- (六) 小程序 云开发+自定义组件

时间:2023-09-15 09:30:14

相关推荐

微信小程序 -- (六) 小程序 云开发+自定义组件

云开发 小程序

概述

开发者可以使用腾讯提供的云服务来开发小程序、小游戏的服务端,而无需搭建服务器。

开发提供的基础能力有:云数据库云存储云函数

1. 云数据库

是一个既可以在小程序端操作,也可以在云函数中操作的json类型的非关系型数据库。

2. 云存储

云存储支持在小程序端直接上传下载云端文件。(替代了后端的nodejs)

3. 云函数

云函数是在小程序端声明,而后部署到云端后,在云端执行的函数。小程序端部署完毕后可在小程序直接调用

开通云开发服务

小程序开发工具==》 云开发==》 选择 资源均衡型-免费版即可

云数据库

关系型数据库和非关系型数据的区别:

关系型数据库: 关系型数据库的特点就是表与表之间有联系

非关系型数据库: 非关系型数据库常常以json的形式直接存储数据,并且对数据进行操作

[{id: 1,name: ‘zs’,gender: ‘m’,school: {id:1, name:’XX学校’, loc: ‘长沙’, area: 800 }},{ ...... },]

云数据库的操作

云数据库操作的基本流程:

1.调用wx.cloud.init()方法初始化云环境

wx.cloud.init({env:”环境id”})

2.调用wx.cloud.database()方法获取操作数据库的dabatase对象

let db = wx.cloud.databses();

3.调用db.collection()方法获取操作某个集合的collection对象

let coll = db.collection(‘testdb’);

4.调用collection.xxx()方法操作该集合即可

coll.doc()coll.add()coll.xxx()

创建新的云开发项目

新建项目注意选择云开发模板云卡发项目的目录机构

CloudFunctions该目录中存储所有的云函数

miniprogram该目录中存储小程序源代码

project.config.json项目的主配置文件

插入数据操作

db.collection(‘testdb’).add({data:{}, //具体要保存的数据success: (res)=>{} //插入成功的回调方法});db.collection(‘testdb’).add({data:{}, //具体要保存的数据}).then(res=>{});

该操作将会把data中声明对象的信息存入testdb集合中,成为一条记录。

返回新增记录的自增ID、。并且新增的记录中将会自动添加一个新的字段:_openid。该字段标识了当前这条记录属于哪一个用户,同一个用户访问该小程序时使用openid是不变的。即一个opedid对应一个小程序的用户。小程序也需要通过该openid完成数据库的权限管理。

查询操作

查询一条数据

db.collection(‘testdb’).doc(‘某记录的_id’).get({success: (res)=>{……} //插入成功的回调方法});db.collection(‘testdb’).doc(‘某记录的_id’).get({}).then(res=>{……});

若用户对集合进行查询操作时,将会在语句中自动加入当前用的openid作为查询条件,将会导致查不到别人 添加的数据。这是小程序数据库的默认权限管理机制导致的。

查询多条数据

db.collection('todos').where({_openid: 'user-open-id',done: false}).get({success: function(res) {// res.data 是包含以上定义的两条记录的数组console.log(res.data)}})db.collection('testdb').where({// married: falseschool:{name:"清华大学"}}).get().then(res => {console.log(res.data);});

删除数据

删除一条记录

返回的是记录record

db.collection('testdb').doc('14139e12614bfb870e959840273fced6').remove()

删除多条记录

要更新多个数据,需要在Serve端进行操作(云函数)

可通过 where 语句选取多条记录执行删除,只有有权限删除的记录会被删除。比如删除所有已完成的待办事项:

修改操作

Collection.updata()//局部更新Collection.set() //直接替换

局部更新

使用update方法可以局部更新一个记录或一个集合中的记录,局部更新意味着只有指定的字段会得到更新,其他字段不受影响。

db.collection('testdb').doc('cd045e75614be8f710482a52698e4eee').update({data: {name: '亮亮', married: true}})

更新多个需在Serve端进行操作(云函数)

替换更新

db.collection('testdb').doc('8937eaa9614bfb870d3fab722527bd31').set({data: {content:'这个电影一点也不好看'}})

id为8937eaa9614bfb870d3fab722527bd31 只会有_id字段和content字段

collection常用API

let col = db.collection(“testdb”);

add()添加doc()where//条件判断where({ hobby: …条件… })fileld//查询需要的字段.fileld({ 字段名:true, …: true,…… }),必须都为true或者falseskip()//跳过前几条 skip(2) 跳过前条 从第三条开始.limit()//显示 读取几条数据 limit(2) 读两条。 一般使用:skip(M).limit(N)orderBy(“字段”,”asc/desc”)// 排序get()

添加:

db.collection(‘testdb’).add({data:{}, //具体要保存的数据success: (res)=>{} //插入成功的回调方法});

查询:

db.collection('testdb') //查询testdb集合.where({//添加筛选条件hobby: _.in(["游泳"]), // 按照查询指定筛选}).field({//指定查询结果的字段name: true,age: true,married: true})// .skip(1) //条件前几条查询语句// .limit(1) //按当前记录先后查询几条条记录.orderBy("married","desc")//先按married字段排序.orderBy("age","asc") // 在按age字段排序.get() 、、发送请求请求查询结果

查询指定

查看文档

API提供了查询指令
whereeq等于neq不等于lt小于lte小于或等于gt大于gte大于或等于in字段值在给定数组中nin字段值不在给定数组中

删除

打开授权设置页:

wx.openSetting({withSubscriptions: true,})

小程序的自定义组件

查看文档

自定义组件的本质就是自己设计一个新的组件,拥有独立的外观样式,独立的功能,独立的组件名称。当需要使用时,可以直接通过类似以下代码:

Component({… … … })

组件的属性列表

<my-button color=”red” type=”round” value=”按钮文本”bind:doubletap=”doubletapEvent”></my-button>

编写一个自定义组件

新建组件四件套在组件的json配置文件中声明:我是组件编写组件的基础外观wxml wxss使用它时,需要先在page.json中声明组件引用在页面中直接使用新的自定义组件名,引用该组件即可
若需要为组件设置自定义属性,则需要以下几步:

1.在comonent.js里的properties中声明定义属性名

properties: {color: {type: String,value: '#36D'},}

2.在wxml中使用该属性,定义组件内容

<view class="btn"style="background-color: {{color}};"></view>

使用该组件是,指定自定义属性值即可

<my-button class="mybtn"color="red"></my-button>

若为组件设置自定义事件,需要以下几步

在子组件中为相关元素绑定事件。来监听基础事件,。根据这些基础事件的运行过程,捕获到自定义事件的触发时机,而后调用triggerEvent 方法通知父组件自定义父事件的产生。

bindtap="tapEvent"tapEvent(){// 判断当前点击是否触发了双击的场景let now = new Date().getTime();let last = this.data.last;if(now-last<350) {// 触发了双击//通知父组件 doubletap可以开始执行了this.triggerEvent("doubletap",{id: …,”传参”:’’});now = 0;}this.data.last = now;}}

自定义事件 doubletap 一旦被触发,将会执行父组件中声明的事件处理函数。

bind:doubletap = "doubletapEvent"doubletapEvent(e){e.detail; // {id:””} 获取父组件传递过来的参数console.log("双击了");},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。