原创：豪豪 前言 最近沉迷小程序开发，发现了一款功能、界面、体验俱佳的小程序“旅行小账本”。着手做了个简约版——“旅行小账本”。效果比较满意，毕竟前后台一人单干。 [图片] IDE 微信开发者工具 VSCode 小程序开发必然少不了微信开发者工具，再加上其对云开发的全面支持，再好不过的开发利器。但熟悉微信开发者工具的朋友们应该知道，它不支持Emmet缩写语法，并且wxml的属性值默认用单引号表示(强迫症表示很难受)。 而VSCode很好的补足了微信开发者工具的不足之处，并且支持多元化插件开发，轻量好用。 所以这里推荐采用微信开发者工具+VSCode配合开发。微信开发者工具负责调试、模拟小程序运行情况，VSCode负责代码编辑工作。二者各司其职，会使开发更加的高效、便捷。 总体架构 该项目基于小程序云开发，使用的模板是云开发快速启动模板。 由于是个全栈项目，前端使用小程序所支持的wxml + wxss + js开发模式，命名采用BEM命名规范。后台则是借助云数据库+云储存进行数据管理。 项目总体结构 [代码]|-travelbook 项目名 |-cloudfunctions 云函数模块 |-deleteItems 级联删除--云函数 |-getTime 获取时间--云函数 |-miniprogram 项目模块 |-components 自定义组件 |-accountCover 账本封面组件 |-spendDetail 支出细节组件 |-pages 页面 |-accountBooks 总账本页 |-accountCalendar 账本日历页 |-accountDetail 支出细节页 |-accountList 支出明细页 |-accountPage 选定账本页 |-editAccount 账本编辑页 |-index 首页 |-vant-weapp 有赞vant框架组件库 |-··· 系列组件... app.js 全局js app.json 全局json配置 app.wxss 全局wxss [代码] 逆向工程 在做该小程序之前，有必要进行项目的逆向工程，进一步解构每一个页面，从而深入了解这款小程序的交互细节。那么现在我假设自己为腾讯旅游的产品设计师，在绘制完界面原型后，撰写了相应的交互文档。当然解构过程中可能有些细节处理并没有那么仔细到位… 以下是我绘制的界面原型 [图片] [图片] [图片] 接下来对每个页面的细节进行解构，并完成简单的wxml结构 [图片] [代码]<!--switchList使用定位布局--> <view bindtap="switchList" class="list"></view> <!--newAccount使用flex布局--> <view class="newAccount" bindtap="createNewAccount"> <view class="desc">旅行中的每一笔开支都有独特的意义！</view> <image src="{{}}"></image> <view class="title">创建一个新账本</view> </view> [代码] [图片] [代码]<!--整体用flex + 百分比布局--> <input type="text" class="accuntName" placeholder="旅行账本名称" bindinput="getInput" /> <van-panel title="选择封面" class="panel"> <van-row class="imageBox"> <!--使用wx:for遍历数据库账本图片信息--> <van-col span="8" class="imgCol" bindtap="selectThis"> <image class="select" src="{{}}"></image> </van-col> <van-col span="8"> <view class="addBox" bindtap="useMore">更多封面</view> </van-col> </van-row> </van-panel> <button type="primary" bindtap="save">保存</button> <button type="warn" bindtap="delete">删除</button> [代码] [图片] [代码]<view class="accountDesc" bindtap="viewDetail"> <!--使用wx:for遍历数据库账本信息--> <view class="accountName"> <view>{{}}</view> <view class="accountTime">{{}}</view> </view> <!--绝对定位--> <image class="updateImg" catchtap="editAccount" src="{{}}"></image> </view> [代码] [图片] [代码]<!--switchList使用定位布局--> <view bindtap="switchList" class="list"></view> <view class="account__list-year">{{}}</view> <view class="account__list-new account__list-public" bindtap="createNewAccount"> <!--日期小圆点--> <view class="account__list-point"></view> <view class="account__list-time">{{}}</view> <image src="{{}}"></image> <view class="account__list-title">创建一个新账本</view> </view> <!--使用wx:for遍历数据库账本信息--> <view class="account__list-item account__list-public" bindtap="viewDetail"> <!--日期小圆点--> <view class="account__list-point"></view> <image src="{{}}" mode="aspectFill"></image> <view class="account__list-name">{{}}</view> <view class="account__list-time">{{}}</view> <image class="account__list-update" catchtap="editAccount" src="{{}}"></image> </view> [代码] [图片] [代码]<view class="account__spend"> <image bindtap="getCalendar" class="account__spend-calendar" src="{{}}"></image> <view class="account__spend-text"> <view class="account__spend-total">总花费(元)</view> <view class="account__spend-num">{{}}</view> </view> <image bindtap="accountAnalyze" class="account__spend-detail" src="{{}}"></image> </view> <view class="account__show-time">今天</view> <view class="account__show-detail"> <view class="account__show-income account__show-public"> <view class="account__show-title">收入(元)</view> <text class="account__show-in">+{{}}</text> </view> <view class="account__show-spend account__show-public"> <view class="account__show-title">支出(元)</view> <text class="account__show-out">-{{}}</text> </view> </view> <!--使用wx:for遍历数据库账本信息--> <view class="account__show-items-spend"> <view> <image src="{{}}"></image> </view> <text>{{}}</text> <text class="account__show-items-money">{{}}</text> </view> [代码] [图片] [代码]<!--日历使用极点日历的插件--> <!--json中做配置--> "usingComponents": { "calendar": "plugin://calendar/calendar" } <!--js改变样式--> days_style.push({ month: 'current', day: new Date().getDate(), color: 'white', background: '#e0a58e' }) <!--wxml中引用--> <calendar weeks-type="cn" cell-size="50" next="{{true}}" prev="{{true}}" show-more-days="{{true}}" calendar-style="demo6-calendar" header-style="calendar-header"board-style="calendar-board" active-type="rounded" lunar="true" header-style="header"calendar-style="calendar"days-color="{{days_style}}"> </calendar> [代码] [图片] [代码]<!--顶栏日期及收支结构--> <view class="account__title"> <text class="account__title-time">{{}}</text> <text class="account__title-spend">支出{{}}元 收入{{}}元</text> </view> <!--收支细节结构 使用flex弹性布局--> <view class="account__detail"> <image src="{{}}"></image> <view class="account__detail-name">{{}}</view> <view class="account__detail-money">{{}}</view> </view> [代码] [图片] [代码]<!--使用vant框架的van-tabs组件--> <!--并封装自定义组件复用收支页，自定义组件后面会详细说明--> <van-tabs active="{{ active }}" bind:change="onChange"> <van-tab title="支出"> <spendDetail detail="{{detail}}" accountKey="{{accountKey}}"></spendDetail> </van-tab> <van-tab title="收入"> <spendDetail detail="{{income}}" accountKey="{{accountKey}}"></spendDetail> </van-tab> </van-tabs> [代码] 云开发 在做完逆向工程的解构，页面基础结构基本搭建完成。但页面依旧是静态的，需要数据来填充。所以第二步就是数据库的设计。而小程序的云控制台恰好提供了数据的操作功能，为数据驱动提供基石。 [图片] 云数据库设计 云数据库是一种NoSQL数据库。每一张表是一个集合。值得注意的是在设计数据库时，[代码]_id[代码] 和[代码]_openid[代码]这两个字段需要带上。[代码]_id[代码]是表的主键，而[代码]_openid[代码]是用户标识，每个用户都有不同的[代码]_openid[代码]，可区分不同用户。 以下是项目中的数据表设计 [代码]cover_photos 账本封面表 用于存储创建账本时需要的封面信息 - _id - _openid - cover_index 封面索引 - cover_url 封面url - isSelected 封面是否选中 [代码] [代码]accounts 账本表 用于存储用户创建的账本 - _id - _openid - accountKey 账本唯一标识 - coverUrl 账本封面 - i 账本索引 - inputValue 账本名字 - now 账本创建时间 - spend 账本总花费 [代码] [代码]account_detail 支出类型表 用于存储消费类型 - _id - _openid - detail 类型细节 - pic_index 消费类型索引 - pic_url 未点击时的图片 - pic_url_act 点击后的图片 - type 消费类型 [代码] [代码]account_income 收入类型表 用于存储收入类型 - _id - _openid - pic_index 收入类型索引 - pic_url 未点击时的图片 - pic_url_act 点击后的图片 - type 收入类型 [代码] [代码]spend_items 消费明细表 - _id - _openid - accountKey 账本唯一标识 - address 消费地点 - desc 消费描述 - fullDate 消费时间 - money 消费金额 - pic_type 消费类型 - pic_url 消费类型图片 [代码] 云储存管理 这是个非常实用的板块。类似于<a href=“https://pan.baidu.com/”>百度云盘</a>，它提供了文件存储、上传与下载功能。 [图片] 除此之外，它还会将你所上传的资源自动进行压缩操作，并生成一个地址供你引用。该项目中的一些图片资源就是存在于此，然后在云数据库的字段中引用这些资源地址即可，十分方便，不必在本地存储，占用小程序内存。 [图片] 云函数设计 云函数简单来说就是在云后端(Node.js)运行的代码，本地看不到这些代码的执行过程，全封闭式只暴露接口供本地调用执行，本地只需等待云端代码执行完毕后返回结果。这也是面向接口编程的思想体现。 项目中的云函数设计 [图片] [代码]// getTime 获取当前时间并格式化为 yyyy-mm-dd // 云函数入口文件 const cloud = require('wx-server-sdk') // 初始化云函数 cloud.init() // 云函数入口函数 exports.main = async (event, context) => { var date = new Date() var seperator1 = "-" var year = date.getFullYear() var month = date.getMonth() + 1 var strDate = date.getDate() if (month >= 1 && month <= 9) { month = "0" + month } if (strDate >= 0 && strDate <= 9) { strDate = "0" + strDate } // 格式化当前时间 var currentdate = year + seperator1 + month + seperator1 + strDate return currentdate } [代码] [代码]// deleteItems 批量删除，云数据库的批量删除只允许在云函数中执行 // 云函数入口文件 const cloud = require('wx-server-sdk') // 初始化云函数 cloud.init() // 连接云数据库 const db = cloud.database() const _ = db.command // 云函数入口函数 exports.main = async (event, context) => { try { return await db.collection('spend_items') .where({ accountKey: event.accountKey }) .remove() } catch (e) { console.error(e) } } [代码] MVVM 界面有了，数据有了。万事俱备，只欠东风！所以下一步就是MVVM的设计。小程序本质就是基于MVVM所设计的，在MVVM的世界里，数据是灵魂，一切都由数据来驱动。 账本页显示 [图片] 账本页有两种显示的风格，左上角的按钮可以来回切换风格，下拉可刷新页面，显示accounts数据表中存储的账本信息。显示时有个小细节，需要根据创建的时间先后来显示，越晚创建的越先显示。 [代码]// 页面数据设计, 在wxml中使用{{}}符号引用数据，数据就动态显示到了页面上 data: { isList: false, // 转换页面风格的标识 true为竖向风格 false为横向风格 accounts: [], // 存储查询的账本数据 now: null, // 存储当日时间 year: null // 存储年份 } // 转换显示风格 switchList() { // 设置页面风格样式 let isList = !this.data.isList this.setData({ isList }) wx.setStorage({ key: "isList", data: isList }) } // 获取页面风格转换标识 var isList = wx.getStorageSync('isList') // 查询账本 db.collection('accounts') .get({ success: res => { this.setData({ accounts: res.data.reverse(), // 反转数组，优先显示创建早的账本 isList }) wx.hideLoading() } }) // 调用云函数接口 获取当前日期 wx.cloud.callFunction({ // 云函数接口名就是创建的云函数名字，这里是'getTime' name: 'getTime', success: (res) => { let year = res.result.split('-')[0] this.setData({ now: res.result, year }) }, fail: console.error }) [代码] 账本页增删改 [图片] 账本页通过调用相应的云数据库API，可进行一系列的增删改操作。值得一提的是，修改时需要表单回显，删除时需要级联删除。因为一个账本中有许多收支情况，spend_items表就是进行收支记录，所以删除账本时需要级联删除对应的spend_items表中的收支信息。 一些重要的逻辑 封面单选逻辑[代码]data: { images: [], // 封面数组 selectImg: null, // 选择其它封面 isSelected: {}, // 选中的图片 inputValue: '', // 账本名字 now: null, // 当前时间 account: {} // 传入账本信息 } // 单选逻辑 通过构造{'0': isSelected}来实现 selectThis(e) { let index = e.currentTarget.dataset.index let coverUrl = e.currentTarget.dataset.coverurl let is = this.data.isSelected[index] let obj = { coverUrl } // obj[index] 属性动态改变 obj[index] = !is obj.i = index this.setData({ isSelected: obj }) } [代码] 表单回显逻辑[代码]// 页面加载时先通过对应的accountKey, 得到回显信息 let { i, id, value, url, accountKey } = options photos.get({ success: res => { this.setData({ images: res.data, account: { id, value, url, i, accountKey }, isSelected: obj }) wx.hideLoading() } }) // 修改 save() { let { id } = this.data.account let { i, coverUrl, value } = this.data.isSelected // 若没修改 则为之前的value let inputValue = this.data.inputValue || value [代码] db.collection(‘accounts’) .doc(id) .update({ data: { inputValue, coverUrl, i } }) } ``` 级联删除逻辑[代码]db.collection('accounts') .doc(this.data.account.id) .remove() .then(() => { wx.hideLoading() wx.showToast({ title: '删除成功' }) setTimeout(() => { wx.reLaunch({ url: '../accountBooks/accountBooks' }) }, 400) }) // 调用deleteItems云函数, 传入对应accountKey主键, 通过云函数批量删除 wx.cloud.callFunction({ name: 'deleteItems', data: { accountKey } }) [代码] 账本页收支 [图片] 因为收入与支出页面基本类似，所以使用自定义组件封装，可以复用。 [代码]// 封装spendDetail组件 // 注册组件 properties: { detail: { type: Object }, accountKey: { type: Number }, isSpend: { type: Boolean } } // 引用组件 <van-tab title="支出"> <spendDetail detail="{{detail}}" accountKey="{{accountKey}}" isSpend="{{isSpend}}"></spendDetail> </van-tab> <van-tab title="收入"> <spendDetail detail="{{income}}" accountKey="{{accountKey}}" isSpend="{{isSpend}}"></spendDetail> </van-tab> [代码] 收入与支出类型icon选择使用两个view来存放，通过选择不同类型，跳转不同的icon [代码]// js data: { address: '', money: 0, desc: '', selectPicIndex: 0, selectIndex: 0 } // 选择消费类别 selectSpend(e) { let { index } = e.currentTarget.dataset let { selectPicIndex } = this.data selectPicIndex = index this.setData({ selectPicIndex }) }, // 选择消费类别中的细节 selectSpendDetail(e) { let { index } = e.currentTarget.dataset let { selectIndex } = this.data selectIndex = index this.setData({ selectIndex }) } // wxml // 消费类型 <view class="expense"> <block wx:for="{{detail}}" wx:key="index"> <view class="expense__type" bindtap="selectSpend" data-index="{{index}}"> <block wx:if="{{selectPicIndex == item.pic_index}}"> <view class="expense__type-icon" style="background-color: #e64343"> <image src="{{item.pic_url_act}}"></image> </view> </block> <block wx:else> <view class="expense__type-icon"> <image src="{{item.pic_url}}"></image> </view> </block> <view class="expense__type-name">{{item.type}}</view> </view> </block> </view> // 消费子类型 <view class="detail"> <block wx:for="{{detail[selectPicIndex].detail}}" wx:key="index"> <view class="detail__type" bindtap="selectSpendDetail" data-index="{{index}}"> <image class="detail__type-icon" src="{{item.detail_url}}"></image> <block wx:if="{{selectIndex == item.detail_index}}"> <view class="detail__type-name" style="color: #f86319; border-bottom: 1rpx solid #f86319;"> {{item.detail_type}} </view> </block> <block wx:else> <view class="detail__type-name" style="border-bottom: 1rpx solid #e4e2e2;"> {{item.detail_type}} </view> </block> </view> </block> </view> [代码] 账本页明细 [图片] 因为收支明细中需要显示每一天的消费信息，所以需要将数据表中的数据通过时间来分类，分成若干个数组，页面从而使用wx:for来遍历这些数组。在显示之前，首先需要判断有无收支信息。 [代码]// 通过时间分类算法 {} => [ [{时间1}], [{时间2}], [{时间3}] ] arr.forEach(item => { if (!_this.isExist(item.fullDate, dateArr)) { dateArr.push([item]) } else { dateArr.forEach(res => { if (res[0].fullDate == item.fullDate) { res.push(item) } }) } }) // 使用map 方法构造 [{}, {}, {}, ...] 类型数组 dateArr = dateArr.map((item) => { let spend = 0 let income = 0 item.forEach(res => { if (res.money > 0) { spend += res.money } else { income += (-res.money) } }) return { item, spend, income } }) // 判断自身是否存在数组中 isExist(item, arr) { for (let i = 0; i < arr.length; i++) { if (item == arr[i][0].fullDate) return true } return false } [代码] 以上是小程序中比较复杂的逻辑实现。 运用云开发，开发一份专属自己的旅行小账本吧~

原创：龙衣 前言 虽然不会后台开发，但是也想自己做项目，正好云开发出现了。开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力。 社区作为一个交流的平台，可以通过发布自己、别人喜欢的文字、图片的方式进行交流分享。 刚学完云开发，正好可以用社区小程序项目练练手~ 【社区小程序】功能实现 首页【广场】 ●显示用户发布的内容 ●管理员发布的一些教程 消息【发布】 ●发布图文 ●水平图片的滑动显示 个人中心【我的】 ●显示用户的登录信息 ●用户的收藏列表 ●发布历史 ●邀请好友 ●产品意见 [图片] 一、首页【广场】 显示用户发布的内容 管理员发布的一些教程 实现的效果 [图片] 实现要点 1.WXML 不同类别数据的显示 通过 if-elif-else 实现，在wxml文件中通过 <block></block>渲染，因为它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。也就是说可以通过属性来控制页面是否要渲染这部分的内容，可以减少页面渲染时间。 2.云开发数据的获取 先开通云开发功能 ，参考官方文档，然后在创建项目的时候勾选上 使用云开发模板（看个人吧，我直接使用后点击项目中的 login）就可以获取到用户的 [代码]oppenid[代码]，之后就可以使用云数据库了。 [图片] 云开发登录： [图片] 云数据的获取： [代码]/** * 生命周期函数--监听页面加载 */ onLoad: function(options) { console.log('onload'); this.getData(this.data.page); }, /** * 获取列表数据 * */ getData: function(page) { var that = this; console.log("page--->" + page); const db = wx.cloud.database(); // 获取总数 db.collection('topic').count({ success: function(res) { that.data.totalCount = res.total; } }) // 获取前十条 try { db.collection('topic') .where({ _openid: 'oSly***********vU1KwZE', // 填入当前用户 openid }) .limit(that.data.pageSize) // 限制返回数量为 10 条 .orderBy('date', 'desc') .get({ success: function(res) { // res.data 是包含以上定义的两条记录的数组 // console.log(res.data) that.data.topics = res.data; that.setData({ topics: that.data.topics, }) wx.hideNavigationBarLoading();//隐藏加载 wx.stopPullDownRefresh(); }, fail: function(event) { wx.hideNavigationBarLoading();//隐藏加载 wx.stopPullDownRefresh(); } }) } catch (e) { wx.hideNavigationBarLoading();//隐藏加载 wx.stopPullDownRefresh(); console.error(e); } }, [代码] 云数据的添加： [代码]/** * 保存到发布集合中 */ saveDataToServer: function(event) { var that = this; const db = wx.cloud.database(); const topic = db.collection('topic') db.collection('topic').add({ // data 字段表示需新增的 JSON 数据 data: { content: that.data.content, date: new Date(), images: that.data.images, user: that.data.user, isLike: that.data.isLike, }, success: function(res) { // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id // 清空，然后重定向到首页 console.log("success---->" + res) // 保存到发布历史 that.saveToHistoryServer(); // 清空数据 that.data.content = ""; that.data.images = []; that.setData({ textContent: '', images: [], }) that.showTipAndSwitchTab(); }, complete: function(res) { console.log("complete---->" + res) } }) }, [代码] 3.数据列表的分页 主要就是定义一个临时数组存放加载上来的数据，然后通过传递给对象，最后传递到布局中去。 [代码]/** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { var that = this; var temp = []; // 获取后面十条 if(this.data.topics.length < this.data.totalCount){ try { const db = wx.cloud.database(); db.collection('topic') .skip(5) .limit(that.data.pageSize) // 限制返回数量为 5 条 .orderBy('date', 'desc') // 排序 .get({ success: function (res) { // res.data 是包含以上定义的两条记录的数组 if (res.data.length > 0) { for(var i=0; i < res.data.length; i++){ var tempTopic = res.data[i]; console.log(tempTopic); temp.push(tempTopic); } var totalTopic = {}; totalTopic = that.data.topics.concat(temp); console.log(totalTopic); that.setData({ topics: totalTopic, }) } else { wx.showToast({ title: '没有更多数据了', }) } }, fail: function (event) { console.log("======" + event); } }) } catch (e) { console.error(e); } }else{ wx.showToast({ title: '没有更多数据了', }) } }, [代码] 二、消息【发布】 发布图文 水平图片的滑动显示（效果不是很好，可以改为九宫格实现） 发布页面效果如下： [图片] 分析如何实现 导航栏的实现很简单就不说了，可参考我之前的文章 重点是中间的 ② 是内容区域 区域三是功能操作区 内容区域的实现 第一个是文本区域 第二个是水平的图片展示区域 在图片的右上角有关闭按钮，这里使用的是icon组件。 主要的实现代码如下： [代码]<view class="content"> <form bindsubmit="formSubmit"> <view class="text-content"> <view class='text-area'> <textarea name="input-content" type="text" placeholder="说点什么吧~" placeholder-class="holder" value="{{textContent}}" bindblur='getTextAreaContent'></textarea> </view> </view> <scroll-view class="image-group" scroll-x="true"> <block wx:for='{{images}}' wx:for-index='idx'> <view> <image src='{{images[idx]}}' mode='aspectFill' bindtap="previewImg"></image> <icon type='clear' bindtap='removeImg' data-index="{{idx}}" ></icon> </view> </block> </scroll-view> <view class='btn-func'> <button class="btn-img" bindtap='chooseImage'>选择图片</button> <button class="btn" formType='submit' open-type="getUserInfo">发布圈圈</button> <!-- <image hidden=''></image> --> </view> </form> </view> [代码] 布局样式如下： [代码].content { height: 100%; width: 100%; } textarea { width: 700rpx; padding: 25rpx 0; } .text-content { background-color: #f3efef; padding: 0 25rpx; } .image-group { display: flex; white-space: nowrap; margin-top: 30px; } .image-group view{ display: inline-block; flex-direction: row; width: 375rpx; height: 375rpx; margin-right: 20rpx; margin-left: 20rpx; background-color: #cfcccc; } .image-group view image{ width: 100%; height: 100%; align-items: center; } .image-group view icon{ display: inline-block; vertical-align: top; position: absolute } .btn-func { display: flex; flex-direction: column; width: 100%; position: absolute; bottom: 0; margin: 0 auto; align-items: center; } .btn-img { width: 220px; height: 45px; line-height: 45px; margin-top: 20px; margin-bottom: 20px; background-color: rgb(113, 98, 250); color: #fff; border-radius: 50px; } .btn { width: 220px; height: 45px; line-height: 45px; background-color: #d50310; color: #fff; border-radius: 50px; margin-bottom: 20px; } [代码] 页面布局之后就该从 js中去处理数据了，在js中主要实现的功能有： 文本内容的获取 图片的选择 图片的阅览 图片的删除 将结果发布到云数据库中 1.文本内容的获取 [代码] /** * 获取填写的内容 */ getTextAreaContent: function(event) { this.data.content = event.detail.value; }, [代码] 2.图片的选择 [代码] /** * 选择图片 */ chooseImage: function(event) { var that = this; wx.chooseImage({ count: 6, success: function(res) { // tempFilePath可以作为img标签的src属性显示图片 const tempFilePaths = res.tempFilePaths for (var i in tempFilePaths) { that.data.images = that.data.images.concat(tempFilePaths[i]) } // 设置图片 that.setData({ images: that.data.images, }) }, }) }, [代码] 3.图片的预览 [代码] // 预览图片 previewImg: function(e) { //获取当前图片的下标 var index = e.currentTarget.dataset.index; wx.previewImage({ //当前显示图片 current: this.data.images[index], //所有图片 urls: this.data.images }) }, [代码] 4.图片的删除 [代码]/** * 删除图片 */ removeImg: function(event) { var position = event.currentTarget.dataset.index; this.data.images.splice(position, 1); // 渲染图片 this.setData({ images: this.data.images, }) }, [代码] 5.发布内容到数据库中 数据发布到数据中，需要先开启云开发，然后在数据库中创建集合也就是表之后就是调用数据库的增删改查API即可。 [代码] /** * 添加到发布集合中 */ saveToHistoryServer: function(event) { var that = this; const db = wx.cloud.database(); db.collection('history').add({ // data 字段表示需新增的 JSON 数据 data: { content: that.data.content, date: new Date(), images: that.data.images, user: that.data.user, isLike: that.data.isLike, }, success: function(res) { // res 是一个对象，其中有 _id 字段标记刚创建的记录的 id console.log(res) }, fail: console.error }) }, [代码] 三、个人中心【我的】 【显示用户的登录信息】主要就是调用小程序接口，获取用户的微信公开信息进行展示 【用户的收藏列表】获取数据库中的收藏列表进行展示 【发布历史】在发布页面，当发布成功将数据存到发布历史表中，需要的时候获取该表的数据进行展示 【邀请好友】调用小程序的分享接口，直接分享给微信群，或者个人 【产品意见】一个类似于发布页的页面，实现思路和发布页实现是一样的。 实现的效果 [图片] 实现分析 1.要实现的效果 在用户进入个人中心，直接弹出获取用户信息弹窗 显示圆形的用户头像 2.授权弹窗 官方获取用户信息文档调整 为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。 也就是以前的 wx.getUserInfo不直接弹出授权窗口了，而且在新版中调用会直接返回fail，现在的做法呢就是通过点击一个button 去实现用户授权功能。 文档中说明了有两种方式能够获取用户信息。 一个是利用 [代码]<open-data>[代码]获取公开的用户信息： [代码]<open-data type="userNickName" lang="zh_CN"></open-data> <open-data type="userAvatarUrl"></open-data> <open-data type="userGender" lang="zh_CN"></open-data> [代码] 另一个是利用button组件将 open-type 指定为 getUserInfo类型： [代码] <!-- 需要使用 button 来授权登录 --> <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button> <view wx:else>请升级微信版本</view> Page({ data: { canIUse: wx.canIUse('button.open-type.getUserInfo') }, onLoad: function() { // 查看是否授权 wx.getSetting({ success (res){ if (res.authSetting['scope.userInfo']) { // 已经授权，可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success: function(res) { console.log(res.userInfo) } }) } } }) }, bindGetUserInfo (e) { // 获取到用户信息 console.log(e.detail.userInfo) } }) [代码] 3.<open-data>中实现圆形头像 [代码]<view class='amountBg'> <view class='img'> <open-data type="userAvatarUrl"></open-data> </view> <view class='account'> <view class='nick-name'> <open-data type="userNickName" lang="zh_CN"></open-data> </view> <view class='address'> <open-data type="userCountry" lang="zh_CN"></open-data>· <open-data type="userProvince" lang="zh_CN"></open-data>· <open-data type="userCity" lang="zh_CN"></open-data> </view> </view> </view> [代码] css 样式如下： [代码].amountBg { display: flex; flex-direction: row; height: 100px; background-color: #5495e6; align-items: center; } .img { overflow: hidden; display: block; margin-left: 20px; width: 49px; height: 49px; border-radius: 50%; } .account { width: 70%; color: #fff; margin-left: 10px; align-items: center; } .nick-name{ font-family: 'Mcrosoft Yahei'; font-size: 16px; } .address{ font-size: 13px; } .nav { width: 15px; color: #fff; } [代码] 可能存在的一些问题 其他用户发布的内容，有时候显示不出来？ 将数据库的权限设置为全部人可见。 发布内容之后返回首页没有自动刷新？ 在广场首页 onShow 的时候获取数据库的数据进行展示。 clone 源码后运行不起来？ 需要在自己的云数据库中创建对应的表。