一、简介

最近抖音视频中一款敲木鱼的应用超级火，突发奇想如何用小程序去实现呢？接下来就一起看看如何从0到1实现一款木鱼小程序（技术菜轻喷）。

效果图：

预览：

二、基本架构

流程图

小程序框架

小程序采用uniapp，具体项目集成方式就不多介绍了。查看官方文档

云函数

云函数和云数据库采用的是阿里云，具体也不展开讲了。查看官方文档

三、代码实现

1、用户表设计

索引名称	备注
_id	唯一索引
openid	微信唯一标识
user_id	系统定义的用户ID
user_name	用户姓名
user_avatar	用户头像
clicks	用户点击次数记录

2、页面交互实现

页面样式具体就不详细展开了，相比木鱼敲击动画大家应该都能自己设计，主要是介绍几个关键点。

木鱼点击音效

//uniapp 音频播放api
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = "本地音频文件";
innerAudioContext.onPlay(() => {
    console.log("开始播放");
});

排行榜下拉刷新和上拉加载

前端采用的是 mescroll.js（uni版本）

//各种配置和事件具体看上面文档
<mescroll-uni 
ref="mescrollRef" 
@init="mescrollInit" 
@down="downCallback" 
@up="upCallback" 
:down="downOption" 
:up="upOption" >
    // 自定义组件
 </mescroll-uni>

3、云函数

用户登录和注册

用户授权后拿到用户的微信基本信息，通过code获取oppenId，更具openId判断是否为新用户区分登录和注册并返回用户信息。

'use strict';
const appid = ''
const secret = ''
//链接数据库
const db = uniCloud.database()
exports.main = async (event, context) => {
//接收客户端发送的code
    const code = event.code
    const collection = db.collection('users')
    //用前端传过来的code得到openid
    const URL = `https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${code}&grant_type=authorization_code`
    const requestOptions = {
        method: 'GET',
        dataType: 'json'
    }
    const res = await uniCloud.httpclient.request(URL,requestOptions)
    const { data: { openid } } = res
    //先查询此openid注册过没
    const userdata = await collection.where({
        openid: wxopenid,
    }).count()
    //没注册过就执行注册
    if (userdata.total == 0) {
    //注册时数据
    const params = {}
    const users = await collection.add(params)
    const userdata = await collection.where({
        openid:wxopenid,
    }).get()
    //返回当前openid的用户信息
        return userdata
    } else {
    //有的话就执行登录，并且返回当前openid用户信息
        return useronedata
    }
}

查询用户信息获取

'use strict';
const db = uniCloud.database()
const collection = db.collection('users')
exports.main = async (event, context) => {
    //event为客户端上传的参数
    if(event._id){
        const userdata = await collection.where({
            _id:event._id,
	}).get()
            //返回数据给客户端
            return userdata
	}else{
            //返回空
            return {}
	}
};

查询用户点击次数

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
    //event为客户端上传的参数
    const collection = db.collection('users')
    //客户端分页参数
    const {currentPage,pageSize} = event
    //orderBy：根据（clicks）点击次数排序
    //limit：指定查询结果集数量上限
    //skip：指定查询返回结果时从指定序列后的结果开始返回，常用于分页
    const data = await collection.orderBy('clicks','desc').skip((currentPage - 1) * pageSize).limit(pageSize).get().then(res => {
	  return res
    }).catch(err => {
	  return err
    })
    return data
};

增加点击次数

'use strict';
const db = uniCloud.database()
exports.main = async (event, context) => {
    //event为客户端上传的参数
    const dbCmd = db.command 
    const collection = db.collection('users')
    let userss = await collection.where({
        _id:event._id,
    }).update({
        //自增1
        clicks:dbCmd.inc(1)
    })
    //返回数据给客户端
    return event
};