Remax开发日志

Remax开发日志

Remax微信小程序开发日志

一、开始

1
2


npx create-remax-app myApp -t

1
2


yarn dev

1
2


微信小程序开发者工具导入dist文件夹

二、使用 Kqinfo UI

  • 安装
1
2


yarn add @kqinfo/ui
  • 如果安装失败sentry-cli
1
2
3


//在项目根目录添加.npmrc文件
sentrycli_cdnurl=https://cdn.npm.taobao.org/dist/sentry-cli
  • 按需加载
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


//安装babel-plugin-import插件
yarn add babel-plugin-import -D

//根目录新建babel.config.js文件
module.exports = {
  plugins: [
+    [
+      'import',
+      {
+        libraryDirectory: 'es',
+        libraryName: '@kqinfo/ui'
+      },
+      '@kqinfo/ui'
+    ]
  ]
};
  • 定制主题
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


//安装less加载器
yarn add @remax/plugin-less

//修改remax.config.js文件
+ const less = require('@remax/plugin-less');
module.exports = {
  ...
-  plugins: [less()],
+  plugins: [
+   less({
+     lessOptions: {
+       modifyVars: { '@brand-primary': '#2780d9' },
+       javascriptEnabled: true
+     }
+   })
+ ]
  ...
};
  • 使用
1
2
3
4
5


//将app.ts文件修改app.tsx文件
+import { ConfigProvider } from '@kqinfo/ui';
const App: React.FC = (props) => 
  <ConfigProvider brandPrimary={'#2780d9'}>{props.children}</ConfigProvider> as React.ReactElement;

三、使用 anar ui

1
2


yarn add annar

1
2
3
4
5
6


//全局样式引入 app.tsx
import 'annar/dist/annar.css';

//按需加载引入 app.tsx
import 'annar/esm/button/style/css';

四、问题

1. 真机调试

1
2
3


//需要压缩 -m，否则代码过大无法通过审核
yarn dev -m
此页面上有什么