はじめに
事前条件
- 新しいプロジェクトを作成する際には、クラウドサービスを有効にするチェックボックスに必ずチェックを入れてください。
注意事項
データベースAPIはアプレットサイドとサーバーサイドの2つに分かれており、アプレットサイドAPIは厳密な呼び出し権限制御が可能で、開発者はアプレット内のAPIを直接呼び出して非機密データを操作することができます。より高度なセキュリティが要求されるデータについては、クラウド機能内のサーバー側APIを介して操作することができます。環境のクラウド機能は、クライアントから完全に分離され、クラウド機能では、データベースのプライベートで安全な操作することができます。
簡単に：
実例
以下はソースコードです。
demo.wxml
<!--index.wxml-->
<view class="container">
<!-- ユーザーopenid>
<view class="userinfo">
<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" style="background-image: url({{avatarUrl}})" size="default"></button>
<view class="userinfo-nickname-wrapper">
<button class="userinfo-nickname" bindtap="onGetOpenid">クリックしてopenidを取得する</button>
</view>
</view>
<!-- データを追加する>
<view class="uploader">
<view bindtap="addData" class="uploader-text">
<text>データを追加する</text>
</view>
<view class="page-body">
<form catchsubmit="formSubmit" catchreset="formReset" hidden="{{isFormHidden}}">
<!--
<view class="page-section page-section-gap">
<view class="page-section-title">switch</view>
<switch name="switch" />
</view> -->
<!-- <view class="section">
<view class="section__title"> </view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
: {{array[index]}}
</view>
</picker>
</view> -->
<!--
<view class="page-section page-section-gap">
<view class="page-section-title">radio</view>
<radio-group name="radio">
<label>
<radio value="radio1" /> </label>
<label>
<radio value="radio2" /> </label>
</radio-group>
</view> -->
<!--
<view class="page-section page-section-gap">
<view class="page-section-title">checkbox</view>
<checkbox-group name="checkbox">
<label>
<checkbox value="checkbox1" /> </label>
<label>
<checkbox value="checkbox2" /> </label>
</checkbox-group>
</view> -->
<!-- スライド選択
<view class="page-section page-section-gap">
<view class="page-section-title">slider</view>
<slider value="50" name="slider" show-value></slider>
</view> -->
<!-- 入力ボックス -->
<view class="page-section">
<view class="page-section-title">
<input class="weui-input" name="userName" placeholder="ユーザー名" / "を入力する>
</view>
</view>
<!-- 入力ボックス -->
<view class="page-section">
<view class="page-section-title">
<input class="weui-input" name="itCard" placeholder="ニックネームを入力してください。>
</view>
</view>
<!-- 入力ボックス -->
<view class="page-section">
<view class="page-section-title">
<input class="weui-input" name="phone" placeholder="電話番号を入力してください。>
</view>
</view>
<!-- 入力ボックス -->
<view class="page-section">
<view class="page-section-title">
<input class="weui-input" name="email" placeholder="メールアドレスを入力してください" />
</view>
</view>
<!-- コミット -->
<view class="btn-area">
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> </button>
<button style="margin: 30rpx 0" type="primary" formType="submit">Submit</button>
<button style="margin: 30rpx 0" formType="reset">Reset</button>
</view>
</form>
</view>
</view>
<!-- データを見る>
<view class="uploader">
<view bindtap="seeData" class="uploader-text">
<text>データを見る</text>
</view>
<view class="uploader-text" wx:for="{{user}}" wx:key="key">
<text>{{item.userName}}</text>
</view>
</view>
<!-- データを修正する>
<view class="uploader">
<view bindtap="updata" class="uploader-text">
<text>データを修正する</text>
</view>
<view class="page-body">
<form catchsubmit="updatasubmit" catchreset="updatareset" hidden="{{isupdataform}}">
<view class="btn-area">
<input name="userName" placeholder="名前を再入力する "></input>
</view>
<view class="btn-area">
<button style="margin:30rpx 0" type="primary" formType="submit"> </button>
<button style="margin:30rpx 0" type="warn" formType="reset"> </button>
</view>
</form>
</view>
</view>
<!-- データを削除する>
<view class="uploader">
<view bindtap="deleteData" class="uploader-text">
<text>最新のデータを削除する</text>
</view>
<view class="uploader-text" wx:for="{{users}}" wx:key="key">
<text>{{item.userName}}</text>
</view>
</view>
</view>
demo.js
//index.js
const app = getApp()
//データベース環境への参照を取得する
const db = wx.cloud.database({
env: "あなた自身のデータベース環境を入力するか、入力しない、デフォルトの現在の環境を見つける"
})
//データベース内のコレクションをリンクする
const pave = db.collection("PavmentRecord")
const user = db.collection("user")
// util.js
//日付を y-m-d h m s でフォーマットする
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute].map(formatNumber).join(':') //年、月、日、時、分、秒を返す。
}
//intを文字列に変換する
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
Page({
data: {
avatarUrl: '../../images/user-unlogin.png',
userInfo: {},
logged: false,
takeSession: false,
requestResult: '',
isFormHidden: true,
isupdataform: true,
users: {},
array: ['男性」、「女性],
cloud: ''
},
onShareAppMessage() {
return {
title: 'picker-view',
path: 'page/component/pages/picker-view/picker-view'
}
},
onLoad: function () {
if (!wx.cloud) {
wx.redirectTo({
url: '../chooseLib/chooseLib',
})
return
}
var that = this
// ユーザー情報を取得する
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// すでに認証されていれば、getUserInfoを直接呼び出して、ポップアップなしでアバターのニックネームを取得できる。
wx.getUserInfo({
success: res => {
that.setData({
avatarUrl: res.userInfo.avatarUrl,
userInfo: res.userInfo
})
}
})
}
}
})
},
bindPickerChange: function (e) {
console.log('picker値', e.detail.value)
this.setData({
index: e.detail.value
})
},
onGetUserInfo: function (e) {
if (!this.data.logged && e.detail.userInfo) {
this.setData({
logged: true,
avatarUrl: e.detail.userInfo.avatarUrl,
userInfo: e.detail.userInfo
})
}
},
onGetOpenid: function () {
// クラウド関数を呼び出す
wx.cloud.callFunction({
name: 'login',
data: {},
success: res => {
console.log('[ ] [login] user openid: ', res.result.openid)
app.globalData.openid = res.result.openid
wx.navigateTo({
url: '../userConsole/userConsole',
})
},
fail: err => {
console.error('[ ] [login] 失敗を呼び出す, err)
wx.navigateTo({
url: '../deployFunctions/deployFunctions',
})
}
})
},
//データを追加する
addData: function () {
this.setData({
isFormHidden: false
})
},
getPhoneNumber: function (e) {
console.log(e)
},
//送信フォーム
formSubmit(e) {
const ur = e.detail.value;
console.log("次の情報をフォームに入力して送信する： ")
console.lot(ur)
var date = formatTime(new Date());
console.log(date)
pave.add({
data: {
userName: 'test',
userPhone: '15239942334',
diseaseName: "test",
symCom: "test",
recordTime: date,
payMoney: 100.0
},
}).then(res => {
console.log(res)
}).catch(function (e) {
console.log(e)
})
},
//フォームをリセットする
formReset(e) {
console.log('formリセット・イベントが発生し、', e.detail.value)
this.setData({
chosen: ''
})
},
//データを見る
seeData(e) {
user.get().then(
res => {
console.log(res.data)
this.setData({
user: res.data
})
}
)
},
//データを修正する
updata(e) {
this.setData({
isupdataform: false
})
},
updatasubmit(e) {
//userコレクションにあるidから次のデータの値を探す。
user.where({
"_id": 'dc277a235f081fc20009534043d370cc'
}).set({
data: {
"userName": e.data.userName
},
success: function (res) {
console.log("更新に成功した： " + res)
}
})
},
updatareset(e) {
this.setData({
chosen: ''
})
},
deleteData(e) {
var that
wx.cloud.callFunction({
name: 'deleteData',
data: {
object: 'user',
id: 'a7d38b365f0852c2000c0a3b0b7aae7a'
}
}).then(res => {
console.log(res)
that = res.data
})
}
})
demo.wxss
/**index.wxss**/
page {
background: #f6f6f6;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.userinfo, .uploader, .tunnel {
margin-top: 40rpx;
height: 140rpx;
width: 100%;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.1);
border-left: none;
border-right: none;
display: flex;
flex-direction: row;
align-items: center;
transition: all 300ms ease;
}
.userinfo {
padding-left: 120rpx;
}
.userinfo-avatar {
width: 100rpx;
height: 100rpx;
margin: 20rpx;
border-radius: 50%;
background-size: cover;
background-color: white;
}
.userinfo-avatar[size] {
width: 100rpx;
}
.userinfo-avatar:after {
border: none;
}
.userinfo-nickname {
font-size: 32rpx;
color: #007aff;
background-color: white;
background-size: cover;
text-align: left;
padding-left: 0;
margin-left: 10px;
}
.userinfo-nickname::after {
border: none;
}
.userinfo-nickname-wrapper {
flex: 1;
}
.uploader, .tunnel {
height: auto;
padding: 0 0 0 40rpx;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
}
.uploader-text, .tunnel-text {
width: 100%;
line-height: 52px;
font-size: 34rpx;
color: #007aff;
}
.uploader-container {
width: 100%;
height: 400rpx;
padding: 20rpx 20rpx 20rpx 0;
display: flex;
align-content: center;
justify-content: center;
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.uploader-image {
width: 100%;
height: 360rpx;
}
.tunnel {
padding: 0 0 0 40rpx;
}
.tunnel-text {
position: relative;
color: #222;
display: flex;
flex-direction: row;
align-content: center;
justify-content: space-between;
box-sizing: border-box;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.tunnel-text:first-child {
border-top: none;
}
.tunnel-switch {
position: absolute;
right: 20rpx;
top: -2rpx;
}
.disable {
color: #888;
}
.service {
position: fixed;
right: 40rpx;
bottom: 40rpx;
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background: linear-gradient(#007aff, #0063ce);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
display: flex;
align-content: center;
justify-content: center;
transition: all 300ms ease;
}
.service-button {
position: absolute;
top: 40rpx;
}
.service:active {
box-shadow: none;
}
.request-text {
padding: 20rpx 0;
font-size: 24rpx;
line-height: 36rpx;
word-break: break-all;
}
demo.json
{
"usingComponents": {},
"navigationBarTitleText":"データ操作"
}
