最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
用户
 ?#19968;?#23494;码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

你的年目标实现了吗,记一次开发微信小程序

Rolan 2019-1-2 00:12

前言:这是笔者第一次开发小程序,此前一直有打算自己做一个,并且能够上线使用,但一直找不到灵感,加上还需要服务器端、数据库等技能,所有一直没能实现。后来偶然看到微信小程序云开发(有点惊艳了,确实挺简便), ...

前言:这是笔者第一次开发小程序,此前一直有打算自己做一个,并且能够上线使用,但一直找不到灵感,加上还需要服务器端、数据库等技能,所有一直没能实现。后来偶然看到微信小程序云开发(有点惊艳了,确实挺简便),再加上一点点想法,于是就开始了小程序云开发之旅。

第一步,要做什么东西?

鉴于自己的技术水平(捂脸),还有看到年末很多人都在分享年目标,于是便决定好做一个年目标备忘录,简单方便,且有一些意义。

第二步,思考小程序的结构

实际开发中,往往需要产品相关的思维导图、原型图等来指导开发,即使做一个小项目,我认为也需要一个?#24049;?#30340;构思,以下是小程序的思维导图:

第三步,开发阶段

以下列举主要页面

首页

首页实现的功能:

  1. 通过云函数获取当前用户的openid,并查询用户的今年目标;
  2. 查询链接附带的id,获取其他用户分享后的目标内容;

部分代码如下:

// 调用云函数
 wx.cloud.callFunction({
  name: 'login',
  data: {},
  success: res => {
    console.log('[云函数] [login] user openid: ', res.result.openid)
    app.globalData.openid = res.result.openid;
    if(!id){
      this.getData();
    }
  },
  fail: err => {
    console.error('[云函数] [login] 调用失败', err)
  }
})
 //查询数据库
 const db = wx.cloud.database();
 db.collection("targets").where({
  _openid: app.globalData.openid,
  date: new Date().getFullYear()
}).get({
  success: res => {
    let data = res.data[0] || {};

    this.setData({
      id: data._id || '',
      title: data.title || '',
      content: data.content || '',
      flag: false
    })
  }, fail: err => {
    console.log(err)
    this.setData({
      flag: false
    })
  }
})
复制代码

列表页

列表实现的功能:

  1. 展示所有该用户添加的目标;
  2. 左滑可删除,并且增加目标详情、编辑、添加入口;

部分代码如下:

//获取所有目标
const db = wx.cloud.database();
db.collection("targets").where({
  _openid: app.globalData.openid
}).get({
  success: res => {
    this.setData({
      flag: true,
      targetList: res.data, height: height
    })
    app.globalData.targetList = res.data;
  }, fail: err => {
    wx.showToast({
      icon: "none",
      title: '查询记录失败',
    })
  }
})
//响应删除
let id = e.currentTarget.id;
const db = wx.cloud.database();

db.collection("targets").doc(id).remove({
  success: res => {
    wx.showToast({
      title: '删除成功',
    })
  }, fail: err => {
    wx.showToast({
      title: '删除失败',
    })
  }
})
复制代码

添加目标

添加目标实现的功能:

  1. 通过picker组件让用户选取年份;
  2. ?#21830;?#21152;/编辑年目标标题、内容;

部分代码如下:

//新增数据
db.collection("targets").add({
  data: data,
  success: res => {
    wx.showToast({
      title: '新增成功',
    })
  }, fail: err => {
    wx.showToast({
      title: '新增失败',
      icon: 'none'
    })
  }
})
//编辑数据
db.collection("targets").doc(data.id).update({
  data: data,
  success: res => {
    wx.showToast({
      title: '修改成功',
    })
  }, fail: err => {
    wx.showToast({
      title: '修改失败',
    })
  }
})
复制代码

第四步,最终结果

小程序从开发到发布成功,只花了一周时间,不得不赞扬云开发给开发者带来的便利,并?#19968;?#26159;免费的,为了表达出开发的顺畅,我特意百度了一张图来体现

希望没有想歪哈,这是一张?#30475;?#30340;过山车图(>▽<)

因时间、技术或者环境限制,一些还没有解决的问题:

  1. 分享到朋友圈功能还没有实现,后续将实现保存当前页为图片,让用户手动分享;
  2. 使用了textarea标签给用户添加数据,有些简陋,希望小程序尽快出富文本编辑器;
  3. 虽?#36824;?#20316;中经常接触设计图,但对ui设计还是有些无感,以后尽量弥补设计上的不足;
  4. 小程序云开发数据响应有一些缓慢,据称云开发目前只部署在上海,期待后续优化;

最后附上小程序码,微信扫码即?#21830;?#39564;(或搜索我的年目标)。另外,祝?#22797;?#23478;都能开发出自己的小程序,并且在新的一年实现自己的人生目标^_^

该小程序的github地址: 我的年目标

参考文档/文章:

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 雾空 来自: 掘金
新时时彩软件