资讯专栏INFORMATION COLUMN

微信小程序云开发项目实战进阶 - 诗词大全&成语接龙

Ku_Andrew / 3387人阅读

摘要:此时,就需要通过云函数更新数据库,新建云函数编辑更新数据根据更新已打开人数使用云函数更新某数据的打开人数数据库模糊查询小程序云开发可以使用正则表达式进行模糊查询。

1. 小程序功能

古诗词大全

成语大全

成语接龙

诗词飞花令

诗词分享、收藏

诗词接龙

唐诗宋词起名字

百家姓

猜谜语

2. 小程序地址

https://github.com/caochangkui/miniprogram-project

3. 小程序预览:

5. 项目结构
.
├── README.md
├── project.config.json                              // 项目配置文件
├── cloudfunctions | 云环境                           // 存放云函数的目录
│   ├── login                                        // 用户登录云函数
│   │   ├── index.js
│   │   └── package.json
│   └── collection_get                               // 数据库查询云函数
│   │   ├── index.js
│   │   └── package.json
│   └── collection_update                               // 数据库更新云函数
│       ├── index.js
│       └── package.json
└── miniprogram
    ├── images                                        // 存放小程序图片
    ├── lib                                           // 配置文件
    ├── pages                                         // 小程序各种页面
    |   ├── index                                     // 首页
    |   └── menu                                      // 分类页
    |   └── user                                      // 用户中心
    |   └── search                                    // 搜索页
    |   └── list                                      // 列表页 搜索结果页
    |   └── detail                                    // 详情页
    |   └── collection                                // 收藏页
    |   └── find                                      // 发现页
    |   └── idiom-jielong                             // 成语接龙页
    |   └── poet                                      // 作者页
    |   └── baijiaxing                                // 百家姓
    |   └── xiehouyu                                  // 歇后语
    |   └── poet                                      // 作者页
    |   └── suggest                                   // 建议反馈
    |   └── ...                                       // 其他
    ├── style                                         // 样式文件目录
    ├── app.js                                        // 小程序入口文件
    ├── app.json                                      // 全局配置
    └── app.wxss                                      // 全局样式
6. 封装云函数操作数据库

本项目是使用的小程序云开发。云开发提供了一个 JSON 数据库,用户可以直接在云端进行数据库增删改查,但是,小程序对用户操作数据的权限进行了一定的限制(例如数据update、一次性get记录的条数限制等),所以,这里主要采用云函数来操作数据库。

查询数据、分页查询

函数根目录上右键,在右键菜单中,选择创建一个新的 Node.js 云函数,我们将该云函数命名为 collection_get。

编辑 index.js:

// 云函数入口文件
const cloud = require("wx-server-sdk")
cloud.init()

const db = cloud.database()

exports.main = async (event, context) => {

  /**
   * page: 第几页
   * num: 每页几条数据
   * condition: 查询条件,例如 { name: "李白" }
   */

  const {database, page, num, condition} = event
  console.log(event)

  try {
    return await db.collection(database)
                  .where(condition)
                  .skip(num * (page - 1))
                  .limit(num)
                  .get()
  } catch (err) {
    console.log(err)
  }
}
使用 collection_get 云函数

例如,按照查询条件{tags: "唐诗三百首"}查询诗词列表,每页num = 10条数据:

let {list, page, num} = this.data
let that = this

this.setData({
    loading: true
})

wx.cloud.callFunction({
    name: "collection_get",
    data: {
        database: "gushici",
        page,
        num,
        condition: {
            tags: "唐诗三百首"
        }
    },
    }).then(res => {
        if(!res.result.data.length) { // 没搜索到
            that.setData({
                loading: false,
                isOver: true
            })
        } else {
            let res_data = res.result.data
            list.push(...res_data)
            that.setData({
                list,
                page: page + 1, // 页面加1
                loading: false
            })
        }
    })
    .catch(console.error)
}
更新数据

注意,当我们向数据库中添加记录时,系统会自动帮我们为每条记录添加上用户的 openid 字段,但如果,数据表是自己用 json/csv 文件导入的,就不存在 openid 字段,此时,当更新这个数据表时,系统会认为你不是创建者,所以也就无法更新。

此时,就需要通过云函数更新数据库,新建云函数 collection_update, 编辑 index.js:

// 更新数据 - 根据 _id 更新已打开人数
const cloud = require("wx-server-sdk")
cloud.init()

const db = cloud.database()
const _ = db.command

exports.main = async (event, context) => {

  const { id } = event
  console.log(event)

  try {
    return await db.collection("gushici").doc(id)
      .update({
        data: {
          opened: _.inc(1)
        },
      })
  } catch (e) {
    console.error(e)
  }
}
使用 collection_update 云函数

更新某_id数据的打开人数:

let _id = e.currentTarget.dataset.id
wx.cloud.callFunction({
    name: "collection_update",
    data: {
        id: _id
    },
}).then(res => {
    console.log(res.data)
})
.catch(console.error)
7. 数据库模糊查询

小程序云开发可以使用正则表达式进行模糊查询。例如, 根据用户输入关键词,查询标题中存在改关键词的古诗词。

let database = "gushici"
let condition =  {
    name: {
        $regex:".*"+ inputValue,
        $options: "i"
    }
}

let { list, page, num } = this.data
let that = this

this.setData({
    loading: true
})

// 模糊查询
wx.cloud.callFunction({
    name: "collection_get",
    data: {
        database,
        page,
        num,
        condition
    },
}).then(res => {
    if (!res.result.data.length) { // 没搜索到
        that.setData({
            loading: false,
            isOver: true
        })
    } else {
        let res_data = res.result.data
        list.push(...res_data)
        that.setData({
            list,
            loading: false
        })
    }
})
.catch(console.error)
8. 使用 async/await 处理异步

参考文章:微信小程序中使用Async/await方法处理异步请求

9. 分享或转发功能

小程序中页面触发转发的方式有两种:

1.在小程序的右上角选择转发,需要定义函数 Page.onShareAppMessage,如果当前页面没有定义此事件,则点击后无效果。

2.通过给 button 组件设置属性 open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage 事件,如果当前页面没有定义此事件,则点击后无效果。

用户还可以在 Page.onShareAppMessage 事件中自定义转发后显示的标题、图片、路径:

onShareAppMessage(res) {
    let id = wx.getStorageSync("shareId")
    if (res.from === "button") {
        // 来自页面内转发按钮
        console.log(res.target)
    }
    return {
        title: `跟我一起挑战最长的成语接龙吧!`,
        path: `pages/find/find`,
        imageUrl: "/images/img.jpg",
    }
},
注意:转发成功/失败的 callback 已经被官方废弃,所以理论上小程序是无法得知用户是否将页面分享成功的 10. 用户授权

详情请参考文章:微信小程序之授权

11. 需要注意的几个坑 查询不到数据

数据表中明明有数据,但是 collection.get 到的却为空。解决:可以在云开发控制台中打开数据库权限设置,设置权限。

更新数据失败

collection.update 函数调用成功单返回的却是0行记录被更新,因为小程序端不允许更新没有 openid 字段的数据。解决:可以通过云函数更新数据库。

background 图片 url 不能为本地图片

解决:1:将图片上传到服务器,填写服务器上的图片路径地址。2:将图片转为 base64 编码。

往云数据库中批量导入 json 数据失败

原因:请看文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/import.html

解决:去掉json数据 {}之间的逗号, 如果最外层为 [],也必须去掉, 最终形如:

{
    "index": "作者_1",
    "type": "作者",
    "poet": "李白",
    "abstract": "李白(701年-762年),字太白,号青莲居士,唐朝浪漫主义诗人,被后人誉为“诗仙”..."
}
{
    "index": "作者_2",
    "type": "作者",
    "poet": "白居易",
    "abstract": "白居易(772年-846年),字乐天,号香山居士..."
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100874.html

相关文章

  • 持续更新免费的API,做一个API的搬运工

    摘要:为了方便广大的开发者,特此统计了网上诸多的免费,为您收集免费的接口服务,做一个的搬运工,以后会每月定时更新新的接口。将长段中文切词分开。 为了方便广大的开发者,特此统计了网上诸多的免费API,为您收集免费的接口服务,做一个api的搬运工,以后会每月定时更新新的接口。有些接口来自第三方,在第三方注册就可以成为他们的会员,免费使用他们的部分接口。 百度AccessToken:针对HTTP ...

    Shihira 评论0 收藏0
  • 前端资源系列(4)-前端学习资源分享&前端面试资源汇总

    摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...

    princekin 评论0 收藏0
  • 【沙龙报名中】与微信&开发官方团队零距离互动,揭秘爆款信小游戏背后的技术!

    摘要:在现如今的游戏市场寒冬中,拥有微信庞大的用户量以及更好兼容性的小程序游戏,优势就显得格外明显。扫描二维码即可报名您在现场将有这些体验来自腾讯云云开发团队与微信团队联合打造干货分享,内容包括微信小游戏首发经验分享。 有人说微信小程序游戏的百花齐放 活像十几年前的4399小游戏称霸互联网的景象 歪,斗地主吗,三缺二, 不用下app,小程序就能玩,我保证不抢地主让你抢! ...... ‘...

    zhonghanwen 评论0 收藏0
  • 开源 | 微信接龙程序 wechat-solita 开源

    摘要:云开发,开箱即用项目介绍一个基于微信的接龙小程序,开箱即用。修改项目名称及配置在下载代码后,开发者优先修改小程序的配置信息。开发者可以通过小程序开发工具云开发功能进行创建。 云开发,开箱即用 项目介绍 一个基于微信的接龙小程序,开箱即用。 功能说明 发起接龙 - 简单易用,分类活动及拼团两种类型,可设置报名上限 接龙报名 - 报名参加活动,拼团类活动能够自动计算金额 报名确认 - 活...

    Dean 评论0 收藏0
  • 平时积累的前端资源,持续更新中。。。

    本文收集学习过程中使用到的资源。 持续更新中…… 项目地址 https://github.com/abc-club/f... 目录 vue react react-native Weex typescript Taro nodejs 常用库 css js es6 移动端 微信公众号 小程序 webpack GraphQL 性能与监控 高质文章 趋势 动效 数据结构与算法 js core 代码规范...

    acrazing 评论0 收藏0

发表评论

0条评论

Ku_Andrew

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<