您现在的位置是：网站首页> 小程序设计
小程序研发关注问题收集
- 小程序设计
- 2026-02-12
- 2508人已阅读
小程序研发关注问题收集
uniapp实现如何使用微信小程序云开发技术实现数据存储和实时通信
小程序网络限制
大家都知道，若想在小程序中发起网络请求访问我们的WEB后端，必须要做类似如下的操作：
1.备案你的域名！
2.给你的后端服务上SSL证书！
3.到微信公众平台设置小程序请求域名白名单！
小程序里调用API请求访问我们的后端数据！
这一流程，不难！但对很多人来说，忒麻烦！
所以，这个项目出现了。
得益于小程序的云开发功能，让我们可以突破这个限制，来达到请求任何可访问的http数据！
（如：ip访问、http 80端口访问、自定义端口访问、未备案域名等场景）
不备案，不需HTTPS，不用白名单，直接在小程序里调用我们的API，请求任意网络数据！
1分钟快速部署
首先，我们前往v-request项目的开源地址：
https://github.com/guren-cloud/v-request
里边会有详细的部署和使用方法，我这里也简单介绍一下，真的很简单！新手1分钟搞定！
部署云函数
项目分为两部分，一个是我们的小程序云函数代码，在cloud目录中。
我们首先在开发者工具开通小程序云开发平台，然后初始化好环境之后，创建一个云函数，命名为
命名为 v-request（不要命名错了，重要！）
然后把index.js和package.json文件的内容替换为项目cloud目录中对应的文件内容，再右键进行上传部署（云端安装依赖）操作：
部署客户端
另一个文件，就是主目录下的v-request.js文件，这个是运行在我们小程序里的SDK客户端文件。
我们把它放入小程序的目录，如utils/目录中，然后在app.js文件中进行require加载即可：
开始体验黑科技
通过上边的简单部署，你已经可以在小程序的任意位置，使用 wx.vrequest 方法来进行任意HTTP网络数据请求啦！
（注意：是 vrequest，比官方的 wx.request 方法名前多了个v，也就是 wx.vrequest 哦！）
以下操作均在开启校验域名、HTTPS等设置以及小程序后台未配置request白名单的情况下进行的测试
GET请求测试
wx.vrequest({
url: 'https://mssnn.cn',
success: ret => {
console.log(ret.data);
}
})
返回数据
POST请求测试
wx.login({
success: ret => {
wx.vrequest({
url: 'https://wx5bbe79dd056cb238.mssnn.cn/v2/client/init',
data: 'code=' + ret.code,
dataType: 'json',
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: res => {
console.log('[post.res]', res);
}
})
}
})
返回数据：
是不是感觉用法很熟悉？
对！和官方的 wx.request API保持一致！不需要耗费过多学习成本！
应用场景
这个方法，已经能够让我们突破了微信官方的request白名单限制，但我们应该在哪个场景里使用比较合适呢？
我这里总结了小部分你应该会遇到的场景：
网站域名没进行备案
网站目前还是http 80端口，未开启https和配置ssl证书
网站没有域名，通过ip地址访问的
隐藏访问流量中的隐私数据，提高小程序后端的安全性
如果你有以上的需求，不妨试试这个黑科技，解决这一痛点难题，提高小程序开发效率！
项目地址：https://github.com/guren-cloud/v-request
觉得不错，欢迎点个star！
uniapp实现如何使用微信小程序云开发技术实现数据存储和实时通信
首先，我们需要在项目的app.vue文件中引入云开发的初始化函数并进行初始化。在创建云开发环境后，可以将环境ID填入初始化函数的参数中，如下所示：
import { init } from 'wx-server-sdk'
init({
env: 'your-env-id' // 云开发环境ID
})
接下来，我们需要在需要使用云数据库的页面或组件中使用云开发的api。例如，我们想要从云数据库中读取用户的信息并展示在小程序中，可以在页面的onLoad函数中使用以下代码：
onLoad() {
wx.cloud.init({
env: 'your-env-id' // 云开发环境ID
})
const db = wx.cloud.database()
db.collection('users').get({
success: (res) => {
console.log(res.data)
},
fail: (err) => {
console.log(err)
}
})
}
通过上述代码，我们使用了wx.cloud.database()来获取数据库的引用，然后通过collection函数指定集合名称，并使用get函数获取该集合中的数据。之后，我们可以在success回调函数中处理获取到的数据。
除了数据存储，实时通信也是很多应用中必不可少的功能。微信小程序的云开发提供了实时数据库功能，可以用于实时通信等场景。下面我们将介绍如何在uniapp中使用实时数据库。
首先，我们还需要在项目的app.vue文件中引入云开发的初始化函数并进行初始化。同样地，将环境ID填入初始化函数的参数中。
然后，在需要使用实时数据库的页面或组件中使用以下代码：
onLoad() {
wx.cloud.init({
env: 'your-env-id' // 云开发环境ID
})
const db = wx.cloud.database()
const watcher = db.collection('messages').where({
_roomId: 'roomId' // 指定房间ID
}).watch({
onChange(snapshot) {
console.log('docs changed:', snapshot.docs)
},
onError(err) {
console.error('watch err', err)
}
})
}
上述代码中，我们使用了watch()函数来监听指定集合中数据的变化，并通过onChange回调函数获取变化的数据。在实际应用中，我们可以根据业务需求，监听不同的集合和条件，实现实时通信的功能。
使用 Uniapp + UniCloud 云开发微信小程序
uniCloud和阿里云等传统云，的区别和关系
一、uniCloud是DCloud在阿里云和腾讯云的serverless服务上封装而成的。
它包含laaS层(由阿里云和腾讯云提供硬件和网络)和PaaS层(由DCloud提供开发环境)。
开发者可以自主选择uniCloud的硬件和网络资源的供应商，在阿里云和腾讯云之间切换。
二、开户和付费虽然通过DCloud渠道，但实际上开发者自动在云厂商处建立了账户和充值了余额。
DCloûd只获取云服务厂商的返佣。
三、开发时虽使用DCloud的工具，但应用上线时，手机端是直连阿里云或腾讯云的serverless，
不经由DCloud的服务器。
实用代码
支付老微信代码
// 云函数部分的代码
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
exports.main = async (event, context) => {
const res = await cloud.cloudPay.unifiedOrder({
"body" : "商品描述",
"outTradeNo" : "商户订单号",
"spbillCreateIp" : "127.0.0.1",
"totalFee" : 1,
// 用于接收支付异步通知的云函数所在的服务空间ID和云函数名
"envId": "test-f0b102",
"functionName": "pay_cb"
})
return res
}
// 小程序部分的代码
wx.cloud.callFunction({
name: '函数名',
data: {
// ...
},
success: res => {
const payment = res.result.payment
wx.requestPayment({
...payment,
success (res) {
console.log('pay success', res)
},
fail (res) {
console.error('pay fail', err)
}
})
},
fail: console.error,
})
...payment
... 是 ES6 的扩展运算符，作用是把 payment 对象里的所有属性和值 “展开” 到当前配置对象中；
payment 是一个提前准备好的支付参数对象，里面必须包含微信支付要求的核心参数，比如：
javascript
运行
// payment 对象的典型结构
const payment = {
timeStamp: '1735689600', // 时间戳（字符串类型）
nonceStr: 'abc123def456', // 随机字符串
package: 'prepay_id=wx20260101123456789', // 预支付会话ID（核心）
signType: 'MD5', // 签名类型
paySign: 'xxxxxx' // 支付签名（后端生成）
}
在 ES6 及以上版本的 JavaScript 中，当一个对象的属性值是函数时，可以使用简写语法：
省略属性名后的 :（冒号）；
省略 function 关键字；
直接写 函数名(参数) { 函数体 }，此时函数名就等价于对象的 key。
举个更简单的例子帮你理解：
javascript
运行
// 传统写法（ES5）
const obj = {
sayHi: function (name) {
console.log('Hi', name)
}
}
// 简写写法（ES6+）—— 和上面完全等价
const obj = {
sayHi (name) {
console.log('Hi', name)
}
}
迁移到uniCloud + uni-app体系，代码改成这样：
// 云函数部分的代码
const unipayIns = unipay.initWeixin({
appId: 'your appId',
mchId: 'your mchId',
key: 'you parterner key',
// pfx: fs.readFileSync('/path/to/your/pfxfile'), // p12文件路径，使用微信退款时需要，需要注意的是务必使用绝对路径
})
exports.main = async (event, context) => {
const res = await unipayIns.getOrderInfo({
openid: 'user openid',
body: '商品描述',
outTradeNo: '商户订单号',
totalFee: 1, // 金额，单位分
notifyUrl: 'https://xxx.xx' // 支付结果通知地址
})
return res
}
// 客户端部分的代码
uniCloud.callFunction({
name: '云函数名',
data: {
// ...
},
success(res) {
uni.requestPayment({
provider: 'wxpay',
...res.result.orderInfo
success (res) {
console.log('pay success', res)
},
fail (res) {
console.error('pay fail', err)
}
})
}
})
下一篇：小程序同行者