# day1
# 增删查改
今天学会了在微信开发中如何对数据库进行增删改查，和进行页面之间的跳转，还有数据之间的传递。
wx.cloud.database().collection('goods')
.add({
data:{
name:goodname,
price:price
}
})# ID 传递
data-id 与后面获取的变量名 id 相对应
<view bindtap='goDetail' data-id="{{item._id}}">商品名：{{item.name}},价格：{{item.price}}</view>
console.log("点击了跳转商品详情",event.currentTarget.dataset.id)在 app.json 中的 pages 新增页面，页面的次序是有影响的
# 返回结果
wx.cloud.database().collection('goods').get()
.then(res=>{
console.log('成功',res)
})
.catch(err=>{
console.log('失败',err)
})# day2
通过封装方法，使用 this 进行调用，在使用 this 时要注意所在的作用域。
this.getList()使用全局变量来传递值，可以使用 let，也可以使用 var 变量
可以在 updated 中的 status 中看出是否有更新成功，在对数据库进行操作时要注意权限问题
使用 return 截断错误，方便调试
接受数字小心是字符串，可以通过是否变蓝看出，可以使用 parseInt (price) 来进行强制转换
可以使用变量接收数据库对象，来方便操作
限制返回的数据条数 .limit(3)
跳过若干条数据，用于分页 .skip(1)
要注意套餐所给的量，小心写，不然用完就要开新的套餐。数据库的读写次数是有限制的
# 快捷键使用
| 快捷键 | 作用 |
|---|---|
| Ctrl+B | 编译 |
| Ctrl+z | 撤销操作 |
| Ctrl+s | 保存 |
| shift+Alt + 方向键 | 向对应方向复制当前行 |
| Ctrl+ALT+l | 格式化代码 |
| shift+Alt+f | 全局搜索 |
| Ctrl+f | 当前页面搜索 |
| Ctrl+h | 查找并替换 |
# 绑定事件
前端界面绑定方法，bindtap 点击事件，bindinput 输入事件，然后在后端函数中获取值
// 前端页面
<input bindinput="getPrice"></input>
// 后端页面
getPrice(event) {
price = event.detail.value
},# 弹窗提示确认是否删除
wx.showModal({
cancelColor: 'cancelColor',
title:"是否确定删除",
content:"您再仔细想一想，是否真的要删除，删除后不可恢复",
success(res){
if(res.confirm==true){//用户点击了确认
console.log('点击确定',res)
}else if(res.cancel==true){//用户点击了取消
console.log('点击取消',res)
}
}
})# 页面跳转
wx.navigateTo({
url: '/pages/demo1/demo1',
})# 升序排列
asc 表示升序，desc 为降序，前面是关键字
.orderBy("price",'asc')# command 命令筛选
可以在微信开放文档 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/Command.html 中查看具体，常见的有 gt 大于，lt 小于，gte 大于等于
还可以使用 and 关键字设置多个查找条件，要注意格式 and ([]),[] 中用 {} 包裹筛选条件
.where({
price:db.command.gt(10),
})
// 组合查找
.where(_.and([{
price: _.gt(10)
}, //大于10
{
price: _.lt(20)
}, //小于20
]))# 云函数
# 初始化云函数
新增的文件夹一定要与 pages 平级，可以先点击与 pages 平级的文件，再点击新增文件夹，命名为 cloud，或者在云函数列表中右键新增 node.js 云函数
在 project.config.json 文件顶部配置云函数所在目录为 cloud，可以根据喜欢换名字，只要能对应起来就可以
"cloudfunctionRoot":"/cloud",保存成功，此时 cloud 文件夹会出现云朵标志，代表初始化成功
# 注意事项
要注意云函数的环境要和小程序的环境对应
文件夹右键选择新建 node.js 文件
# 云函数的调用
使用 callFunction, 在 name 处填写需要调用的云函数名称
//云函数的调用
//传统写法
wx.cloud.callFunction({
name:'getData',
success(res){
console.log('请求云函数成功',res)
},
fail(err){
console.log('请求云函数失败',res)
}
})
// 建议写法
wx.cloud.callFunction({
name: 'getData'
})
.then(res => {
console.log('成功', res)
this.setData({
// 传递值
openid: res.result.openid
})
})
.catch(err => {
console.log('失败', err)
})# 云函数获取数据
云函数只要有变动，就要重新部署，否则云函数不生效
部署选择上传并部署：云端安装依赖 (不上传 node_modules)
如果只改变了 js 文件，可点击对应的 js 文件，右键选择云函数增量上传：更新文件
而且在云函数中操作数据库时，不再需要写 wx，wx 只在本地编写的时候才需要写
有多个云开发环境的时候，需要指定环境，或者使用 DYNAMIC_CURRENT_ENV 指定为当前环境（提倡写法）
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})# day3
文件可以导出为 json 格式，可以使用记事本进行打开
导入的时候可以选择 insert 和 upsert 模式，使用 insert 时注意不要有多个 id 相同的情况出现，否则会报错。建议使用 upsert 模式。
云函数一次最多可返回 100 条数据，本地一次最多可返回 20 条数据。
云函数中 console 在云端打印，我们在调试器中只能看到本地的 console。
# 向云函数传递值
在 data 中传递值，在云函数中使用 event 接收对应的值
wx.cloud.callFunction({
name = 'update0129',
data:{
id:id,
price:20
}
})
// 云函数
event.id和event.price# day4
在编写云函数时，要注意先保存再上传到云端。
创建云函数不难，相当于把本地的代码移到云函数，去掉 wx
可以导入源码，但是如果使用别人的源码需要改开发者 ID
# 选择文件接口
用户选择文件接口（api)
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMedia.html
也可以选择 chooseImage 接口
chooseImg() {
//上传图片的第一步
wx.chooseImage({
count: 1, //可以选择多少张图片
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'], //设置图片来源
success:res=> {
this.uploadImg(res.tempFilePaths[0])
}
})
},# 文件上传
然后就可以对获取到的文件进行上传
uploadImg(temfile){
console.log('要上传图片的临时路径',temfile)
wx.cloud.uploadFile({
cloudPath: '西芹1.png',
filePath: temfile, // 文件路径
success: res => {
console.log('上传成功',res)
},
fail: err => {
console.log('上传失败',err)
}
})
}点击预览即可在手机上体验使用小程序上传图片
# day5
存储图片路径，使用存储中的下载地址，复制的时候注意不要复制问号后面的东西，因为是时间戳，可能导致图片失效。
# 上传视频
https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: 'back',
success(res) {
console.log(res.tempFilePath)
}
})上传视频有时候比较慢，需要耐心等待。
通过 type 值判断是上传视频还是图片
<image wx:if="{{showImg}}" src="{{imgUrl}}"></image>
<video wx:if="{{showVideo}}" src="{{videoUrl}}"></video># 上传 Word 和 PDF 文件
https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html
从客户端会话选择文件。
wx.chooseMessageFile({
count: 10,
type: 'image',
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles
}
})# 文件下载
从云存储空间下载文件
wx.cloud.downloadFile({
fileID: 'a7xzcb'
})}).then(res => {
console.log('下载成功')
}).catch(error => {
console.log('下载失败')
})# day6
vue 文件中，data 初始化需要使用的数据，生命周期函数写在 methods 外面，而自定义的函数写在 methods 内。
传递值不需要 setdata，只需要 this. 变量名 = 值即可。
# 目录结构
| 目录名 | 作用 |
|---|---|
| pages | 页面存放目录 |
| static | 静态文件目录 |
| APP.vue | 应用入口文件，和小程序 app.js 类似 |
| main.js | 应用入口文件，注册 vue 等 |
| manifest.json | 项目配置 |
| pages.json | 页面配置 |
| common | 存放共用的文件 |
| components | 自定义组件目录 |
| store | vuex 目录 |
| unpackage | 编译后的文件目录 |
# 前端控制语句
| 函数 | 作用 |
|---|---|
| v-bind | 可以简写为：，组件属性要使用 data 中定义的数据变量，或者组件属性使用表达式，要使用 v-bind 指定 |
| v-on | 可以简写为 @绑定事件 |
| v-model | 数据双向绑定，例如根据输入值动态改变 data 中的值 |
| v-if | 条件判断，决定某个内容或者区块是否挂载 |
| v-show | 条件判断，是否显示 |
| v-for | 列表渲染，遍历循环，可以使用 index 获取序号，可以使用 value 和 key 获取对象中的对应关系 |
onclick 事件也能够通过写表达式改变值，.stop 可以阻止事件穿透
# 生命周期
# 应用的生命周期（APP.vue)
| 周期名 | 意义 |
|---|---|
| onLaunch | 应用初始化完成执行，全局只执行一次，通常做登录的处理 |
| onShow | 应用显示时执行，或者从后台进入前台 |
| onHide | 应用隐藏时执行，或者从前台进入后台 |
# 页面的生命周期
onReady 在 onShow 之后触发，因为要等待数据
| 周期名 | 意义 |
|---|---|
| onLoad | 页面加载时触发 |
| onReady | 页面初次完成渲染时触发 |
| onShow | 页面显示时触发 |
| onUnload | 页面卸载时触发 |
| onHide | 页面隐藏时触发 |
在写完云函数之后，一定要先停止在模拟器上运行，在编译一次才可以的，然后上传到云端，就可以进行使用了
v-model 真的是神器，省去了很多获取值的麻烦操作
