微信小程序云开发(1)数据库增删改查 云函数 云存储
小程序云开发(1)数据库增删改查
1.新建项目时不使用云服务,
3.在app.js初始化项目
4.新建云函数
5..连接数据库
6.在服务器新建list
wxml代码
js代码
// 连接数据库 ,在数据库新建list库
const DB = wx.cloud.database().collection('list')
let name=""
let age=""
let id=""
Page({
// 获取表单数据
addName(e) {
name = e.detail.value
},
addAge(e) {
age = e.detail.value
},
deleteId(e){
id = e.detail.value
},
btnadd:function(){
// 增加数据
DB.add({
data:({
name: name,
age: age
}
),
success: function (res) {
console.log("这 添加成功了")
},
fail: function (res) {
console.log("添加失败")
},
complete: function (res) { },
})
},
// 查询数据
search() {
DB.doc(id).get({
success:function(){
console.log(e)
}
})
},
// 修改数据
update() {
DB.doc(id).update({
data:{
name:"肉哥",
age:20
},
success: function () {
console.log("修改成功")
}
})
},
// 删除数据
del: function () {
DB.doc(id).remove({
success: function () {
console.log("删除成功")
}
})
console.log(id)
},
})
数据库增删改查 (end)
数据库操作有权限 ,次数限制 ,因此通过云函数间接操作数据库
云函数
1.2,3环境配置步骤 .同上(略)
4,
5
add文件中的index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
// 将传入的 a 和 b 相加并作为 sum 字段返回给调用端
let a= event.a;
let b= event.b;
return a+b;
}pageis文件中 的index.js
// const DB = wx.cloud.database().collection('cloudList')
Page({
addnum(){
wx.cloud.callFunction({
// 云函数名称
name: 'add',
// 传给云函数的参数
data: {
a: 1,
b: 2,
},
success: function (res) {
console.log(res) // 3
},
fail: console.error
})
}
})
获取数据库数据,
1.数据库新建数据 把权限给为所有用户可读
// 获取数据库数据
getsqlnum(){
wx.cloud.database().collection('user').get({
success(res){
console.log("获取数据成功",res)
},
fail(res){
console.log(res)
}
})
}
通过云函数调用数据库数据
通过云函数作为中介访问数据库 如果有多个环境id,必须初始化id
cloud.init({
env: "cloud-wtzkv"
})
cloud.init({
env: "cloud-wtzkv"
})
// 云函数入口函数
exports.main = async (event, context) => {
return cloud.database().collection("getnum").get()
}page文件中的js
// 云函数获取数据库数据
getshujuku(){
wx.cloud.callFunction({
name:"getshujuku", //云函数新建的目录
success(res) {
console.log("获取数据成功", res)
},
fail(res) {
console.log(res)
}
})
}云函数(end)
云存储
在app.js中初始化环境
//app.js
App({
onLaunch: function () {
wx.cloud.init({
env: "cloud-wtzkv"
})
}
})page文件中index.js (上传图片并展示到页面)
Page({
data:{
imgUrl:""
},
upload(){
// 选择照片
let that=this;
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'], //在相册/相机选图片
success(res) {
console.log("选中成功",res)
that.uploadImg(res.tempFilePaths[0])
},
fail(res){
console.log("失败", res)
}
})
},
// 上传图片
uploadImg(imgurl) {
wx.cloud.uploadFile({
cloudPath: 'aaa.png', // 上传至云端的路径
filePath: imgurl, // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
// 展示图片在页面
this.setData({
imgUrl:res.fileID
})
},
fail: console.error
})
}
})
index.wxm
报错 (wx.cloud.uploadFile中的filePath参数不应该加引号，加了引号就变成字符串了，就不是变量了)
上传Excel文件
wx.chooseMessageFile下载文档并打开
wx.cloud.downloadFile({
// 示例 url，并非真实存在
url: 'http://example.com/somefile.pdf',
success: function (res) {
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
success: function (res) {
console.log('打开文档成功')
}
})
}
})云存储(end)
window
在app.json中需要写window 其他页面不用写 ,但{}不能省,
tabBar
1.当position为top时,将不会显示icon list数组2到5个
条件渲染
wx:if=""
wx:elif=""
wx:else=""
wx:if vs hidden
wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
引用
WXML 提供两种文件引用方式import和include
import导入模板代码 有作用域 即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
include导入除模板之外的代码 相当于拷贝到include的位置.
事件
事件绑定
bind不会阻止冒泡事件 catch会阻止冒泡
捕获与冒泡不是相对与该元素的，而是相对于父级元素或子级元素的
点击c1色块弹框顺序：c1->b->a
并没有冒泡到兄弟元素c2
input的事件对象 bindinput=""
js文件中获取input里的值, 在page写入事件函数通过事件对象event来获取 var input =event.detail.value
页面样式
rpx 相对于750px屏幕宽 ,
导入样式 用@import
注意点:
1.
无论如何调整width，Button的宽度都不会有变化，有博主提出，要把 app.json里的 style: v2语句删掉。
这样虽然也可以解决问题，但会导致全局的样式变化。
解决方法:在，例如：