miniprogram project
1.0.0
https://www.cnblogs.com/cckui/p/10228795.html
.
├── 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 // 全局样式
This project uses small program cloud development. Cloud development provides a JSON database, and users can add, delete, modify, and query the database directly in the cloud. However, the mini program imposes certain restrictions on the user's permissions to operate data (such as data update, one-time get record number limit, etc.). Therefore, cloud functions are mainly used here to operate the database.
Right-click on the function root directory, and in the right-click menu, select Create a new Node.js cloud function. We name the cloud function collection_get.
Edit 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)
}
}
For example, query the list of poems according to the query conditions {tags: '唐诗三百首'} , and each page num = 10 pieces of data:
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)
}
Note that when we add records to the database, the system will automatically add the user's openid field to each record for us. However, if the data table is imported by ourselves using a json/csv file, there will be no openid field. At this time , when updating this data table, the system will think that you are not the creator, so it cannot be updated.
At this time, you need to update the database through the cloud function, create a new cloud function collection_update, and edit 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)
}
}
Update the number of people who open a certain _id data:
let _id = e.currentTarget.dataset.id
wx.cloud.callFunction({
name: 'collection_update',
data: {
id: _id
},
}).then(res => {
console.log(res.data)
})
.catch(console.error)
Mini program cloud development can use regular expressions to perform fuzzy queries. For example, based on the user's input of keywords, the query title contains ancient poems with the changed keywords.
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)
Reference article: Using Async/await method to handle asynchronous requests in WeChat applet
There are two ways to trigger forwarding of pages in mini programs:
open-type="share" to button component, the Page.onShareAppMessage event can be triggered after the user clicks the button. If this event is not defined on the current page, there will be no effect after clicking.Users can also customize the title, image, and path displayed after forwarding in the Page.onShareAppMessage event:
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',
}
},
For details, please refer to the article: Authorization of WeChat Mini Programs
There is obviously data in the data table, but what collection.get gets is empty. Solution: You can open the database permission settings in the cloud development console and set permissions.
The successful call to the collection.update function returns that 0 rows of records have been updated, because the applet does not allow updating data without an openid field. Solution: The database can be updated through cloud functions.
Solution: 1: Upload the image to the server and fill in the image path address on the server. 2: Convert the image to base64 encoding.
Reason: Please see the document: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/import.html
Solution: Remove the commas between {} in the json data. If the outermost layer is [] , it must also be removed. The final form is as follows:
{
"index": "作者_1",
"type": "作者",
"poet": "李白",
"abstract": "李白（701年－762年），字太白，号青莲居士，唐朝浪漫主义诗人，被后人誉为“诗仙”..."
}
{
"index": "作者_2",
"type": "作者",
"poet": "白居易",
"abstract": "白居易（772年－846年），字乐天，号香山居士..."
}
