小程序教程：用云开发做一个自己的朋友圈

学习目标

• 了解和熟悉小程序开发工具使用

• 了解一个小程序的诞生过程
  

• 登录获取用户信息

• 了解云开发数据库读取、保存、删除

缓存保存和获取

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/wx.setStorageSync.html

// 保存缓存数据
wx.setStorage({
key: 'userInfo',
data: e.detail.userInfo
})


this.globalData = {
}

var _this = this;

// 从缓存获取用户信息
wx.getStorage({
key: 'userInfo',
success(res) {
console.log(res.data)
_this.globalData.userInfo = res.data

}
})

带参数的跳转链接

wxml

<view bindtap='gotos' data-id="{{item._id}}" >点击跳转</view>

js

// 跳转到详情页
gotos:function(e){
var id = e.target.dataset.id; // 获取点击元素的data-id
wx.navigateTo({
url: '../show/show?id='+id
})
}

上传图片

// 发布一条朋友圈
doUpload: function () {
    // 选择图片
    wx.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
        
        wx.showLoading({
        title: '上传中',
    })
    
    const filePath = res.tempFilePaths[0]
    // 上传图片
    const cloudPath = Date.parse(new Date()) + filePath.match(/.[^.]+?$/)[0]
    wx.cloud.uploadFile({
        cloudPath,
        filePath,
        success: res => {
            console.log('[上传文件] 成功：', res)
            
            app.globalData.fileID = res.fileID
            app.globalData.cloudPath = cloudPath
            app.globalData.imagePath = filePath
            // 图片上传成功后跳转到发布页面继续填写文字信息
            wx.navigateTo({
            url: '../add/add'
            })
        },
        fail: e => {
            wx.showToast({
                icon: 'none',
                title: '上传失败',
            })
        },
        complete: () => {
            wx.hideLoading()
            }
    })
    
    },
    fail: e => {
        console.error(e)
        }
   })
},

发布朋友圈界面

wxml

<view class="container">

<image class="image1" src="{{imagePath}}" mode="aspectFit" style='width:100%;height:300px;'></image>
<view class="cu-form-group margin-top">
<textarea placeholder="多行文本输入框" maxlength="-1" bindinput="bodys" placeholder-class='placeholder'></textarea>
</view>

<view class="padding flex flex-direction">
<button class='cu-btn bg-green margin-tb-sm lg' bindtap='save'>发送</button>
</view>
</view>

js

// 点击发送按钮后提交保存到数据库
save:function(){
    const db = wx.cloud.database()
    db.collection('content').add({
    data: {
        pic: this.data.fileID,
        userpic: app.globalData.userInfo.avatarUrl,
        username: app.globalData.userInfo.nickName,
        addtime: util.formatTime(new Date()),
        body:this.data.body
    },
    success: res => {
    // 在返回结果中会包含新创建的记录的 _id
    this.setData({
        counterId: res._id,
        count: 1
    })
    wx.showToast({
        title: '发布成功',
    })
    wx.redirectTo({
        url: '../index/index',
    })
    },
    fail: err => {
        wx.showToast({
            icon: 'none',
            title: '发布失败'
        })
        }
    })
},
bodys:function(event){
    this.setData({
        body: event.detail.value
    })
}

列表展示

wxml

<view class="item"  wx:for="{{list}}" wx:key> 
<view class='users'>
<view class="img cu-avatar radius margin-right" style="background-image:url({{item.userpic}});"></view>
<view class='info'>
<text class="name">{{item.username}}</text>
<text>{{item.addtime}}</text>
</view>
</view>
<view class="picbox">
<image class="pic"  bindtap='gotos' data-id="{{item._id}}"  src='{{item.pic}}' mode="aspectFill" style="width:100%;"></image>
<text wx:if="{{item.body}}">{{item.body}}</text>
</view>
</view>

js

var that = this;

// 从数据库获取首页列表
const db = wx.cloud.database()
db.collection('content')
.orderBy('addtime', 'desc')
.get({
success(res) {
    that.setData({
        list:res.data
    });
}
})

知识点总结

通过上面的案例我们学到下面的一些知识点

1. 小程序工具的使用和创建流程

2. 小程序云开发的数据库的查询、读取、删除、更新

3. 会员登录和获取会员信息

4. 数据缓存

5. 常用组件渲染：如跳转、循环、wx:if、事件绑定等

学习框架

• iView https://weapp.iviewui.com/

• weui  https://github.com/Tencent/weui-wxss

• Zanui https://youzan.github.io/vant-weapp

• Colorui https://www.color-ui.com/
  

作业

通过上面的学习你可以做很多功能，可以参考下面产品和自行做一个作业：

1. 微博

2. 个人日记

3. 相册

4. 租房信息平台