文档章节

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

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

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

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

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

云加社区
今天
0
0
【编程日记】小程序巧用知晓云开发

小程序开发体验除了做界面逻辑,更重要的是后台的交互,实现更多有用的功能(微信支付,直播系统,会员系统,销售等等)。 笔者一开始接触小程序时候,后端服务器完全自己搭建,但是现在不一...

Andy刘家健
05/11
0
0
小程序新增「云开发」功能:无需服务器可实现快速迭代

沉寂了一个月,没什么动静之后,微信小程序终于迎来了新特性,「小程序·云开发」正式开放。 昨日,微信小程序宣布,“开发者工具新增「云开发」功能,开发者无需搭建服务器,就可实现小程序...

局长
09/11
0
0
云开发初探 —— 更简便的小程序开发模式丨掘金开发者大会

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

李CHENGXI
09/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

5、前后端分离跨域问题

在以往的开发中,前后端分离也不是像现在这么热门,所谓的前端工程师也只不过是写好静态页面由Java工程师或者php工程师嵌入到页面中进行开发,这或许加重了这些工程师的工作量,而且在样式调...

永远的Chester
11分钟前
0
0
全志T3 Linux显示驱动分析

1、总体架构 全志T3处理器的显示框架是基于标准Linux的帧缓冲架构,其结构如图 1.1所示。显示控制器DE的驱动架构如图 1.2所示,包括屏蔽差异的显示管理抽象层,以及显示图层驱动、显示设备驱...

pnsam301
19分钟前
0
0
【HAVENT原创】VUE2 经验问题汇总

新建一个 Vue 实例可以有下列两种方式: 1. new 一个实例 var app= new Vue({ el:'#todo-app', // 挂载元素 data:{ // 在.vue组件中data是一个函数,要写成data () {}这种方式 i...

HAVENT
22分钟前
0
0
IO基础知识

读文件,可以使用内置的open(file,mode); with 语句自动close; 查看当前目录的绝对路径:os.path.abspath('.'); 创建目录:os.mkdir(path); 删除目录:os.rmdir(path); 拼接路径推荐使用:o...

年轻的中年大叔
24分钟前
0
0
BATJ等大厂最全经典面试题分享

金九银十,又到了面试求职高峰期,最近有很多网友都在求大厂面试题。正好我之前电脑里面有这方面的整理,于是就发上来分享给大家。 这些题目是网友去百度、蚂蚁金服、小米、乐视、美团、58、...

老道士
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部