小程序编程记要(一)

https://mp.weixin.qq.com/wxamp/home

  • 小程序框架参考文档
  • 小程序组件参考文档
  • 小程序 API 参考文档
  • 小程序服务端 API 参考文档
  •  

小程序编程记要(一)_第1张图片

开发工具下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

然后今天我学习的是WebUI 开始。

小程序编程记要(一)_第2张图片

安装完后扫描,我的版本是1907300,然后确认登录,就开始小程序设计了。提示,选择小程序,填写申请的AppID,选云开发,后续会给云空间和数据库。小程序是单独的开发场景。

小程序编程记要(一)_第3张图片

自动为我生成的示例。

小程序编程记要(一)_第4张图片

那好,今天可能要看2个教材,一个是示例文件,一个是UI。

小程序编程记要(一)_第5张图片

小程序编程记要(一)_第6张图片

小程序编程记要(一)_第7张图片

小程序编程记要(一)_第8张图片

小程序编程记要(一)_第9张图片

 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)
      }
    })
  },

小程序编程记要(一)_第10张图片

作者简介:

小程序编程记要(一)_第11张图片

你可能感兴趣的:(wx)