https://github.com/matrixorigin/matrixone_uniapp_demo
A demo application for using MatrixOne and Uni App mini-program framework.
https://github.com/matrixorigin/matrixone_uniapp_demo
Last synced: 8 months ago
JSON representation
A demo application for using MatrixOne and Uni App mini-program framework.
- Host: GitHub
- URL: https://github.com/matrixorigin/matrixone_uniapp_demo
- Owner: matrixorigin
- Created: 2023-10-11T10:16:41.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-13T03:59:31.000Z (over 2 years ago)
- Last Synced: 2025-10-13T04:39:44.298Z (8 months ago)
- Language: JavaScript
- Size: 671 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MatrixOne Serverless数据库开发微信小程序示例
本教程教你如何使用UniApp的[云对象](https://uniapp.dcloud.net.cn/uniCloud/cloud-obj)连接MatrixOne数据库，并且给出了一个完整的微信小程序开发示例。本示例使用了node.js的[serverless-mysql](https://github.com/jeremydaly/serverless-mysql)连接库，并根据MatrixOne的特点做了一定调整。
## 什么是MatrixOne？
[MatrixOne](https://www.matrixorigin.cn/)是一款云原生HTAP数据库，可以完整支持业务开发和数据分析，并且高度兼容MySQL8.0，[MatrixOneCloud](https://www.matrixorigin.cn/moc)是MatrixOne的云上版本，目前已上线Serverless版本，免安装，免运维，按使用量计费，自动扩缩容。[注册MatrixOne Cloud](https://test.aliyun-dev.matrixone.tech/trial)后3秒创建实例，立刻可使用，并且所有用户都有免费额度，欢迎来薅羊毛！
## 详细教程
### 准备工作
#### 1.下载开发工具：HBuilderX(3.8.7及以上)、微信开发者工具(stable 1.06.2307250及以上)
#### 2.申请unicloud云对象空间并将账号与HBuilderX绑定
1. 注册Dcloud账号，点击[开发者中心](https://dev.dcloud.net.cn/pages/common/register?redirect_uri=https%3A%2F%2Funicloud.dcloud.net.cn)注册Dcloud账号。
2. 登录Dcloud进入[uniCloud控制台](https://unicloud.dcloud.net.cn/)，点击创建新的服务空间，首先完成实名认证。
3. 实名认证之后重新进入[uniCloud控制台](https://unicloud.dcloud.net.cn/)，点击创建新的服务空间。
4. 此处使用阿里云的免费套餐进行演示：点击阿里云，选择免费套餐，填写服务空间名称，点击构建。
5. 等待空间创建完毕，进入HBuilderX登录dcloud账户即可。
#### 3. 注册MatrixOnecloud账号并获得mysql连接串
1. 目前MatrixOnecloud已经开启公测，点击MatrixOnecloud注册账号。
2. 登录账号进入MOcloud数据库管理平台，点击右上角创建实例。
3. 点击刚创建的实例进入管理平台。
4. 点击connect->点击connect with 3rd tool。
5. 得到**mysql命令连接串** ，这个后面要用。
6. 测试用途我们可以先创建一个test数据库，直接使用connect to Platform
7. 用户名是admin，密码就是刚刚设置的数据库密码，填写之后登录，进入之后按照图片引导分别执行执行2个sql创建一个示例数据库。代码如下：
```
CREATE DATABASE test;
```
```
use test;
CREATE TABLE test.users (
username varchar(100) NULL,
age DECIMAL NULL,
country varchar(100) NULL,
gender varchar(100) NULL
);
```
### 小程序端
前端页面是由unicloud官方的demo项目改造，仅包含一个页面，在此用于测试。
#### 1. 创建demo项目
现在我们在HBuilderX里从头创建一个页面，打开HBuilderX，依次点击文件->新建->项目。
在创建项目的页面里按照引导创建项目。
#### 2. 运行demo并开发
现在我们可以用HBuilderX的运行功能，把现在的页面运行到微信开发者工具上去，看看实际的页面。
稍等一会，等待微信开发者工具弹出即可，最简单的demo就成功运行了，此后每次改动HBuilderX的内容，前端内容会自动同步到微信开发者工具。
#### 3. 修改页面
回到HBuilderX，打开pages/index/index.vue，删除原有代码，用以下的vue代码替代。
```vue
基础示例-云对象
Deme:CRUD a table with fixed data
link to cloudOBJ
show all tables
insert a record
del a record
update a record(age+10)
getAll records
const MO = uniCloud.importObject('MatrixOrigin-uniAppdemo');
export default {
data() {
return {
}
},
methods: {
testOBJ() {
MO.testOBJ().then((res)=>{
uni.showModal({
title: 'Test:connection to cloudOBJ',
content: JSON.stringify(res),
})
}).catch ((e)=>{
uni.showModal({
title: 'Test:connection to cloudOBJ',
content: JSON.stringify("can't connect to cloudOBJ"),
})
})
},
showTables() {
MO.showTables().then((res)=>{
uni.showModal({
title: 'Test:show all tables',
content: JSON.stringify(res),
})
}).catch ((e)=>{
uni.showModal({
title: 'Test:show all tables',
content: JSON.stringify("connection failed"),
})
})
},
// insert
insert() {
MO.insert().then((res) => {
uni.showModal({
title: 'Test:insert a record',
content: JSON.stringify(res),
})
});
},
//del
del(){
MO.delete().then((res) => {
uni.showModal({
title: 'Test:delete a record',
content: JSON.stringify(res),
})
});
},
// update
update(){
MO.update().then((res) => {
uni.showModal({
title: 'Test:update a record',
content: JSON.stringify(res),
})
});
},
// getAll
getAll() {
MO.getAll().then((res) => {
uni.showModal({
title: 'Test:get all records',
content: JSON.stringify(res),
})
});
},
}
}
view {
display: flex;
flex-direction: column;
}
.content {
padding-bottom: 30px;
}
.title {
font-weight: bold;
align-items: center;
padding: 20px 0px;
font-size: 20px;
}
.tips {
color: #999999;
font-size: 14px;
padding: 20px 30px;
}
.btn-list {
padding: 0px 30px;
}
.btn-list button {
margin-bottom: 20px;
}
.upload-preview {
width: 100%;
}
#tip {
width: 750rpx;
align-items: center;
}
button {
width: 100%;
}
```
保存代码，前端代码会同步到微信开发者工具中，页面如下：
可以发现有部分Error，这是意料之中的，因为我们没有云函数，现在也不能正常运行，再处理完云函数端之后就可以正常运行。
### 云函数端(后端)
#### 1. 关联云服务空间
回到HBuilderX中，根据下图引导关联云服务空间。
在引导框中关联自己的云服务空间即可。
关联上之后，uniCloud文件夹上会显示云服务空间，打开uniCloud文件夹，文件夹cloudfunctions就是放置云函数和云对象的文件夹。
#### 2. 导入插件并修改
在此还需要修改一下MatrixOneCloud的数据库的连接串，在cloudfunctions/MatrixOrigin-uniAppdemo/index.obj.js的第5~第9行，根据刚刚获得的MatrixOneCloud的mysql连接串，修改对应的host，user，password，database即可。
再回到刚刚的前端页面，修改一下前端pages/index/index.vue 中云对象调用的实际名称：
#### 3. 试运行
首先将云对象上传到云空间中。
上传成功后，需要重新打开微信开发者工具，先停止，再打开。
打开之后回到HBuilderX，将小程序连接的云函数切换到本地，先测试，这样云函数的报错信息可以显示在本地。
打开微信开发者工具之后，我们可以尝试点击第一个按钮“testOBJ”，看是否可以连接上云对象。
有问题的话可以看看unicloud的控制台的报错信息。
依次点击前端的各个按钮，测试数据库，如果有问题的话可以在此查看并解决。
没有问题的话就可以切换到“连接云端云函数”试试看，没有问题的话这个测试的小demo就测试完成了。
开发者可以根据自己的需求改变自己的前端代码和云对象代码来完成开发。