推荐设备MORE

微信小程序这么设计—唐山微

微信小程序这么设计—唐山微

疑难问题

PS钢笔东西怎么抠图—微信小程序云开发 # 1

日期:2021-04-13
我要分享

1. 务必先在app.js里配置云当然自然环境

//app.js
App({
 onLaunch: function () {
 if (!wx.cloud) {
 console.error('请运用 2.2.3 或以上的基本库令其用云工作中工作能力')
 } else {
 wx.cloud.init({
 env: 'xxxx',//当然自然环境id
 traceUser: true,
 this.globalData = {}
2. 导进数据信息信息内容

手工制作制作导进很蠢瓜化。大量量导进有点儿儿重要点务必注意:
云开发设计设计方案的数据信息信息内容库导进文档文件格式 (有点儿儿古怪,没有[]以及无需,隔开,导出来来也是)

3. 阿里巴巴阿里云数据库的CRUD具体实际操作 3.1 前端开发开发设计开启数据信息信息内容库进行滚屏页

写在onLoad里

// 得到默认设置设定当然自然环境的数据信息信息内容库的引进
 const db = wx.cloud.database();
 const banner = db.collection('tables');
 //es5撰写 
/* banner.get({
 success(res){console.log(res);}
 fail(err){console.log(err);}
 }) */
 //es6的撰写
 banner.get().then(res= {
 console.log(res)
 this.setData({
 banner: res.data
 }).catch(err= {
 console.log(err);

相符合的前端开发开发设计编号:

 !--miniprogram/pages/index/index.wxml-- 
 swiper indicator-dots autoplay interval="3000" duration="1000" 
 block wx:for="{{banner}}" wx:key="*this" 
 swiper-item id="{{item.id}}" 
 image src="{{item.image}}" mode="widthFix" /image 
 /swiper-item 
 /block 
 /swiper 
/* miniprogram/pages/index/index.wxss */
.swiper{
 height: 400rpx;
 width: 100%;
.swiper image{
 height: 400rpx;
 width: 100%;

3.2 删减查改 CRUD

Retrieve

this.data.db = wx.cloud.database();
this.data.banner = this.data.db.collection('tables');
this.data.banner.where({
 name: '战狼'
}).get().then(res= {
 console.log(res)
}).catch(err= console.log(err))

Create

this.data.banner.add({
 data:{
 add_time: "",
 id: 4,
 image: "baidu",
 index: 3,
 name: "赌神"
 }).then(res = {
 console.log(res)
 }).catch(err = console.log(err));

Update (For More Details link~
一部分升級

const banner = this.data.banner;
banner.doc("3a573aaa5e7daf4e00131c9558878b09").update({
 data:{
 name:'西游戏戏记'
}).then(res= {
 console.log(res);
}).catch(err = console.log(err));

拆换升級
上面的update换为set,没有赋值的字段名名会被舍弃。
[标识:內容1]

Delete

deleteData:function() {
 const banner = this.data.banner;
 banner.doc("3a573aaa5e7daf4e00131c9558878b09").remove({})
 .then(res= console.log(res))
 .catch(err= console.log(err));
3.3 报表提交
 form bindsubmit="formSubmit" 
 view 
 text 您的姓名 /text 
 input type="text" placeholder="请输入姓名" bindinput="nameInput" /input 
 /view 
 view 
 text 您的年龄 /text 
 input type="number" placeholder="请输入年龄" bindinput="ageInput" /input 
 /view 
 view 
 text 您的性別 /text 
 radio-group bindchange="genderChange" 
 radio wx:for-items="{{items}}" wx:key="*this" value="{{item.value}}" checked="{{item.checked}}" 
 text {{item.value}} /text 
 /radio 
 /radio-group 
 /view 
 button form-type="submit" type="primary" 提交 /button 
 /form 
// miniprogram/pages/index/index.js
Page({
 data: {
 items: [
 { value: '男' ,checked: true },
 { value: '女' }
 name:'',
 age:'',
 gender:'男'
 onLoad: function (options) {
 nameInput:function(e){
 this.data.name = e.detail.value;
 ageInput:function(e){
 this.data.age = e.detail.value;
 genderChange:function(e){
 this.data.gender = e.detail.value;
 formSubmit:function(e){
 const db = wx.cloud.database();
 const users = db.collection('users');
 if(!this.data.name||!this.data.age){
 wx.showModal({
 title: '提交不了功',
 content: '您的报表填十分详尽',
 showCancel: false
 return
 users.add({
 data:{
 name:this.data.name,
 age:this.data.age,
 gender:this.data.gender
 }).then(res = {
 console.log(res)
 }).catch(err = console.log(err));

Reference ke.qq/course/463358 developers.weixin.qq/miniprogram/dev/wxcloud/guide/database/getting-started.html