跳到主要内容
版本:2.0.0

小程序一体化

小程序一体化是 Midway.js 团队与 Rax 团队合作的产品,通过 Midway.js 对一体化的支持与 Rax 对小程序的支持,我们可以为小程序带去更好的研发体验。

初始化

在命令行输入以下命令,即可快速完成小程序一体化项目的创建。

npm init rax

选择 App -> 小程序云开发一体化应用即可。

本地开发

以微信小程序开发为例

项目创建完成后,进入项目根目录。

配置 AppId

小程序的运行与预览依赖于 AppId(获取方式),获取到 AppID 时,你可以打开项目根目录的 build.json 文件,将 AppId 配置在此。

{
"targets": [
//...
],
"plugins": [
//...
],
"wechat-miniprogram": {
"nativeConfig": {
"appid": "<你的 AppID>",
"name": "nativeConfig 是用户配置 project.config.json 的地方"
}
}
}

本地启动

运行如下命令。

npm start

本地服务启动后将输出以下日志。

目录结构

整体目录结构如下

  • src:前端开发目录
  • src/cloud:云开发目录
  • src/cloud/functions:云函数目录

使用小程序开发工具预览

打开微信小程序开发者工具,选择导入项目,微信小程序的目录是 <项目根目录>/build/wechat-miniprogram.

你可以在此处预览项目,并进行函数的部署与发布工作。

开发函数

使用 Midway Hooks 可以方便的开发云函数。

以获取 OpenId 为例。

export const getOpenId = async () => {
const wechatContext = cloud.getWXContext();

return {
openId: wechatContext.OPENID,
};
};

前端调用代码(需要提前安装 rax-use-async-effect 依赖)

import { createElement, useState } from 'rax';
import useAsyncEffect from 'rax-use-async-effect';
import View from 'rax-view';
import Text from 'rax-text';
import styles from './index.module.css';
import Logo from '../../components/Logo';
import { hello, getOpenId } from '@/cloud/function';

export default function Home() {
const [message, setMessage] = useState('');
const [openId, setOpenId] = useState('');

useAsyncEffect(async () => {
const message = await hello('Rax', 'Midway.js');
setMessage(message);

const { openId } = await getOpenId();
setOpenId(`${openId!.substring(0, 3)}***************${openId!.substring(14)}`);
}, []);

return (
<View className={styles.homeContainer}>
<Logo uri="//gw.alicdn.com/tfs/TB1MRC_cvb2gK0jSZK9XXaEgFXa-1701-1535.png" />
<Text className={styles.homeTitle}>Welcome to Your Rax App</Text>
<Text className={styles.homeInfo}>Message: {message}</Text>
<Text className={styles.homeInfo}>OpenId: {openId}</Text>
</View>
);
}

Midway Hooks 相关的语法和文档可参考: 介绍

函数部署

云开发的函数需要部署后才能调用,你可以在生成的 cloudfunctions 目录下,通过右键点击上传部署函数。

部署完成后重新编译项目即可查看函数运行结果,更多的云开发指导,可以参考官方文档:

本地调试

你可以方便的通过小程序开发工具来进行函数调试,如下图所示。

参考文档:

项目部署

在完成开发后,即可开始发布小程序,后续参考云开发平台的发布文档即可。

小程序发布: