【宝剑出鞘】第一式:综合服务站项目
迪丽瓦拉
2025-06-01 10:12:52
0

 大家好,我是csdn的博主:lqj_本人

这是我的个人博客主页:

lqj_本人的博客_CSDN博客-微信小程序,前端,python领域博主lqj_本人擅长微信小程序,前端,python,等方面的知识https://blog.csdn.net/lbcyllqj?spm=1011.2415.3001.5343哔哩哔哩欢迎关注:小淼Develop

小淼Develop的个人空间-小淼Develop个人主页-哔哩哔哩视频

本篇文章主要讲述【宝剑出鞘】wx小程序(云开发)综合服务站项目,本篇文章已经成功收录【宝剑出鞘】专栏中:

https://blog.csdn.net/lbcyllqj/category_12254851.htmlhttps://blog.csdn.net/lbcyllqj/category_12254851.html

目录

前言

项目页面演示

使用到的UI及组件

逻辑事件

A."管理员与用户的联动逻辑事件"。

wxml设计逻辑:(分为两个循环渲染体)

 js设计逻辑:(分为两个读取数据库的函数体)

两个函数体(借助云函数)getusers

管理员的查看用户信息的分类中子页面中的"已阅"选项

B."首页的计算用户分类信息百分比的逻辑算法"。

以"咨询"这一分类,为例展开讲述

js逻辑事件中"做文章"

在wxml代码中"做文章"

定义和用法

语法

返回值

抛出

作者强力推荐


前言

所谓云开发,是由传统的开发模式的基础上改良后的开发模式。是云端一体化的后端云服务 ,采用 serverless 架构,免去了移动应用构建中繁琐的服务器搭建和运维。同时云开发提供的静态托管、命令行工具(CLI)、Flutter SDK 等能力降低了应用开发的门槛。使用云开发可以构建完整的小程序/小游戏、H5、Web、移动 App 等应用。

项目页面演示

使用到的UI及组件

UI组件:介绍 - Vant Weapp (gitee.io)

时间戳(自创).js:

const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year,month,day].map(formatNumber).join('/')// +' '+[hour,minute,second].map(formatNumber).join(':')
}// const formatDate = date =>{
//     const year = date.getFullYear()
//     const month = date.getMonth() + 1
//     const day = date.getDate()//     return [year,month,day].map(formatNumber).join('-')
// }
const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n   
}
module.exports = {formatTime:formatTime,// formatDate:formatDate
}

.wxs:

var filters = {toFix: function (value) {return value.toFixed(2) // 此处2为保留两位小数,保留几位小数,这里写几    }
}module.exports = {toFix: filters.toFix,toNumber: filters.toNumber,
}

逻辑事件

A."管理员与用户的联动逻辑事件"。

“管理员已读”和“管理员未读”的显示判断条件。

wxml设计逻辑:(分为两个循环渲染体)

 js设计逻辑:(分为两个读取数据库的函数体)

两个函数体(借助云函数)getusers

// 云函数入口文件
const cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()return {event,openid: wxContext.OPENID,appid: wxContext.APPID,unionid: wxContext.UNIONID,}
}

 第一个函数体(首先调已写好的云函数)

根据获取到的openid来确定是哪一个用户的信息,并访问“content”数据库,通过云函数获取到的openid这唯一确定用户信息的字段。来获取到“content”数据库中的本用户的信息数组。并for循环渲染出来!

 第二个函数体(首先调已写好的云函数)

根据获取到的openid来确定是哪一个用户的信息,并访问“yiyuedu”数据库,通过云函数获取到的openid这唯一确定用户信息的字段。来获取到“yiyuedu”数据库中的本用户的信息数组。并for循环渲染出来!

这样根据两个不同的数据库来获取不同的数据,这就给我们“管理员区域”做出的操作传给用户的数据,留了一部分可操作空间!

管理员的查看用户信息的分类中子页面中的"已阅"选项

{item._id}}" slot="left">已阅

绑定事件逻辑(先获取“content”数据库中的用户上传的信息,然后再往“yiyuedu”数据库中添加,最后删除“content”数据库中关于本条用户id的绑定的那条用户信息。)

B."首页的计算用户分类信息百分比的逻辑算法"。

分为("未读的信息分类的百分比计算"与"已读信息分类的百分比计算")

以"咨询"这一分类,为例展开讲述

js逻辑事件中"做文章"

(首先获取"content"数据库中的分类的下标为"0"的信息,也就是本项目的"咨询"分类信息),获取此分类里面的信息数组长度(length)

W_zixun(){let that = thiswx.cloud.database().collection('content').where({newsid:'0'}).get({success(res){console.log(res.data.length)let W_zixun W_zixun= res.data.lengththat.setData({W_zixun:W_zixun})}})
},

获取"content"数据库中的所有信息的长度(不分分类下标,获取所有的信息length)

W_zonghe(){let that = thiswx.cloud.database().collection('content').get({success(res){console.log(res.data.length)let W_zongheW_zonghe = res.data.lengththat.setData({W_zonghe:W_zonghe})}})
},

在wxml代码中"做文章"

toFix函数的介绍

定义和用法

toFix() 方法可把 Number 四舍五入为指定小数位数的数字。

语法

NumberObject.toFixed(num)

返回值

返回 NumberObject 的字符串表示,不采用指数计数法,小数点后有固定的 num 位数字。如果必要,该数字会被舍入,也可以用 0 补足,以便它达到指定的长度。如果 num 大于 le+21,则该方法只调用 NumberObject.toString(),返回采用指数计数法表示的字符串。

抛出

当 num 太小或太大时抛出异常 RangeError。0 ~ 20 之间的值不会引发该异常。有些实现支持更大范围或更小范围内的值。

当调用该方法的对象不是 Number 时抛出 TypeError 异常。

                        {filters.toFix(W_zixun/W_zonghe*100)}}"pivot-text="未读"pivot-color="#7232dd"color="linear-gradient(to right, #be99ff, #7232dd)"/>{{filters.toFix(W_zixun/W_zonghe*100)}}%

 使用,"W_zixun"这一分类的length长度/"W_zonghe"总的数据length长度,再借用toFix()函数将运算出的数"四舍五入",并向上取整!

作者强力推荐

CSDN 2023年“新星计划”强势来袭!27号我在小程序赛道等你!

点击下方链接,进群,入队伍。

Top5 :CSDN实体证书,勋章,全网曝光你的优质技术博客文章!

你,离技术大佬,只差一个机会。抓住机会,走向巅峰吧!!!

https://bbs.csdn.net/topics/614177916icon-default.png?t=N176https://bbs.csdn.net/topics/614177916小程序专属赛道群

相关内容