demo使用雲開發,添加輸入數據，在雲服務中插入雲控制檯中的數據庫，查詢返回給小程序列表顯示

進來看的伸伸手點個贊哦

wxml中

<view class="container">
  <view class="photo-center" flex-item>
    <image class="poster" src="{{imagePath}}" bindtap="uploadImage" />
  </view>
  <view class="item-name">
    <view class="item-content">
      <text>姓名</text>
      <input class="name-input" placeholder="請輸入姓名" type="text" bindinput="getInputName" />
    </view>
  </view>
  <view class="user-profile">
    <text>簡介： </text>
    <input class="profile-input" placeholder="請輸入簡介" type="text" bindinput="getInputProfile"/>
  </view>
  <button class="commit">提交</button>
</view>

樣式我就不貼出來了，也就是html中的style，講重點，不然文章有點太長了。

下面直接重點接口上傳信息，插入雲控制檯數據庫，

我們在雲控制檯中的數據庫中需要新建一個集合我這裏命名UserAccountList這個下面會用到

雲開發中cloudfunctions裏面新建Node.js，我命名register，小程序中調用這個接口需要用到這個名稱

// 雲函數入口文件

const cloud = require('wx-server-sdk')

//初始化

cloud.init({

// API 調用都保持和雲函數當前所在環境一致

env: cloud.DYNAMIC_CURRENT_ENV

})

const db = cloud.database()

// 雲函數入口函數

exports.main = async(event, context) => {

console.log('cloundinsertevent', event)

await db.collection('UserAccountList').add({
      // data 字段表示需新增的 JSON 數據
      data: {
        // event,
        appId:event.appId,
        openId:event.openId,
        title: event.name,
        profile: event.profile,
        images: {
          small: event.imagePath
        },
        time: Date.now(),
      }
    })
return {
      flag:1
    }

小程序中調用

 wx.cloud.callFunction({
      name: 'register',//雲函數名
      data: {//傳參
        name: this.data.name,
        profile: this.data.profile,
        imagePath:this.data.imagePath,
        openid: wx.openid,
        appid: wx.appid,
        unionid: wx.unionid,//無效
      },
      complete: res => {
        // console.log('callFunction register complete result: ', res)
      },
      success: res => {

        //返回上一級關閉當前頁面
        wx.navigateBack({
          delta: 1
        })

提交後你會看到雲控制檯中數據庫以後數據。

我們再寫個雲函數用來查數據庫中的插入的數據集合

同樣以上流程

在雲函數listinfo入口函數中return await db.collection('UserAccountList').get()，

在列表中同樣使用

wx.cloud.callFunction({

name: 'listinfo',//雲函數名

success: res => {

console.log('list:',res.result)

這樣就完成了前後段的一整個操作流程。

喜歡的點個贊哦