文档章节

小程序云开发之初体验(感觉腾讯对小程序的支持力度加到了好多)

小海bug
 小海bug
发布于 09/16 23:04
字数 738
阅读 63
收藏 0

为了体验第一件事情看官网,https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html ,其实官方给的文档很详细了,这里只是自己用新的特性实现自己的一个小工具,BUG提交的一个小工具。

功能:我只需要两个功能,一个提交bug(包含bug描述,和bug截图),一个bug列表查看,而小程序的云开发正好满足了,对应其存储图片、和数据的能力

说明:接下来开始在一个基础的小程序的demo基础上开始开发了,这里说明一下,因为云开发的demo东西较多(主要是这个还是讲解云开发用的),而我这里更主要实现自己的小工具。

开发步骤:

一、根据文档把普通项目启用云开发功能,app.json修改

app.json
{
  "cloud": true, //这一个为新增,通过这个来开启云开发
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
app.js
onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        traceUser: true,
      })
    }

    this.globalData = {}
   
  }

二、在云开发的控制台新增表(集合),bug_record,用来存储数据,同时在存储管理新增目录bug_img用来存储图片(不建议直接放到根目录),防止以后变的太乱。

三、bug提交页面开发,主要包括一个描述输入和一个图片选择

 data: {
    filePath:'',
    description:''
  }

//图片选择功能,页面部分
<view class="uploader-text" bindtap="doUpload">
      <text>上传图片</text>
    </view>

//js部分
// 上传图片
  doUpload: function () {
    // 选择图片
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

        wx.showLoading({
          title: '上传中',
        })

        const filePath = res.tempFilePaths[0]
        var uuid = "cms" + mydate.getDay() + mydate.getHours() + mydate.getMinutes() + mydate.getSeconds() + mydate.getMilliseconds();
        // 上传图片
        const cloudPath = 'bug_img/' + uuid + filePath.match(/\.[^.]+?$/)[0]
        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: res => {
            console.log('[上传文件] 成功:', res)

            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath

            this.setData({
              filePath: cloudPath
            })
          },
          fail: e => {
            console.error('[上传文件] 失败:', e)
            wx.showToast({
              icon: 'none',
              title: '上传失败',
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })

      },
      fail: e => {
        console.error(e)
      }
    })
  }

四、表单提交,提交描述和上一步返回的文件路径

onAdd: function () {
    const db = wx.cloud.database()
    var description = this.data.description;
    var filePath = this.data.filePath;
    db.collection('bug_record').add({
      data: {
        description: description,
        filePath:filePath
      },
      success: res => {
        // 在返回结果中会包含新创建的记录的 _id
        
        wx.showToast({
          title: '新增记录成功',
        })
        console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
      },
      fail: err => {
        wx.showToast({
          icon: 'none',
          title: '新增记录失败'
        })
        console.error('[数据库] [新增记录] 失败:', err)
      }
    })
  }

五、查库展示bug提交记录(下一次添加,因为这个只是为了测试功能)

 

基本完成,但还很粗略,有时间把功能完善一下,发布出来公司内部使用一下

qq交流群:208779755

© 著作权归作者所有

共有 人打赏支持
小海bug
粉丝 18
博文 45
码字总数 29017
作品 0
北京
架构师
私信 提问
“小程序 · 云开发”重磅上线,让小程序开发更高效!

近日,“小程序 · 云开发”解决方案正式上线,该方案可以为小程序开发者提供完整的云端支持。 通过简化复杂的后端和运维操作,让即便不具备一定后端知识的开发者,也能高效开发出一款高质量...

CSDN资讯
09/14
0
0
云开发初探 —— 更简便的小程序开发模式

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由李成熙heyli发表于云+社区专栏 李成熙,腾讯云高级工程师。2014年度毕业加入腾讯AlloyTeam,先后负责过QQ群、花样直播、腾...

云加社区
09/26
0
0
云开发初探 —— 更简便的小程序开发模式丨掘金开发者大会

原文链接 李成熙,腾讯云高级工程师。2014年度毕业加入腾讯AlloyTeam,先后负责过QQ群、花样直播、腾讯文档等项目。2018年加入腾讯云云开发团队。专注于性能优化、工程化和小程序服务。 小程...

李CHENGXI
09/20
0
0
腾讯云 Game-Tech 技术沙龙小游戏专场“空降”长沙

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯游戏云发表于云+社区专栏 小游戏作为今年快速成长的新生态,在开放进入市场之后持续成为行业热点,获得了游戏开发商的...

腾讯云加社区
10/12
0
0
Taro + 小程序云开发实战

前言 小程序开放了云开发能力,为开发者提供了一个可以很快速构建小程序后端服务的能力,作为一名对新技术不倒腾不快的前端,对此也是很感兴趣的; 而Taro 是凹凸实验室推出的,基于React 语...

evont
10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

什么是自然语言处理技术

自然语言处理(NLP)是计算机科学,人工智能,语言学关注计算机和人类(自然)语言之间的相互作用的领域。自然语言处理是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计...

本宫没空2
19分钟前
2
0
移动端关闭虚拟键盘

那么document.activeElement.blur()为什么可以阻止虚拟键盘弹出呢?原因是:当你点击input的时候,document.activeElement获得了DOM中被聚焦的元素,也就是你点击的input,而调用.blur()方法...

niuhongxia
19分钟前
3
0
Ubuntu18.04安装RabbitMQ(正确安装)

1、安装erlang 由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang sudo apt-get install erlang-nox 2、安装Rabbitmq 更新源 sudo apt-get update 安装 sudo apt-get ins...

hansonwong
29分钟前
2
0
如何在以太坊开发发行自己的ERC-20数字货币

今天我将向你展示如何在以太坊区块链上开发你自己的加密货币并将其出售!我将向你展示如何使用以太坊智能合约逐步创建自己的ERC-20代币和众筹销售,如何测试智能合约,如何将智能合约部署到以...

geek12345
29分钟前
3
0
Vlock用于有多个用户访问控制台的共享 Linux 系统

当你在共享的系统上工作时,你可能不希望其他用户偷窥你的控制台中看你在做什么。如果是这样,我知道有个简单的技巧来锁定自己的会话,同时仍然允许其他用户在其他虚拟控制台上使用该系统。 ...

linuxprobe16
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部