小程序基础课程:2022年最新最全零基础入门小程序开发教程~初级课程,中级课程在我的主页_哔哩哔哩_bilibili
大家可以加我微信QQ获取电子书版的配套笔记,方便后期直接查询知识点。
另外编程不打烊 · 华神提供配套解答服务。有推出包月,包年解答服务。你在学习过程中有任何问题都可以来找华神解答如下问题:
微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。
开发者可以使用云开发快速开发小程序等,并且原生打通微信开放能力。
开发者无需搭建服务器,可免鉴权直接使用平台提供的 API 进行业务开发。


相同点:都是分离开发、有后端概念、需要请求调用后端数据、后端需要返回数据
云开发优势:开发快、无需运维,底层有腾讯云提供专业支持、不用https、提供免费额度,按量收费
传统开发劣势:运维成本高、前后端联调,配合才能开发、上线流程长、需要返回https接口
APPID:自己小程序的身份证号,从自己小程序后台拷贝获取
注册成功后,进入小程序后台
微信公众平台
![]()
拷贝自己小程序的Appid,相当于小程序的身份证号码
下载地址:稳定版 Stable Build | 微信开放文档
下载完成后双击安装即可,傻瓜操作即可!
下载完成后,微信扫码登录即可:
登录成功后,然后会出现: 

点击开发者工具上面云开发按钮


获取环境id,在app.js里面完成初始化环境

onLaunch() {
//云开发环境的初始化
wx.cloud.init({
env:'bcbdy-3gj5jsx126e4beb4'
})
},


//添加一条记录到数据库表 yun-users
wx.cloud.database().collection('yun-users').add({
data:{
name:'华神',
num:'10001',
sex:'男',
age:99,
address:'浙江省杭州市'
},
success(result){
console.log(result)
wx.showToast({
title: '添加成功!',
})
}
})
5.3.2.1 查询所有数据 get()
//传统写法
wx.cloud.database().collection('yun-users').get({
success(res){
console.log(res)
}
})
//ES6
wx.cloud.database().collection('yun-users').get()
.then(result=>{
console.log(result)
this.setData({
dataList:result.data
})
})
5.3.2.2查询单条 doc()
wx.cloud.database().collection('yun-users').doc(记录_id).get()
.then(res=>{
console.log(res)
this.setData({
user:res.data
})
})
5.3.2.3条件查询 where()
wx.cloud.database().collection('yun-users').where({
address:'值',
age:24
}).get()
.then(res=>{
console.log(res)
})
//根据主键id删除数据
delete(event){
console.log(event.currentTarget.dataset.id)
var id = event.currentTarget.dataset.id
wx.cloud.database().collection('yun-users').doc(id).remove()
.then(res=>{
console.log(res)
wx.showToast({
title: '删除成功',
})
})
},
//根据条件删除数据
deleteSomeData(){
wx.cloud.database().collection('yun-users').where({
age:19,
address:'北京市'
}).remove()
.then(res=>{
console.log(res)
wx.showToast({
title: '删除成功',
})
})
},
wx.cloud.database().collection('yun-users').doc(记录的_id)
.update({
data:{//更新的字段,多个字段更新的话,用逗号隔开写键值对就可以了
address:this.data.inputValue
}
})
.then(res=>{
console.log(res)
wx.showToast({
title: '更新成功',
})
})
orderBy方法在做排序的时候,接受两个参数
wx.cloud.database().collection('yun-users')
.orderBy('age','asc')
.get()
.then(result=>{
console.log(result)
this.setData({
dataList:result.data
})
})
按多个字段排序
wx.cloud.database().collection('yun-users')
.orderBy('age','asc')
.orderBy('num','asc')
.get()
.then(result=>{
console.log(result)
this.setData({
dataList:result.data
})
})
小程序列表数据分页加载、一次性请求全部数据库记录,小程序分页功能实现 2022年最新小程序列表数据分页加载、一次性请求全部数据库记录,小程序分页功能实现_哔哩哔哩_bilibili

我们想实现如下搜索需求:
我们之前是用where语句查询某个字段,全部包含你输入的内容时才可以搜索到,所以单纯用where语句来做搜索的话,必须是全部字符匹配才会搜索到,所以结果太单一。
模糊搜索单个字段:
let db = wx.cloud.database()
wx.cloud.database().collection('yun-users').where({
name:db.RegExp({
regexp:this.data.inputValue,
options:'i'//大小写不区分
})
}).get()
.then(res=>{
console.log(res)
this.setData({
dataList:res.data
})
})
模糊搜索多个字段:
let searchKey = '华神'
let db = wx.cloud.database()
let _ = db.command
db.collection('news')
.where(_.or([
{//姓名
name: db.RegExp({ //使用正则查询,实现对搜索的模糊查询
regexp: searchKey,
options: 'i', //大小写不区分
}),
},
{//个人介绍
desc: db.RegExp({
regexp: searchKey,
options: 'i',
}),
}
])).get()
.then(res => {
console.log('查询成功', res)
})
.catch(res => {
console.log('查询失败', res)
})
云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。
云函数即在云端(服务器端)运行的函数。在物理设计上,一个云函数可由多个文件组成,占用一定量的 CPU 内存等计算资源;各云函数完全独立;可分别部署在不同的地区。开发者无需购买、搭建服务器,只需编写函数代码并部署到云端即可在小程序端调用,同时云函数之间也可互相调用。
一个云函数的写法与一个在本地定义的 JavaScript 方法无异,代码运行在云端 Node.js 中。当云函数被小程序端调用时,定义的代码会被放在 Node.js 运行环境中执行。我们可以如在 Node.js 环境中使用 JavaScript 一样在云函数中进行网络请求等操作,而且我们还可以通过云函数后端 SDK 搭配使用多种服务,比如使用云函数 SDK 中提供的数据库和存储 API 进行数据库和存储的操作。
云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时,云函数的传入参数中会被注入小程序端用户的 openid,开发者无需校验 openid 的正确性因为微信已经完成了这部分鉴权,开发者可以直接使用该 openid。
小程序内提供了专门用于云函数调用的 API。开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文(appid、openid 等),无需维护复杂的鉴权机制,即可获取天然可信任的用户登录态(openid)。
云函数的请求参数 data 有大小限制(100K)
| 操作 | 云函数 | 云数据库 |
|---|---|---|
| 返回数据上限 | 100条 | 20条 |
| 更新数据 | 都可以更新 | 只有自己创建的才可以更新 |
| 删除数据 | 都可以删除 | 只有自己创建的才可以删除 |
与传统开发相比,我们只需要把心思花在业务逻辑代码的编写上即可。无需关心写好如何部署,无需关心安全问题,无需关心鉴权问题。
新建一个空白文件夹cloud(自定义),和pages同级,在project.config.json文件里面,配置云函数环境
"cloudfunctionRoot":"cloud/",

在云函数文件夹cloud上面,点击右键点击新建node.js云函数,自定义命名云函数名称即可创建云函数

云函数getUserOpenid,云函数文件写完之后要点击右键上传并部署才可以生效:
注意:云函数只要有变动,就要重新部署,否则云函数不生效。
云函数(名称: getUserOpenid)
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
openid: wxContext.OPENID,
}
}
调用云函数callFunction:
//在app.js里面调用云函数
wx.cloud.callFunction({
name:'getUserOpenid'
}).then(res =>{
console.log(res)
this.globalData.openid = res.result.openid
})
//在小程序具体页面里面调用云函数
wx.cloud.callFunction({
name:'getUserOpenid'
}).then(res =>{
console.log(res.result.openid)
app.globalData.openid = res.result.openid
})
云函数(云函数名称yun-add):
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env:'bcbdy-3gj5jsx126e4beb4'
})
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return cloud.database().collection('yun-users').add({
data:{
name:event.name
}
})
}
页面调用云函数:
wx.cloud.callFunction({
name:'yun-add',
data:{
name:'小程序华哥'
}
}).then(res =>{
console.log(res)
})
云函数(名称:yun-delete)
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env:'bcbdy-3gj5jsx126e4beb4'
})
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return cloud.database().collection('yun-users').doc(event.id).remove()
}
页面端调用云函数:
wx.cloud.callFunction({
name:'yun-delete',
data:{
id:'0448022461b0af79013b608a7320dc15'
}
}).then(res =>{
console.log(res)
})
云函数端代码:
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env:'bcbdy-3gj5jsx126e4beb4'
})
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return cloud.database().collection('yun-users').doc(event.id).update({
data:{
name:event.name,
age:event.age
}
})
}
小程序页面调用云函数:
wx.cloud.callFunction({
name:'yun-update',
data:{
id:'c462c81061b0aef901356d546bf60e72',
name:'华神',
age: 25
}
}).then(res =>{
console.log(res)
})
云函数(名称:yun-get)
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env:'bcbdy-3gj5jsx126e4beb4'
})
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return cloud.database().collection('yun-users').get()
}
小程序页面调用云函数:
wx.cloud.callFunction({
name:'yun-get'
}).then(res =>{
console.log(res)
})
=== ================ ========================================= ===================== ======================================
云函数 条件查询(名称:yun-get)
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env:'bcbdy-3gj5jsx126e4beb4'
})
// 云函数入口函数
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return cloud.database().collection('yun-users').where({
name:event.name
}).get()
}
小程序页面调用云函数 条件查询:
wx.cloud.callFunction({
name:'yun-get',
data:{
name:'编程不打烊'
}
}).then(res =>{
console.log(res)
})
云存储提供高可用、高稳定、强安全的云端存储服务,支持任意数量和形式的非结构化数据存储,如视频和图片,并在控制台进行可视化管理。云存储包含以下功能:
image、audio 等组件中传入云文件 ID上传文件(uploadFile)
下载文件(downloadFile)
删除文件(deleteFile)
组件支持:支持在 image、audio 等组件中传入云文件 ID
换取临时链接:可以根据文件 ID 换取临时文件网络链接,文件链接有有效期为两个小时
在控制台中,选择存储管理标签页,可以在此看到云存储空间中所有的文件,还可以查看文件的详细信息、控制存储空间的读写权限
上传图片之前需要先选择图片
wx.chooseImage({
count: 1,//最多可以选择的图片张数
sizeType: ['original', 'compressed'],//所选的图片的尺寸,原图/压缩图
sourceType: ['album', 'camera'],//选择图片的来源,从相册选图/使用相机
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths
}
})
然后调用文件上传的api接口即可
将本地资源上传到服务器,上传成功后会获得文件唯一标识符,即文件 ID,后续操作都基于文件 ID 而不是 URL。
wx.cloud.uploadFile({
cloudPath: 'example.png', // 上传至云端的路径
filePath: '', // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
},
fail: console.error
})
选择图片,并上传:
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],//所选的图片的尺寸,原图/压缩图
sourceType: ['album', 'camera'],//选择图片的来源,从相册选图/使用相机
}).then(res=>{
console.log(res)
this.setData({
img:res.tempFilePaths[0]
})
//产生随机数
var num = Math.random()
console.log(num)
//当前时间
var time = Date.now()
console.log(time)
wx.cloud.uploadFile({
cloudPath: `users/${num}-${time}-abc.png`, // 上传至云端的路径
filePath: res.tempFilePaths[0], // 小程序临时文件路径
}).then(result=>{
console.log(result)
this.setData({
yunImgUrl:result.fileID
})
wx.showToast({
title: '上传成功!',
})
})
})
//更新学生或者员工的头像
updateFaceImg(){
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],//所选的图片的尺寸,原图/压缩图
sourceType: ['album', 'camera'],//选择图片的来源,从相册选图/使用相机
}).then(res=>{
console.log(res)
this.setData({
img:res.tempFilePaths[0]
})
//产生随机数
var num = Math.random()
console.log(num)
//当前时间
var time = Date.now()
console.log(time)
wx.cloud.uploadFile({
cloudPath: `users/${num}-${time}-abc.png`, // 上传至云端的路径
filePath: res.tempFilePaths[0], // 小程序临时文件路径
}).then(result=>{
console.log(result)
this.setData({
yunImgUrl:result.fileID
})
this.updateFace()
wx.showToast({
title: '上传成功!',
})
})
})
},
//更新学生/员工头像信息
updateFace(){
wx.cloud.database().collection('yun-users').doc(this.data.user._id)
.update({
data:{//更新的字段,多个字段更新的话,用逗号隔开写键值对就可以了
touxiang:this.data.yunImgUrl
}
})
.then(res=>{
console.log(res)
this.getUserInfo()
wx.showToast({
title: '更新成功',
})
})
}
选择视频:
wx.chooseVideo({
sourceType: ['album','camera'],
compressed:true,//是否压缩所选择的视频文件
maxDuration: 60,//拍摄视频最长拍摄时间,单位秒
camera: 'back',//默认拉起的是前置或者后置摄像头 back:后置;front:前置
success(res) {
console.log(res.tempFilePath)
}
})
上传视频:
wx.cloud.uploadFile({
cloudPath: 'example.png', // 上传至云端的路径
filePath: '', // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
},
fail: console.error
})
选择视频,并上传:
uploadVio(){
var that = this;
//1.选择视频
wx.chooseVideo({
sourceType: ['album','camera'],
compressed:true,//是否压缩所选择的视频文件
maxDuration: 60,//拍摄视频最长拍摄时间,单位秒
camera: 'back',//默认拉起的是前置或者后置摄像头 back:后置;front:前置
success(res) {
console.log(res.tempFilePath)
that.setData({
tempVideoUrl:res.tempFilePath
})
wx.showLoading({
title: '上传中',
})
//2.上传视频
//产生随机数
var num = Math.random()
console.log(num)
//当前时间
var time = Date.now()
console.log(time)
wx.cloud.uploadFile({
cloudPath: `users/${num}-${time}-abc.mp4`, // 上传至云端的路径
filePath: res.tempFilePath, // 小程序临时文件路径
}).then(result=>{
wx.hideLoading({
success: (res) => {
wx.showToast({
title: '上传成功',
})
},
})
console.log(result)
that.setData({
videoUrl:result.fileID
})
})
}
})
}
选择了除图片和视频的文件,如:word,excel,pdf...
选择文件:从客户端会话(微信好友、群、文件助手)选择文件
wx.chooseMessageFile({
count: 10, //最多可以选择的文件个数,可以 0~100
type: 'image',
success (res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFiles
}
})
参数type:所选的文件的类型
all: 从所有文件选择;
video: 只能选择视频文件;
image: 只能选择图片文件;
file: 可以选择除了图片和视频之外的其它的文件
上传文件:
wx.cloud.uploadFile({
cloudPath: 'example.png', // 上传至云端的路径
filePath: '', // 小程序临时文件路径
success: res => {
// 返回文件 ID
console.log(res.fileID)
},
fail: console.error
})
如:word,excel,pdf...
下载文件、打开文件
download(event){
console.log(event)
wx.cloud.downloadFile({
fileID:event.currentTarget.dataset.url//云端文件地址
}).then(res=>{
console.log(res.tempFilePath)
wx.openDocument({
filePath: res.tempFilePath
}).then(res=>{
console.log(res)
})
})
}






目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称
前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU
@作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中,用于实现
遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg
ES一、简介1、ElasticStackES技术栈:ElasticSearch:存数据+搜索;QL;Kibana:Web可视化平台,分析。LogStash:日志收集,Log4j:产生日志;log.info(xxx)。。。。使用场景:metrics:指标监控…2、基本概念Index(索引)动词:保存(插入)名词:类似MySQL数据库,给数据Type(类型)已废弃,以前类似MySQL的表现在用索引对数据分类Document(文档)真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具,用来对区块链系统进行各种管理操作。但是对于初学者来说,还是可视化界面更友好,本节就来介绍WeBASE管理平台,这是一款微众银行开源的自研区块链中间件平台,可以降低区块链使用的门槛,大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行,在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设,一定
TCL脚本语言简介•TCL(ToolCommandLanguage)是一种解释执行的脚本语言(ScriptingLanguage),它提供了通用的编程能力:支持变量、过程和控制结构;同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发,脚本编程,GUI和测试等方面。•实际上包含了两个部分:一个语言和一个库。首先,Tcl是一种简单的脚本语言,主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的,因此在某种意义上我们又可以把TCL看作C库,这个库中有丰富的用于扩展TCL命令的C\C++过程和函数,所以,Tcl是
文章目录一、项目场景二、基本模块原理与调试方法分析——信源部分:三、信号处理部分和显示部分:四、基本的通信链路搭建:四、特殊模块:interpretedMATLABfunction:五、总结和坑点提醒一、项目场景 最近一个任务是使用simulink搭建一个MIMO串扰消除的链路,并用实际收到的数据进行测试,在搭建的过程中也遇到了不少的问题(当然这比vivado里面的debug好不知道多少倍)。准备趁着这个机会,先以一个很基本的通信链路对simulink基础和相关的debug方法进行总结。 在本篇中,主要记录simulink的基本原理和基本的SISO通信传输链路(QPSK方式),计划在下篇记
提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信