@roll2back/tool-weixin-mp NPM

时时工具包-微信小程序工具

安装方式

npm install @roll2back/tool-weixin-mp

功能说明

请求封装为 httpServer 形式
仓库封装为 store 调用
事件实例化: Event
跳转: goto、back
自定义 wxs
自定义脚手架
同一定义样式

前序说明

下载依赖

npm install @roll2back/tool

初始化小程序

使用 TS、scss 为小程序编程语言
使用 Tdesign 作为 UI 组件库

小程序初始化操作

一、本地化 wxs 与脚手架

./node_modules/.bin/weixin-mp-eject

二、修改根目录（可选）

修改./package.json 的 scripts 中的 project 指令，把 miniprogram 修改为自定义项目名称

三、修改环境变量

修改./cli/common.js 中的环境配置（allEnv 变量，填充好 appId、host 等）

四、初始化项目(生成项目配置文件、tsconfig.json)

npm run initp

五、构建 npm

工具 -> 构建 npm

六、切换环境（生成环境变量）

npm run env:dev

七、在 app.j|ts 中初始化项目配置

在 App 前面（非 App 内部）添加如下代码

import { startApp, hideApp } from '@/lib/index';
// 启动app
startApp();

在 App 的钩子函数 onHide 添加代码：hideApp();

App<IAppOption>({
    ...
    onHide() {
        hideApp();
    }
});

八、导入公共样式

在 app.wx|scss 中底一行添加如下样式

@import './miniprogram_npm/@roll2back/tool/wx.wxss';
@import './style/wr-iconfont/iconfont.wxss';

.t-tabs__item--active {
    font-weight: 400 !important;
}

九、配置 cli/common.js 中的 swaggerApi 字段，设置文档路径与基础信息获取接口

修改./package.json 的 scripts 中的 document 指令，把 miniprogram 修改为自定义项目名称
修改 ./cli/config/document.js 文件，修改文档组路径信息、系统基础信息的 url

npm run document

开发说明

创建表单页面

请求名称从请求的 service 文件中查找，请求添加名称一般是：xxxAdd，分页请求名称一般是：xxxGetPage

// yarn page:form [请求添加名称] [路径名称]
yarn page:form sysMessageAdd  /pages/index3

// yarn page:paging [请求分页名称] [路径名称]
yarn page:form sysMessageGetPage  /pages/index3
//

注意事项

页面路径变化需要执行： `npm run route` 进行更新路由文件（包括 tabar 列表）

app.json 内容变化为了保证格式一致性，也需要执行 `npm run route` 进行更新路由文件与 app.json 文件

app.json 中自定义 tabbar 时候，图标使用的 icon 字段

"tabBar": {
    "custom": true,
    "list": [
        {
            "selectedColor": "#000000",
            "text": "测试",
            "pagePath": "pages/index/index",
            "icon": "home"
        },
        {
            "selectedColor": "#000000",
            "text": "测试2",
            "pagePath": "pages/logs/logs",
            "icon": "user"
        }
    ]
}