微信小程序开发界面输入的有文本还有拍摄的照片怎么建立云数据库进行数据与图片的保存分别写出jsjsonwxsswxml文档对应的代码

在微信小程序中，可以使用云开发来建立云数据库，并进行数据和图片的保存。下面是对应的代码示例。

1. 在js文件中，引入云开发的初始化和数据库模块，并初始化云开发环境。

// index.js

// 引入云开发初始化
const app = getApp()
wx.cloud.init()

// 引入云数据库
const db = wx.cloud.database()

Page({
  data: {
    inputValue: ''
  },

  // 监听输入框输入事件
  bindInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

  // 保存数据到云数据库
  saveData: function () {
    db.collection('data').add({
      data: {
        text: this.data.inputValue
      },
      success: function (res) {
        console.log('保存成功', res)
      },
      fail: function (err) {
        console.error('保存失败', err)
      }
    })
  },

  // 上传图片到云存储
  uploadImage: function () {
    wx.chooseImage({
      success: function (res) {
        const filePath = res.tempFilePaths[0]
        const cloudPath = 'images/' + Date.now() + filePath.match(/\.[^.]+?$/)[0]

        wx.cloud.uploadFile({
          cloudPath,
          filePath,
          success: function (res) {
            console.log('上传成功', res.fileID)
          },
          fail: function (err) {
            console.error('上传失败', err)
          }
        })
      }
    })
  }
})

2. 在json文件中，配置云开发环境和需要使用的云函数。

{
  "pages": [
    "pages/index/index"
  ],
  "cloud": true,
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

3. 在wxml文件中，定义输入框和按钮，并绑定对应的事件。

<!-- index.wxml -->

<view class="container">
  <input class="input" bindinput="bindInput" placeholder="请输入文本" />
  <button class="button" bindtap="saveData">保存数据</button>
  <button class="button" bindtap="uploadImage">上传图片</button>
</view>

4. 在wxss文件中，设置页面样式。

/* index.wxss */

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
}

.input {
  width: 500rpx;
  height: 80rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  padding: 10rpx;
}

.button {
  width: 200rpx;
  height: 80rpx;
  background-color: #007aff;
  color: #fff;
  border-radius: 5rpx;
  margin-bottom: 20rpx;
  line-height: 80rpx;
  text-align: center;
}

以上就是使用云开发建立云数据库并保存数据和图片的示例代码。根据实际需求，你可能需要在js文件中添加更多的逻辑处理