title: 微信小程序

order: 3

让我们在一分钟内开启一个微信小程序项目吧!

创建项目

  1. $ npx degit remaxjs/template-wechat my-app
  2. $ cd my-app && npm install

运行项目

  1. $ npm run dev

打开微信调试器,选中项目 dist 目录,你将看到

微信小程序 - 图1

成功!

项目结构

现在我们来看一下 Remax 应用的结构:

  1. my-app/
  2. package.json
  3. dist/
  4. node_modules/
  5. src/
  6. ┗━┓ app.js
  7. app.css
  8. app.config.js
  9. pages/
  10. ┗━┓ index/
  11. ┗━┓
  12. index.js
  13. index.module.css
  14. index.config.js

dist 为打包编译后的文件目录。

在开发阶段我们无需关心打包结果的兼容性及体积,所以 remax 打包结果为未压缩版本,在需要上传代码时应勾选小程序的 代码压缩样式补全选项

src 为源文件目录

app.js 即小程序 App 方法,可以在 class 内定义对应的属性

  1. import './app.css';
  2. class App {
  3. onLaunch (options) {
  4. },
  5. onShow (options) {
  6. },
  7. onHide () {
  8. },
  9. onError (msg) {
  10. console.log(msg)
  11. },
  12. }
  13. export default App;

app.css 全局样式文件

app.config.js 为小程序全局配置文件,对应 app.json,具体可参考 指南 - 配置

  1. module.exports = {
  2. pages: ['pages/index/index'],
  3. window: {
  4. navigationBarTitleText: 'My App',
  5. },
  6. };

pages 存放项目页面

pages/index/index.js 页面文件,对应小程序 Page 方法

  1. import * as React from 'react';
  2. import { View, Text } from 'remax/wechat';
  3. import './index.module.css';
  4. export default () => {
  5. return (
  6. <View>
  7. <Text>pages/index/index</Text>
  8. </View>
  9. );
  10. };

默认导出的的 React 组件就是当前的页面,关于生命周期的使用方式参考 指南 - 生命周期

Remax 针对不同平台有对应的实现,如 remax/alipayremax/wechatremax/toutiao 等等,开发者可根据需要选择对应的平台。关于跨平台开发解决方案请查看:高级指南 - 跨平台开发

index.module.css 页面样式文件,关于样式请参考 指南 - 样式

index.config.js 页面配置文件,会自动转换成小程序页面配置文件 index.json,关于配置请参考 指南 - 配置