Skip to main content

小程序一体化

小程序一体化是 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 目录下，通过右键点击上传部署函数。 ​

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

本地调试#

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

参考文档：

项目部署#

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

小程序发布： ​