为何在如何创建微信小程序序开发工具中,开通云开发功能,提升加载数据错误?

一、小程序云开发初始化参考博客:https://xiaoshitou.blog.csdn.net/article/details/112391688// app.js
App({
onLaunch() {
wx.cloud.init({
env:"chenshuming-vo6uw"
})
}
})
二、云数据库1、数据库权限管理默认控制台创建的表只能有管理员才能访问2、云数据库增删改查查询所有数据
//获取表的所有数据
wx.cloud.database().collection('goods').get({
success(res){
console.log("请求成功",res)
},
fail(err){
console.log("请求失败",err);
}
})
//es6的简介写法
wx.cloud.database().collection('goods').get().then(res =>{
console.log("请求成功",res)
}).catch(err =>{
console.log("请求失败",err)
})
条件查询
wx.cloud.database().collection('goods').where({
name:'苹果'
}).get().then(res=>{
console.log("请求成功",res)
})
//复杂条件查询:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/command/Command.gt.html
var db = wx.cloud.database()
const _ = db.command
wx.cloud.database().collection('goods').where({
price:_.gt(10)
}).get().then(res=>{
console.log("请求成功",res.data)
})
单条数据查询//doc后面传入数据id
wx.cloud.database().collection('goods').doc("c462c81061b7232f021385c758360ff5").get().then(res=>{
console.log("查询单条数据成功",res)
})
添加数据wx.cloud.database().collection('goods').add({
data:{
name:"西瓜",
price:20
}
}).then(res=>{
console.log("添加成功", res)
})
修改数据删除或修改只能操作自己创建的数据(通过openid区分)
wx.cloud.database().collection('goods').doc("c0ca0aed61bc728e00d1281b5787e0d7").update({
data:{
name:"梨",
price:20
}
}).then(res=>{
console.log("修改成功", res)
})
删除数据wx.cloud.database().collection('goods').doc("c0ca0aed61bc728e00d1281b5787e0d7").remove().then(res=>{
console.log("删除成功", res)
})
搜索 //我这里简单起见就把搜索词写死,正常应该用户输入的
let searchKey = '小石头'
let db = wx.cloud.database()
let _ = db.command
db.collection('news')
.where(_.or([
{//标题
title: db.RegExp({ //使用正则查询,实现对搜索的模糊查询
regexp: searchKey,
options: 'i', //大小写不区分
}),
},
{//描述
desc: db.RegExp({
regexp: searchKey,
options: 'i',
}),
}
])).get()
.then(res => {
console.log('查询成功', res)
})
.catch(res => {
console.log('查询失败', res)
})
案例输出数据库的内容,点击数据后能获得数据的id<view wx:for="{{list}}">
<view bindtap="goDetail" data-id="{{item._id}}">商品名:{{item.name}}</view>
</view>
后台onLoad: function (options) {
wx.cloud.database().collection('goods').get().then(res =>{
this.setData({
list:res.data
})
console.log("请求成功",res.data)
}).catch(err =>{
console.log("请求失败",err)
})
},
goDetail(e){
console.log(e.currentTarget.dataset.id);
wx.navigateTo({
url: '/pages/index/index?id='+e.currentTarget.dataset.id,
})
},
//跳转页获取参数
onLoad(e){
console.log("id是",e.id)
}
通过表单添加数据:输入商品名称
<input class="inputclass"
type="text" bindinput="getName" />
//后台获取数据并添加到数据库
getName(res){
console.log(res.detail.value);
},
排序wx.cloud.database().collection('goods').orderBy("name",'asc').get().then(res =>{
this.setData({
list:res.data
})
//降序:desc
返回规定条数数据wx.cloud.database().collection('goods').limit(2).get().then(res =>{
this.setData({
list:res.data
})
分页//skip表示从第及条数开始
wx.cloud.database().collection('goods').skip(2).get().then(res =>{
this.setData({
list:res.data
})
三、云函数1、初始化新建文件夹,配置"cloudfunctionRoot":"/cloud"创建云函数2、调用云函数//方法一
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)
}).catch(err=>{
console.log('请求云函数失败',res)
})
3、云函数操作数据库查询,和本地操作数据库一样,一次请求数据上限为100条exports.main = async (event, context) => {
return cloud.database().collection('goods').get()
}
更新数据: wx.cloud.callFunction({
name:'getValues',
data:{
id:"d20aea5861bc701a00a9048317846ce1",
name:"香蕉"
},
success(res){
console.log('请求云函数成功',res)
},fail(err){
console.log('请求云函数失败',err)
}
})
exports.main = async (event, context) => {
return cloud.database().collection('goods').doc(event.id).update({
data:{
name:event.name
}
})
}
其他操作类似四、云存储1、上传图片//选择图片
choseImg(){
var that = this
//上传图片第一步
wx.chooseImage({
count: 1,
//可以选择多少张图片
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'], //设置图片来源
success (res) {
const tempFilePaths = res.tempFilePaths
that.uploadImg(tempFilePaths[0])
//要上传图片的临时地址
}
})
},
//上传文件
uploadImg(temFile){
console.log(temFile)
wx.cloud.uploadFile({
cloudPath:'test.jpg',
filePath: temFile,
success (res){
const data = res.data
console.log("上传成功")
//do something
},fail(res){
console.log("上传失败")
}
})
}
显示图片,点击图片后全屏播放//图片点击事件
imgYu:function(event){
var src = event.currentTarget.dataset.src;//获取data-src
//var imgList = event.currentTarget.dataset.list;//获取data-list
var imgList = this.data.images
//图片预览
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
})
},
<view wx:for="{{list}}" wx:key="id" >
<view>{{item.name}}</view>
<view>
<image bindtap="imgYu" data-list="{{item.imgPath}}" src="{{item.imgPath}}"
show-menu-by-longpress="true"> </image>
</view>
</view>
2、上传视频//选择视频
choseVedio(){
var that = this
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: 'back',
success(res) {
that.uploadVedio(res.tempFilePath,"test.mp4")
console.log(res.tempFilePath)
}
})
},
//上传文件
uploadVedio(temFile,fileName){
console.log(temFile)
wx.cloud.uploadFile({
cloudPath:fileName,
filePath: temFile,
success (res){
const data = res.data
console.log("上传成功")
//do something
},fail(res){
console.log("上传失败")
}
})
},
3、上传文件可以上传所有文件 chooseFile(){
var that = this
wx.chooseMessageFile({
count: 10,
type: 'all',
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles
that.uploadFile(tempFilePaths[0].path,tempFilePaths[0].name)
}
})
},
//上传文件
uploadFile(temFile,fileName){
console.log(temFile)
wx.cloud.uploadFile({
cloudPath:fileName,
filePath: temFile,
success (res){
const data = res.data
console.log("上传成功")
//do something
},fail(res){
console.log("上传失败")
}
})
}
4、下载文件wx.cloud.downloadFile({
fileID: 'cloud://chenshuming-vo6uw.6368-chenshuming-vo6uw-1300611849/test.jpg',
success: res => {
// get temp file path
console.log(res.tempFilePath)
},
fail: err => {
// handle error
}
})
下载并打开
wx.cloud.downloadFile({
fileID: 'cloud://chenshuming-vo6uw.6368-chenshuming-vo6uw-1300611849/test.jpg',
success: function (res) {
const filePath = res.tempFilePath
wx.openDocument({
filePath: filePath,
success: function (res) {
console.log('打开文档成功')
}
})
}
})
五、分页1、本地js分页jsgetData(e){
console.log(e.currentTarget.dataset.page)
this.getList(e.currentTarget.dataset.page)
},
getList(pageNum){
var that = this
wx.cloud.database().collection('goods')
.skip(20*(pageNum-1))
//从21开始获取20条
.get({
success(res){
that.setData({
list:res.data
})
console.log("请求成功",res)
},
fail(err){
console.log("请求失败",err);
}
})
}
wxml<!--pages/fenye/fenye.wxml-->
<view wx:for="{{list}}" wx:key="_id" wx:for-index="index">
<view>{{index}} -----{{item.name}}
</view>
</view>
<button bindtap="getData" data-page="1">第一页</button>
<button
bindtap="getData" data-page="2">第二页</button>
实现下拉时页面内容增加:pageNum = 0 //全局变量
/**
* 页面上拉触底事件的处理函数
*/下·
onReachBottom: function () {
//提示加载中
console.log("下拉了页面")
wx.showLoading({
title: '加载中',
})
var that = this
//页码加一
pageNum = pageNum + 1
wx.cloud.database().collection('goods')
.skip(pageNum*20)
//从21开始获取20条
.get({
success(res){
//追加数据
that.setData({
list:that.data.list.concat(res.data) //将查询结果拼接到原list中
})
//提示加载完成
wx.hideLoading({
title: '加载成功',
})
//提示到底了
if(res.data.length <= 0){
wx.showToast({
icon:"none",
title:"没有更多数据了"
})
}
console.log("请求成功",res)
},
fail(err){
console.log("请求失败",err);
}
})
}
wxml<view wx:for="{{list}}" wx:key="_id" wx:for-index="index">
<view class="list">{{index}} -----{{item.name}}
</view>
</view>
2、云函数分页wx.cloud.callFunction({
name:'getData',
data:{
len:len, // 携带参数调用云函数
pageNum:pageNum
},
success(res){
console.log('请求云函数成功',res)
},fail(err){
console.log('请求云函数失败',res)
}
})
}
前言:供学习用在小程序的根目录新建一个cloudfunction文件夹,比如下图在project.config.json文件里配置"cloudfunctionRoot": “cloudfunction/”,在app.json文件里配置"cloudfunctionRoot": “./cloudfunction/”cmd窗口切换到小程序的根目录 然后执行npm install点击开发者工具面板上的云开发-云函数,新建云函数login鼠标放在这个文件上,右键选择同步云函数列表同步完成后,鼠标放在这个文件夹上,右键选择最下方在外部终端窗口中打开,输入npm install,结果如下图以上云开发就配置好了,接下来新建集合,如下图然后点击概览查看自己的 云函数环境ID然后在每个js的onLoad:function里面放这一段代码,在小程序里onLoad只会加载一次,并且可以从options中获得从其他页面跳过来带的参数onLoad: function (options) {var that = this
//
调用login云函数获取openid
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[云函数] [login] user openid: ', res.result.openid)
debugger;
app.globalData.openid = res.result.openid
wx.cloud.init({ env: 'dev-tejdn' })
that.db = wx.cloud.database()
that.test = that.db.collection('test')
},
fail: err => {
console.error('[云函数] [login] 调用失败', err)
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
}
})
},wx.cloud.init({ env: ‘dev-tejdn’ }) dev-tejdn 是你的云函数环境ID 换成你自己的that.test = that.db.collection(‘test’) test 是你新建的集合名 换成你自己建的上面的配置好之后 就可以直接调用add update get remove 等方法 对数据进行处理了以上就是小程序的配置,如果对您有所帮助,可给作者打赏,谢谢。}

我要回帖

更多关于 如何创建微信小程序 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信