2020.9.29陈悦玲
咱们为了节省时间，直接用vant weapp组件来
1. 先创建一个新的文件夹 配置好vant weapp
vant weapp地址：https://youzan.github.io/vant-weapp/#/search
1.点开miniprogram文件夹在终端中打开，在终端中输入“npm init”后，直接enter到最后，
2. init操作完成后 输入“npm i @vant/weapp -S --production”
3. 点开微信开发程序中的“工具” --->构建npm（构建完成后会有一个miniprogram_npm文件夹）
4.回到vant weapp，找到search搜索，开始运用我们的组件
- 将我们的引入部分复制粘贴到app.json文件中
- 回到vant weapp中，找到search搜索组件，开始操作
- 将红色框的代码复制到微信开发工具中
5. 开始调用接口，我们需要搜索城市的接口
- 用 聚合数据 请求接口
我们要做到输入地址并且点击 搜索 后能够请求到所有的城市地址，以下html
js代码：
//请求所有城市列表
//相当于把我们的请求封装起来，就不用请求很多次数据了，只用请求这一次即可，这个函数的名字是自己取的，在函数封装的时候，下面有一个success（res），会将指针this指向res，所以我们要在改变指针指向方向改变之前就要去给他固定住指针的方向
ctiyList:function(){
var that = this;
wx.request({
//url是接口上的请求地址+请求参数
url: 'http://v.juhe.cn/movie/citys?dtype=&key=0c1ea05f351afa36ce3c86a59ea122b3',
method:"GET",
header:{
"content-type":"application/x-www.form-urlencoded"
},
success(res){
//res是接收接口的所有的数据
console.log(res);
//在微信小程序中只能用setDate来改变变量的值 不能用“变量名=变量值”来改变
that.setData({
citys:res.data.result
//citys是自己在data中定义的一个数组用来保存我们接收到的数据
})
// console.log(that.data.citys)
}
})
},
2. 然后我们来判断我们在搜索框中写的内容和我们请求到的数据是否匹配是否相同
onClick() {
console.log('搜索' + this.data.value);
//判断我们得到的数据与输入的数据是否匹配
for(let i=0;i<this.data.citys.length;i++){
if(this.data.citys[i].city_name==this.data.value){
//如果我们输入的城市存在 那就返回我们输入城市的id值，并且保存在变量中
this.setData({
cityID:this.data.citys[i].id
})
}
}
console.log("城市id:"+this.data.cityID)
},
3. 最后使用在页面加载时调用这个接口cityList
//js
onload:function(){
this.cityList();
}
6.我们继续来调用今日播放的电影接口
- 同样的请求接口
//今日放映影片
todayMovie:function(cid){
var that = this //this指针指向pages 我们要将这个指针保存下来所以要一个that,避免后面出现指针指向res的错误
//请求接口
wx.request({
url: `https://v.juhe.cn/movie/movies.today?cityid=${cid}&dtype=&key=0c1ea05f351afa36ce3c86a59ea122b3`,
method:"GET",
header:{
"content-type":"application/x-www.form-urlencoded"
},
success(res){
// console.log(res)
that.setData({
today:res.data.result
})
}
})
},
- 因为要显示我们的内容，所以在wxml的位置写上我们的wxml代码，
<view wx:for="{{today}}" wx:key="index">
//today是我们在data中保存的今日放映电影接口的数据
<image src="{{item.pic_url}}"></image>
//item是today数组里面的数据
<view>
<text>{{item.movieName}}</text>
</view>
</view>
- 最后在页面渲染的时候请求我们的今日电影接口
1.话不多说，新建项目
- 新建一个index页面
2.操作云数据库
- 增删改查
（注意看代码中的注释，很多重要的东西都在注释里）
```html
//绑定数据库
const db = wx.cloud.database({
env:"cyl1-8g3sdkd16a70bf0e"
})
add:function(){
//添加数据 add
db.collection("student").add({
//data中是我们添加到数据库中的数据
data:{
username:"陈小玲玲",
sex:"女",
age:21
}
}).then(res=>{
//如果数据添加成功，调用then的方法
console.log(res)
}).catch(err=>{
//如果数据添加失败，调用catch的方法
console.log(err)
})
},
select:function(){
db.collection("student").where({
// username:"陈大玲玲"
//高级查询
age:db.command.lt(25)//小于25就输出这条信息
//gt是大于
}).get().then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
update:function(){
// 修改数据 （不能直接修改，也不推荐在数据库中直接修改数据)
// doc()就是我们要修改的那条数据的id
// 而且要放在data中 和 add一样
db.collection("student").doc("b8df3bd65f732ee100a2e7451771bbc7").update({
data:{
username:"陈mei玲玲"
}
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
del:function(){
//删除数据 （数据库一般情况不允许删除)
//每次只能删除一条代码
db.collection("student").doc("b8df3bd65f732ee100a2e7451771bbc7").remove().then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
绑定数据库的env的环境id，下面的图来找
#### 3.云函数sum和delete
先在cloudfunction文件夹中新建一个sumadd文件夹，用这个文件夹保存我们的云函数
打开我们的sumadd下面的index.js文件，编写如下代码
然后右键点击sumadd文件夹，选择**上传并部署**
我们执行云函数操作就在pages的文件中，写上我们的函数，用函数封装我们的执行条件，再在wxml页面绑定我们的函数即可
上面是加法，下面是删除数据的文件 （delete）
云删除函数（云删除函数可以删除多个数据，如果直接在云数据库中删除只能删除一个值）也封装在函数中，在wxml页面中绑定我们的删除函数。
写完了也要右键点击delete文件 并且 **上传并部署**
#### 4. 云存储（上传图片+显示图片）
这个直接写在index.js文件中
```html
//云存储
uploadImg:function(){
//选择图片
wx.chooseImage({
count: 1,//选择几张图片
sizeType:["compressed","original"],//是要原图还是压缩图
sourceType:["album","camera"],//是从相册来还是相机来
success(res){
console.log(res.tempFilePaths)//输出我们选择图片的临时路径 是一个数组
//保存图片的临时路径
console.log(res.tempFilePaths[0])
//上传图片
wx.cloud.uploadFile({
//cloudPath是我们的新文件名称（也就是放在云存储里面）
cloudPath:new Date().getTime()+Math.floor(Math.random()*100)+".jpg",//给上传云的图片一个不会重复的名字，避免图片覆盖
//filePath使我们的临时文件名称
filePath:res.tempFilePaths[0],//把我们临时路径放在临时的filePath里面存储上
success(res2){
//fileID是我们上传图片的路径
console.log(res2)
console.log(res2.fileID)
//把这个路径保存到我们的云数据库中
db.collection("student").add({
data:{
fileID:res2.fileID,
}
}).then(res3=>{
console.log(res3)
}).catch(err=>{
console.log(err)
})
}
})
}
})
},
也要绑定我们的上传函数
显示图片代码
//显示图片
showImg:function(){
var that = this
db.collection("student").get().then(res=>{
// console.log(res)
that.setData({
showImages:res.data //????????????????????????????????????
})
console.log(that.data.showImages)
}).catch(err=>{
console.log(err)
})
},
评论留言