微信小程序项目实战 - 菜谱大全
1. 小程序功能
- 古诗词大全
- 成语大全
- 成语接龙
- 诗词飞花令
- 诗词分享、收藏
- 诗词接龙
- 唐诗宋词起名字
- 百家姓
- 猜谜语
2. 小程序地址
https://github.com/caochangkui/miniprogram-project
3. 小程序预览:
4. 部分截图
首页
列表页
详情页 分享页
唐诗宋词
成语接龙
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年),字乐天,号香山居士..."
}
微信小程序项目实战 - 菜谱大全的更多相关文章
- 微信小程序项目实战之天气预报
概述 微信小程序项目实战之天气预报 详细 代码下载:http://www.demodashi.com/demo/10634.html 一.准备工作 1.注册微信小程序 2.注册和风天气账号 3.注册百 ...
- 微信小程序项目实战之豆瓣天气
概述 微信小程序项目实战之豆瓣天气 详细 代码下载:http://www.demodashi.com/demo/10943.html 一.准备工作 1.注册微信小程序 2.在小程序设置中设置reque ...
- 微信小程序 项目实战(一)生命周期 配置服务器信息 splash启动页
步骤一:小程序 生命周期 //app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: fun ...
- 微信小程序 项目实战(二)board 首页
1.项目结构 2.页面 (1)数据(逻辑) board.js // pages/board/board.js Page({ /** * 页面的初始数据 */ data: { imgWrap: [] } ...
- 微信小程序 项目实战(三)list 列表页 及 item 详情页
1.项目结构 2.list 列表页 (1)数据(逻辑) list.js // pages/list/list.js Page({ /** * 页面的初始数据 */ data: { title: '加载 ...
- 《微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记1)WePY开发环境的安装
WePY的安装或更新都通过npm进行,全局安装或更新WePY命令行工具,使用以下命令: npm install wepy-cli -g 稍等片刻,成功安装后,即可创建WePY项目. 注意:如果npm安 ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- 微信小程序实例源码大全
微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...
随机推荐
- Windows系统java下载与安装
Windows系统java下载与安装 一.前言 作者:深圳-风尘 联系方式:QQ群[585499566] 博客:https://www.cnblogs.com/1fengchen1/ 能读懂本文档人: ...
- [Python][小知识][NO.4] wxPython 字体选择对话框(O.O 不知道放到那里就放到这个分类的)
1.前言 O.O 前两天回家浪了两天,断更了 哎~~~ o.o 有时候,有木有想改标签或编辑框中内容的字体呀?(o.o 反正我是没有). wxpython也可以说是所在的操作系统,有字体选择器,给我们 ...
- [Python] wxPython 基本控件 (转)
转自:http://www.cnblogs.com/wangjian8888/p/6028777.html 一.静态文本控件 wx.StaticText(parent, id, label, pos= ...
- Key Lookup开销过大导致聚集索引扫描
以前总结过一篇文章SQL SERVER中什么情况会导致索引查找变成索引扫描 介绍了几种索引查找(Index Seek)变成索引扫描(Index Scan)的情形.昨天写一篇文章的时候,也遇到了一个让人 ...
- Java 关键字 速查表
访问控制:private 私有的protected 受保护的public 公共的 类.方法和变量修饰符abstract 声明抽象class 类extends 扩允,继承final 终极,不可改变的im ...
- 洗礼灵魂,修炼python(91)-- 知识拾遗篇 —— pymysql模块之python操作mysql增删改查
首先你得学会基本的mysql操作语句:mysql学习 其次,python要想操作mysql,靠python的内置模块是不行的,而如果通过os模块调用cmd命令虽然原理上是可以的,但是还是不太方便,那么 ...
- python设计模式之单例模式(转)
设计模式之单例模式 单例设计模式是怎么来的?在面向对象的程序设计中,当业务并发量非常大时,那么就会出现重复创建相同的对象,每创建一个对象就会开辟一块内存空间,而这些对象其实是一模一样的,那么有没有办法 ...
- March 02nd, 2018 Week 9th Friday
Make hay while the sun shines. 勿失良机. Last night the toothache woke me up and it was very difficult f ...
- Loj #2731 「JOISC 2016 Day 1」棋盘游戏
Loj 2731 「JOISC 2016 Day 1」棋盘游戏 JOI 君有一个棋盘,棋盘上有 \(N\) 行 \(3\) 列 的格子.JOI 君有若干棋子,并想用它们来玩一个游戏.初始状态棋盘上至少 ...
- 使用Eclipse打jar包 包含依赖jar包
1.在项目根目录新建MANIFEST.MF文件 //版本号 Manifest-Version: 1.0 //依赖jar包路径 多个用空格隔开 Class-Path: lib/commons-loggi ...