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

小程序云开发全套实战教程,看完你就能做云开发了。

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

微信小程序云开发 初学者入门教程一(云开发环境搭建)本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。官方文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html#%E5%85%BC%E5%AE%B9%E6%80%A7%E9%97%AE%E9%A2%981:在桌面新建一个文件夹,命名为cloud  2:填写小程序appid,选择建立云开发快速启动模板,点击确定按钮。 3:完成之后,界面如下所示,默认好的项目目录和一系列的代码,可以仔细阅读和学习这些官方默认的文档  4:点击云开发按钮,申请开通  5:创建创建资源环境,填写环境名称,每个小程序帐号可免费创建两个环境。填写相关信息,环境名称  6:成功开通之后进入;创建完成之后的界面。  7:仔细看一下新建的云项目之后发现,新建项目中一个简单的获取用户openId的云函数示例  8:在cloudfunctions路径下的login文件夹上点击右键,选择创建并部署 9:在云开发控制台里,找到自己的环境ID,复制准备  10:在miniprogram目录下的app.js配置环境ID  示例代码://app.jsApp({  onLaunch: function () {        if (!wx.cloud) {      console.error(‘请使用 2.2.3 或以上的基础库以使用云能力’)    } else {      wx.cloud.init({        env: ‘wang-t6e372’,        //我刚刚从云开发控制台里复制过来的自己的环境ID,        traceUser: true,      })    }    this.globalData = {}  }})11:再次回到云开发控制台,依次点击云函数->login函数->右上角的测试按钮  11:测试成功  我们可以查看一下结果打开云开发控制台,切换到“用户管理”标签页,查看小程序的用户列表  再来测试一下上传图片的功能在本地桌面选一张图片上传,然后打开云开发控制台,查看存储管理,里面多了一张图片的记录,也就是刚刚我上传的自己的图片 微信小程序云开发 初学者入门教程二-前端操作数据库模块如何操作数据库,作为一名前端,如果对数据的知识不够熟悉也没关系,从现在开始好好学习就行,数据库的操作内容差不多涉及增删改查四大模块,花一些业余的时间在上面,也必有所得。数据库操作大多数需要用户openid,需要先配置好吧login云函数,如果已经配置好了,获取用户的openid之后,开始步骤:数据库操作API:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-client-api/database/index.html步骤1:打开云开发控制台,进入到数据库管理模块 2:选择添加集合,集合名称为counters,添加完成之后的界面 3:可以看到counters集合出现在左侧集合列表中注:集合必须在云开发控制台中创建4:新增一条记录试一试a. 打开pages/databaseGuide/databaseGuide.js文件,定位到 onAdd 方法 b:选中所有注释过的代码,ctrl+/快捷键,解除注释  onAdd: function () {    const db = wx.cloud.database()    db.collection(‘counters’).add({      data: {        count: 1      },      success: res => {        // 在返回结果中会包含新创建的记录的 _id        this.setData({          counterId: res._id,          count: 1        })        wx.showToast({          title: ‘新增记录成功’,        })        console.log(‘[数据库] [新增记录] 成功,记录 _id: ‘, res._id)      },      fail: err => {        wx.showToast({          icon: ‘none’,          title: ‘新增记录失败’        })        console.error(‘[数据库] [新增记录] 失败:’, err)      }    })  },c. onAdd 方法会往 counters 集合新增一个记录,新增如下格式的一个 JSON 记录{ “_id”: “数据库自动生成记录 ID 字段”, “_openid”: “数据库自动插入记录创建者的 openid”, “count”: 1 }在桌面新建一个json文件,将这段代码复制黏贴进去,备用 导入之后显示的界面  d: 点击按钮:新增记录  e:在云开发 -> 数据库 -> counters 集合中可以看到新增的记录  微信小程序云开发数据库操作一添加记录实例演示官方文档解读:<!– 新增记录 –>  <view class=”guide” wx:if=”{{step === 3}}”>    <text class=”headline”>新增记录</text>    <text class=”p”>1. 打开 pages/databaseGuide/databaseGuide.js 文件,定位到 onAdd 方法</text>    <text class=”p”>2. 把注释掉的代码解除注释</text>    <image class=”code-image” src=”../../images/code-db-onAdd.png” mode=”aspectFit”></image>    <text class=”p”>3. onAdd 方法会往 counters 集合新增一个记录,新增如下格式的一个 JSON 记录</text>    <text class=”code”>    {      “_id”: “数据库自动生成记录 ID 字段”,      “_openid”: “数据库自动插入记录创建者的 openid”,      “count”: 1    }    </text>    <text class=”p”>4. 点击按钮</text>    <button size=”mini” type=”default” bindtap=”onAdd”>新增记录</button>    <text class=”p” wx:if=”{{counterId}}”>新增的记录 _id 为:{{counterId}}</text>    <text class=”p”>5. 在云开发 -> 数据库 -> counters 集合中可以看到新增的记录</text>    <div class=”nav”>      <button class=”prev” size=”mini” type=”default” bindtap=”prevStep”>上一步</button>      <button class=”next” size=”mini” type=”default” bindtap=”nextStep” wx:if=”{{counterId}}”>下一步</button>    </div>  </view>做一个小demo效果如下:点击新增记录的按钮的时候,会出现提示,新增的记录为多少,并且有弹框提示,新增记录成功。  打开云开发控制台,点击数据库模块,可以看到刚刚添加的记录 wxml代码:<button size=”mini” type=”default” bindtap=”onAdd”>新增记录</button><text class=”p” wx:if=”{{counterId}}”>新增的记录 _id 为:{{counterId}}</text>js代码:// pages/databaseGuide/databaseGuide.jsconst app = getApp()Page({  data: {    step: 1,    counterId: ”,    openid: ”,    count: null,    queryResult: ”,  },  onLoad: function (options) {    if (app.globalData.openid) {      this.setData({        openid: app.globalData.openid      })    }  },  onAdd: function () {    const db = wx.cloud.database()    db.collection(‘counters’).add({      data: {        count: 1      },      success: res => {        // 在返回结果中会包含新创建的记录的 _id        this.setData({          counterId: res._id,          count: 1        })        wx.showToast({          title: ‘新增记录成功’,        })        console.log(‘[数据库] [新增记录] 成功,记录 _id: ‘, res._id)      },      fail: err => {        wx.showToast({          icon: ‘none’,          title: ‘新增记录失败’        })        console.error(‘[数据库] [新增记录] 失败:’, err)      }    })  },})对于数据库的增删改查后续会有更加细致的文章:1:微信小程序云开发数据库操作一添加记录2:微信小程序云开发数据库操作二查询记录3:微信小程序云开发数据库操作三删除记录4:微信小程序云开发数据库操作四更新记录下班之后带着电脑回家,在地铁上拥挤非常,感觉电脑都要被挤坏了,这几天反思了一下从前,每天上班下班,完成老板给的任务就可以潇洒走人了,总觉得自己不够努力,又或者每天重复着老旧的技术,周而复始,早已落后于前端发展的潮流,不觉开始惶恐。每天晚上开始学习,戒掉游戏和手机,让自己尽快达到一个沉迷于代码不可自拔的境界。 小程序云开发三:创建第一个界面 前面说到:微信小程序云开发 初学者入门教程一(云开发环境搭建)https://www.jianshu.com/p/5df4d51125e3,开通环境,部署环境之后,现在开始创建第一个界面。1:把小程序版本更新到最新,在桌面上创建一个文件夹,选择云开发模板,我们可以看到文件目录结构,默认的代码和架构。这些代码和目录结构不要删除,后面会用到 默认的代码和目录如下: 2:创建一个main文件夹  3:修改app.json文件打开app.json文件,添加”pages/main/main”,我这里放在第一行,方便打开就进入main界面。 4:完成之后,运行,开始在main.wxml,main.js里面写页面代码wxml<view>  <input style=’margin-top: 40rpx;’ placeholder=”请输入姓名” value=”{{name}}” bindinput=”bindKeyInputName” />  <input style=’margin-top: 40rpx;’ placeholder=”请输入年龄” value=”{{age}}” bindinput=”bindKeyInputAge” />  <button style=’margin-top: 40rpx;’ bindtap=’insertData’>插入数据</button>  <input style=’margin-top: 40rpx;’ placeholder=”请输入记录ID” value=”{{recordId}}” bindinput=”bindKeyInputId” />  <button style=’margin-top: 40rpx;’ bindtap=’queryData’>查询数据</button>  <text style=’margin-top: 40rpx;’>     姓名:{{nameResult}}  </text>  <text style=’margin-top: 80rpx;’>     年龄:{{ageResult}}  </text></view>wxss暂时没写js// miniprogram/pages/main/main.jsconst app = getApp()Page({  /**   * 页面的初始数据   */  db:undefined,  test:undefined,  data: {    name:”,    age:”,    recordId:”,    nameResult:”,    ageResult:”      },  /**   * 生命周期函数–监听页面加载   */  onLoad: function (options) {    var that = this    //  调用login云函数获取openid    wx.cloud.callFunction({      name: ‘login’,      data: {},      success: res => {        console.log(‘[云函数] [login] user openid: ‘, res.result.openid)        app.globalData.openid = res.result.openid        wx.cloud.init({ env: ‘minicloud’ })        that.db = wx.cloud.database()        that.test = that.db.collection(‘test’)      },      fail: err => {        console.error(‘[云函数] [login] 调用失败’, err)        wx.navigateTo({          url: ‘../deployFunctions/deployFunctions’,        })      }    })  },  // 单击“插入数据”按钮调用该函数  insertData:function() {    var that = this    try    {     //  将年龄转换为整数类型值      var age = parseInt(that.data.age)     //  如果输入的年龄不是数字,会显示错误对话框,并退出该函数      if(isNaN(age))      {        //  显示错误对话框        wx.showModal({          title: ‘错误’,          content: ‘请输入正确的年龄’,          showCancel: false        })        return      }        //  向test数据集添加记录      this.test.add({        // data 字段表示需新增的 JSON 数据        data: {          name: that.data.name,          age:  age        },        //  数据插入成功,调用该函数        success: function (res) {          console.log(res)          wx.showModal({            title: ‘成功’,            content: ‘成功插入记录’,            showCancel:false          })          that.setData({            name:”,            age:”          })        }      })    }    catch(e)    {      wx.showModal({        title: ‘错误’,        content: e.message,        showCancel: false      })    }  }, //  单击“查询数据”按钮执行该函数  queryData:function() {    var that = this     //  根据记录ID搜索数据集      this.db.collection(‘test’).doc(this.data.recordId).get({      // 找到记录集调用      success: function (res) {           //  将查询结果显示在页面上          that.setData({          nameResult:res.data.name,          ageResult:res.data.age        })      },     //  未查到数据时调用      fail:function(res) {        wx.showModal({          title: ‘错误’,          content: ‘没有找到记录’,          showCancel: false        })      }    })  }, //  下面的函数用于当更新input组件中的值时同时更新对应变量的值  bindKeyInputName: function (e) {    this.setData({      name: e.detail.value    })  },  bindKeyInputAge:function(e) {    this.setData({      age: e.detail.value    })  },  bindKeyInputId:function(e) {    this.setData({      recordId:e.detail.value    })  },})5:打开云开发控制台,添加一个test集合 6:回到main的界面,填写姓名和年龄信息,点击插入数据,弹框显示插入数据成功 7:再次查看云数据库在test里面我们可以看到刚刚插入的数据 8:关于查询,根据id进行查询 9:查询到我所得到的数据   小程序云开发四:向云数据库插入一条数据上一篇的文章里,有提到像数据库里面插入一条数据,今天主要是把《小程序云开发:向云数据库插入一条数据》单独拉出来写个小的demo,方便记忆和理解。参考文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/add.html1:方法在小程序的api里面说的很清楚,通过在集合对象上调用 add 方法往集合中插入一条记录,方法如下:db.collection(‘todos’).add({  // data 字段表示需新增的 JSON 数据  data: {    // _id: ‘todo-identifiant-aleatoire’, // 可选自定义 _id,在此处场景下用数据库自动分配的就可以了    description: ‘learn cloud database’,    due: new Date(‘2018-09-01’),    tags: [      ‘cloud’,      ‘database’    ],    // 为待办事项添加一个地理位置(113°E,23°N)    location: new db.Geo.Point(113, 23),    done: false  },  success(res) {    // res 是一个对象,其中有 _id 字段标记刚创建的记录的 id    console.log(res)  }})2:打开云开发控制台,添加一个todos集合,插入的数据会在这个集合里面显示。 3:例子,在昨天的项目中接着main文件写main.wxml<view>  <button  bindtap=’insertData’>插入数据</button></view>main.jsconst app = getApp()Page({  data: {  },  onLoad: function (options) {  },  // 单击“插入数据”按钮调用该函数  insertData: function () {    const db = wx.cloud.database({});    const cont = db.collection(‘todos’);    cont.add({      data: {        description: “向云数据库插入一条数据”,        due: new Date(‘2018-12-25’),        tags: [          “cloud”,          “database”        ],      },      success: function (res) {        console.log(res._id)        wx.showModal({          title: ‘成功’,          content: ‘成功插入记录’,          showCancel: false        })      }    });  },})4:打开界面,点击插入数据按钮,插入成功会出现提示弹框提示成功,插入的id也会在界面打印出来。 5:打开云开发控制台,我们可以看见自己刚刚插入的数据 6:那该如何从云数据库读取刚刚插入的这条数据,打印在前端界面?且看明天的博客。小程序云开发五:从云数据库读取数据 1:接着昨天的《小程序云开发四:向云数据库插入一条数据》,今天要写的是读取那条插入的数据。参考的api,请点击:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html2:主要方法:点击请求数据按钮的时候向数据库请求,cont.doc(“XCIGn8DR1TiNF-Pt”).get里面要填写插入的数据的时候标记的id。 //  单击“请求数据”按钮执行该函数  queryData: function () {    const db = wx.cloud.database({});    const cont = db.collection(‘todos’);    cont.doc(“XCIGn8DR1TiNF-Pt”).get({      success: function (res) {        console.log(res.data)      }    })   },3:效果如下 4:demo的示例:main.wxml<view>  <button  bindtap=’insertData’>插入数据</button>  <button  bindtap=’queryData’>请求数据</button></view>main.jsconst app = getApp()Page({  data: {    },  onLoad: function (options) {    },  // 单击“插入数据”按钮调用该函数  insertData: function () {    const db = wx.cloud.database({});    const cont = db.collection(‘todos’);    cont.add({      data: {        description: “向云数据库插入一条数据”,        due: new Date(‘2018-12-25’),        tags: [          “cloud”,          “database”        ],      },      success: function (res) {        console.log(res._id)      }    });  },  //  单击“请求数据”按钮执行该函数  queryData: function () {    const db = wx.cloud.database({});    const cont = db.collection(‘todos’);    cont.doc(“XCIGn8DR1TiNF-Pt”).get({      success: function (res) {        console.log(res.data)      }    })   },})原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe190后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G(包括小程序全套开发)干货大全。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序云开发全套实战教程,看完你就能做云开发了。
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏