E企盈营销工具技术服务商 热线:4006-838-530

小程序云开发

E企盈直播平台营销卖货系统

一. 云开发的认识什么是云开发云开发和传统模式的区别三大基本功能的支持认识开通云开发二.云数据库云数据库认识类型支持控制云数据库权限控制云数据库的方式云数据库管理管理云开发初始数据的代码三.云数据库测试测试准备工作运行时进入相应页面在云数据库中创建一个集合添加功能准备一个添加按钮初始数据库与操作点击按钮查看结果监听添加的结果修改功能准备按钮实现方法查询功能准备按钮查询数据查询需知删除员工准备按钮删除代码四.云函数云函数的认识什么是云函数安装node.js云函数的位置云函数的使用完成index.js中的函数上传云函数调用云函数获取openid小程序已有login函数准备代码云函数操作数据库准备云函数准备按钮调用方法最终效果五 云存储完成图片的上传准备按钮准备选择图片的功能准备上传的功能查看云控制台保存文件id到云数据库中云数据库加一个集合把数据保存到云集合中获取图片并展示获取图片路径5.3.1 准备显示组件下载图片下载图片的按钮下载方法实现一. 云开发的认识 什么是云开发开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器, 使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。云开发提供了几大基础能力支持: 能力作用说明云函数无需自建服务器在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码数据库无需自建数据库一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库存储无需自建存储和 CDN在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理云调用原生微信服务集成基于云函数免鉴权使用小程序开放接口的能力,包括服务端调用、获取开放数据等能力 2云开发和传统模式的区别  #传统模式云开发开发效率低高开发成本高低#传统模式云开发Serverless不支持支持 总之,云开发可以让我们把更多关注度放到业务中来,对于小应用实在是太合适了。但是如果是开发大型的项目的话,现在传统开发的优势还是无法替代的!3三大基本功能的支持认识  名称功能云函数获取用户信息等,获取appid,openid,生成分享图,调用腾讯云SDK,操作数据库等…云数据库noSql数据库,完成数据CRUD云储存文件上传,下载(控制台可视化操作)4开通云开发 二.云数据库2.1云数据库认识开发提供了一个JSON数据库,有2GB免费存储空间要查询复杂的关系的话(关系型数据库更好),频繁的操作的话(文档型数据库更合适) 关系型数据库文档型数据库表:table集合:collection行:row记录:record/doc列:column字段:field 2.2类型支持String:字符串Number:数字Object:对象Array:数组Bool:布尔值GeoPoint:地理位置点(比较特殊,需要经纬度)Date:时间(使用的是客户端的时间)Null:空值 2.3 控制云数据库权限 2.3.1 控制云数据库的方式小程序控制(读写数据库受权限控制的限制) 云函数控制(拥有所有读写数据库的权限) 控制台控制(拥有所有读写数据库的权限)2.3.2 云数据库管理管理仅创建者可写,所有人可读仅创建者可读写仅管理端可写权管理端可读写2.3.3云开发初始数据的代码初始化:const db = wx.cloud.database();切换环境:const myDB = wx.cloud.database({env:’text’});三.云数据库测试 3.1测试准备工作3.1.1运行时进入相应页面运行时直接进入我的测试页面(即我的云开发页面)3.1.2在云数据库中创建一个集合3.2添加功能3.2.1准备一个添加按钮<button bindtap=”insertEmp” type=”primary”>添加员工</button>3.2.2初始数据库与操作  //初始化咱们的数据库(后面就可以使用db这个常量来代表咱们的云数据库) const db = wx.cloud.database();Page({    /**    * 页面的初始数据    */ data: {    },        //添加一条数据        insertEmp(){            //数据库中拿到employee集合并且进行数据添加            db.collection(“employee”).add({                data:{                    name:”杀死给”,                     age:23            }        })    },    …}3.2.3点击按钮查看结果3.2.4监听添加的结果使用回调的方式拿到成功与失败的结果  //添加一条数据insertEmp(){    //数据库中拿到employee集合并且进行数据添加    db.collection(“employee”).add({    data:{        name:”杀死给”,         age:23    },    //操作成功后的回调方法    //成功返回添加的结果success(res){    console.log(res);    },    //操作失败后的回调方法    // 失败返回错误的编码    fail(errorcode){ console.error(errorcode);    }})}, 用Promise风格拿到成功失败的结果insertEmp() {    //数据库中拿到employee集合并且进行数据添加    db.collection(“employee”).add({        data: {            name: “杀死给”, age: 23        }    }).then(res =>{        //成功后执行        console.log(res);    }).catch(err=>{        //失败后执行        console.error(err);    })}3.3修改功能3.3.1准备按钮<button bindtap=”updateEmp” type=”primary”>修改员工</button>  3.3.2实现方法//修改员工updateEmp(){    //doc 中 写 的 是 需 要 修 改 的 数 据 的 id         db.collection(“employee”).doc(“3b07eb945d058a250228ef8315115a0d”).update({        data:{            name:”阿里多”, age:26        }        }).then(res=>{ console.log(res);        })        .catch(err=>{ console.error(err);    })},3.4查询功能3.4.1准备按钮<button bindtap=”findEmp” type=”primary”>查询员工</button>3.4.2查询数据   findEmp(){//where里面添加的查询条件db.collection(“employee”).where({_id:”3b07eb945d0585a50226de3b4c3a7430″}).get().then(res=>{    console.log(res);}).catch(err=>{    console.error(err);})}查询需知查询的时候只能查询到有openid的数据,如果是自己添加的数据查询需要修改相应的权限             ​​​​​​​3.5删除员工删除所有的话需要使用云函数3.5.1删除按钮<button bindtap=”deleteEmp” type=”primary”>删除员工</button>3.5.2删除代码//删除员工deleteEmp(){db.collection(“employee”).doc(“3b07eb945d0585a50226de3b4c3a7430″).remove().then(res=>{console.log(res)}).catch(err=>{console.error(err)})}四.云函数​​​​​​​4.1云函数的认识​​​​​​​4.1.1什么是云函数云函数即在云端(服务器端)运行的函数。在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用,同时云函数之间也可互相调用。​​​​​​​4.4.2安装node.js云函数需要node的支持(需要安装node.js)下载node安装包(至少是node v8.0以上的版本安装后在 控制台/终端 输入node-v 与 npm -v有效果代表安装成功​​​​​​​4.1.13云函数的位置本地的位置云端的位置 4.1.3 创建云函数创建云函数                 自动上传云函数云开发位置查看云函数云函数结构package.json:一些模块与配置信息index.js 云函数的入口文件 其它注意点早期:wx-server-sdk错误,点击安装即可调用时提示未安装云函数右键,终端中打开输入npm install ‐‐save wx‐server‐sdk@latest​​​​​​​4.2云函数的使用​​​​​​​4.2.1完成index.js中的函数​​​​​​​// 云函数入口文件//这里拿到云端信息,我们现在暂时用不到,可以把它进行注释或者删除// const cloud = require(‘wx‐server‐sdk’)// cloud.init()// 云函数入口函数/*** event:小程序端调用这个方法传过来的相应的参数* context:上下文环境,也包括当前登录用户的一些信息*/exports.main = async (event, context) => {    //返回一个对象,对象中包括咱们求和的函数    return {        sum:event.num1 + event.num2    }}4.2.2上传云函数 每次修改完成后,都需要进行上传部署右键云函数,选择上传并部署上传并部署:云端安装依赖(不上传node modules) -> 云端安装环境上传并部署:所有文件 -> 把环境传上去可以在云控制台中进行云函数的功能测试4.2.3调用云函数 准备按钮<view>云函数</view><button bindtap=”sum” type=”primary”>调用云函数</button>准备函数sum(){    wx.cloud.callFunction({         name:”sum”,        data:{            num1:4, num2:8        }    })    .then(res => {console.log(res)})    .catch(err=>{console.error(err)})}调用结果查看查看函数调用状态4.3获取openid取openid对以后的登录功能是非常有用的我们不需要像传统方式那样再通过code去后台拿对应的id​​​​​​​4.3.1小程序已有login函数咱们依然需要先把login函数上传​​​​​​​4.3.2准备代码按钮准备<button bindtap=”getOpenId” type=”primary”>获取openId</button>功能代码完成getOpenId(){ wx.cloud.callFunction({    name: “login”    }).then(res => { console.log(res) })    .catch(err => { console.error(err) })}结果查看4.4云函数操作数据库咱们可以通过云函数批量删除数据库信息​​​​​​​4.4.1准备云函数不要忘了完成后上传// 云函数入口文件const cloud = require(‘wx‐server‐sdk’) cloud.init()// 云函数入口函数exports.main = async (event, context) =>     { const wxContext = cloud.getWXContext(); const db = cloud.database();    //此处把年纪大于20的都删除掉    // await只能在async函数中,代表完成后再返回    try{        return await db.collection(“employee”).where({ name:”阿里    }).remove();    }catch(e){        console.error(e);    }}4.4.2​​​​​​​准备按钮 <button bindtap=”batchDelete” type=”primary”>批量删除</button>4.2.3调用方法batchDelete(){ wx.cloud.callFunction({    name:”deleteData”    }).then(res => {        console.log(res)    })    .catch(err => {        console.error(err)    })}4.4.4最终结果五、云存储咱们云存储主要是完成文件的上传下载等操作图片可以从相册中获取,也可以直接拍照​​​​​​​5.1完成图片的上传5.1.1准备按钮<button bindtap=”uploadImg” type=”primary”>上传图片</button> 5.1.2准备选择图片的功能 在相应的页面js中拿到图片文档 -> api -> 媒体 -> 图片(chooseImage)uploadImg(){    //选择一张图片    wx.chooseImage({    //可以选择几张图片(最多9张,多张的话涉及到异步的问题)    count: 1,    //sizeType:确定是以源文件的形式还是压缩文件形式上传    sizeType: [‘original’, ‘compressed’],    //sourceType:图片来源,是本地图库还是从相机会获取    sourceType: [‘album’, ‘camera’],    success(res) {        // tempFilePath可以作为img标签的src属性显示图片        // 这个是成功后图片的临时路径(后面上传到云存储就需要用到)         const tempFilePaths =res.tempFilePaths        console.log(tempFilePaths);        }    })}5.1.3准备上传的功能 文档 -> 云开发 -> 存储(uploadFile)uploadImg(){    //选择一张图片    wx.chooseImage({        //可以选择几张图片(最多9张,多张的话涉及到异步的问题)        count: 1,        //sizeType:确定是以源文件的形式还是压缩文件形式上传        sizeType: [‘original’, ‘compressed’],        //sourceType:图片来源,是本地图库还是从相机会获取        sourceType: [‘album’, ‘camera’],        success(res) {            // 这个是成功后图片的临时路径(后面上传到云存储就需要用到)            const tempFilePaths =res.tempFilePaths            console.log(tempFilePaths);            //上传到云存储的功能            wx.cloud.uploadFile({                //存放的云存储路径(一样的路径会覆盖)                cloudPath: ‘example.png’,                //特别注意:获取的临时路径是个数组                filePath: tempFilePaths[0], // 文件路径            }).then(res => {                // 得到文件的id值(下一步我们把这个id存在数据库,方便以后获取)                 console.log(res.fileID)            }).catch(error => {                console.error(error);        }    })}​​​​​​​5.1.4查看云控制台5.2保存文件id到云数据库中​​​​​​​5.2.1云数据库加一个集合5.2.2​​​​​​​​​​​​​​把数据保存到云集合中下面是整个上传文件的完整代码uploadImg(){//选择一张图片wx.chooseImage({//可以选择几张图片(最多9张,多张的话涉及到异步的问题) count: 1,//sizeType:确定是以源文件的形式还是压缩文件形式上传sizeType: [‘original’, ‘compressed’],//sourceType:图片来源,是本地图库还是从相机会获取sourceType: [‘album’, ‘camera’],success(res) {// tempFilePath可以作为img标签的src属性显示图片// 这个是成功后图片的临时路径(后面上传到云存储就需要用到) const tempFilePaths = res.tempFilePaths console.log(tempFilePaths);//上传到云存储的功能wx.cloud.uploadFile({//存放的云存储路径(使用时间缀,以免传上去的文件产生覆盖)) cloudPath: new Date().getTime()+’.png’,//特别注意:获取的临时路径是个数组filePath: tempFilePaths[0], // 文件路径}).then(res => {// 得到文件的id值console.log(res.fileID)//把文件的fileID保存到云数据库中db.collection(“images”).add({data:{fileID:res.fileID}}).then(res=>{ console.log(res);}).catch(err=>{ console.error(err);})}).catch(error => { console.error(error);})}})}5.3获取图片并展示5.3.1获取图片路径//初始化咱们的数据库(后面就可以使用db这个常量来代表咱们的云数据库) const db = wx.cloud.database();Page({/*** 页面的初始数据*/ data: {imagesPath:[]},…//显示相应的图片showImg:function(){//1.拿到当前登录用户的openid wx.cloud.callFunction({//执行去函数login方法name:”login”}).then(res=>{//拿到对应的openid属性var openid = res.result.openid;//2.根据openid拿到对应的图片db.collection(“images”).where({_openid: openid}).get().then(res2=>{//查看所有的结果console.log(res2);//把结果交给全局的imagesPath数据this.setData({imagesPath:res2.data})})})},//…})5.3.1 准备显示组件<button bindtap=’showImg’ type=’primary’>显示图片</button><!‐‐ block相当于咱们的div,但是它只模板,不会直接展示出来 ‐‐><block wx:for=”{{imagesPath}}” wx:key=”{{index}}”><image src='{{item.fileID}}’></image></block>5.4下载图片​​​​​​​5.4.1下载图片的按钮<button bindtap=’showImg’ type=’primary’>显示图片</button><!‐‐ block相当于咱们的div,但是它只模板,不会直接展示出来 ‐‐><block wx:for=”{{imagesPath}}” wx:key=”{{index}}”><image src='{{item.fileID}}’></image><butto

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序云开发
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏