文档章节

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

小海bug
 小海bug
发布于 2018/09/16 23:04
字数 738
阅读 111
收藏 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
粉丝 19
博文 64
码字总数 35922
作品 0
北京
架构师
私信 提问
“小程序 · 云开发”重磅上线,让小程序开发更高效!

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

CSDN资讯
2018/09/14
0
0
只用一天就能搭建你的论坛小程序!

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由达文西发表 笔者最近涉猎了小程序相关的知识,于是利用周末时间开发了一款类似于同事的小程序,深度体验了小程序云开发模式...

腾讯云加社区
2018/11/28
0
0
1个开发如何撑起一个过亿用户的小程序

在这篇文章中: 1个开发如何撑起一个过亿用户的小程序 1个开发如何撑起一个过亿用户的小程序 2018年12月,腾讯相册累计用户量突破,月活1200万,阿拉丁指数排行 ,已经成为小程序生态的重量级...

李成熙heyli
2018/12/12
0
0
云开发初探 —— 更简便的小程序开发模式

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

云加社区
2018/09/26
0
0
5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小...

Parry
2018/11/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

vue 对对象的属性进行修改时,不能渲染页面 vue.$set()

我在vue里的方法里给一个对象添加某个属性时,我console.log出来的是已经更改的object ,但是页面始终没有变化 原因如下: **受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃),...

Js_Mei
今天
2
0
开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
5
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部