二次开发指导

二次开发环境搭建步骤

点击视频地址链接

单站点和Saas模式

niucloud-admin框架是支持单站点和Saas模式的。单站点模式和Saas模式主要依据菜单权限和功能项的不同。站点site端（租户端、商家端）和saas管理端（平台端）的登录入口路由的不同实现的。把站点端的菜单合并到平台端，那就相当于是单用户系统了。

自定义手机端DIY装修页面

开发者在开发插件的时候，某些页面希望是自定义实现的页面，按照下面的方法实现，系统就会加载到页面装修中，供用户手动可以装修页面

下面是实现步骤

首页，我们要先通过 DIY组件/页面开发提供的方法，开发自定义页面

需要在插件的install方法中，参考如下面的方式，设置为默认项

复制代码

public function install()
{
    $diy_service = new DiyService();

    // 设置旅游首页模板
    $index_page_data = $diy_service->getPageData('DIY_INDEX', 'tourism_index');
    $diy_service->changeTemplate([
        'type' => 'DIY_INDEX',
        'mode' => $index_page_data[ 'mode' ] ?? 'diy',
        'template' => 'tourism_index'
    ]);

    // 设置旅游个人中心模板
    $member_index_page_data = $diy_service->getPageData('DIY_MEMBER_INDEX', 'tourism_member_index');
    $diy_service->changeTemplate([
        'type' => 'DIY_MEMBER_INDEX',
        'mode' => $member_index_page_data[ 'mode' ] ?? 'diy',
        'template' => 'tourism_member_index'
    ]);

    return true;
}

自定义站点管理端控制台页面样式

开发者在开发插件的时候，有的时候需要修改后台管理端的入口页面（默认页面）替代框架的默认页面，这样会让系统看起来更专业。niucloud-admin框架为您提高了实现方案。

下面是具体的实现步骤

在插件的app\listener\SiteIndexListener.php 监听文件中，做如下定义定义

复制代码

class SiteIndexListener
{
public function handle()
{
    return [
        [
            "name" => get_lang("dict_site_index.tourism"),
            "view_path" => "tourism/site_index"
        ],
    ];
}
}

name字段为名字view_path视图页面的路径

在app\event.php中，添加定义如下

复制代码

return [
'listen' => [
    'SiteIndex' => ['addon\tourism\app\listener\SiteIndexListener'],
]
];

通过上面的两个步骤，系统会自动加载实现了自定义首页的插件页面

调用素材资源

素材管理库中的图片、视频的调用方法是get_thumb_images参数 $site_id 站点id $image 图片的URL,数据库表url字段 $thumb_type 获取的图片的缩略图尺寸，默认值为all会把大图，中图，小图都返回

数据字典中定义FileDict const BIG = 'big'; const MID = 'mid'; const SMALL = 'small'; 当值为all , 会返回数组结构 [ 'big' =>, 'mid' =>, 'small' => , ] 值为 big,mid,small值，直接返回图片的途径（本地或者云服务器）

开发时，都需要在后端查询图片的路径，返回给前端，前端根据路径加载图片

复制代码

/**
 * 获取缩略图
 * @param $site_id
 * @param $image
 * @param $thumb_type
 * @return mixed
 * @throws Exception
 */
function get_thumb_images($site_id, $image, $thumb_type = 'all', bool $is_throw_exception = false){

    return (new CoreImageService())->thumb($site_id, $image, $thumb_type, $is_throw_exception);
}

插件开发中，怎么引用资源文件

在插件中，引用资源文件要用addon_resource方法。

复制代码

/**
 * 获取插件对应资源文件(插件安装后获取)
 * @param $addon  //插件名称
 * @param $file_name  //文件名称（包含resource文件路径）
 */
function addon_resource($addon, $file_name)
{
    return "addon/". $addon. "/". $file_name;
}

开发插件的时候，程序的开发阶段，资源文件的位置一定要放在public/addon/hello_world下。如果没有这个目录，需要手工创建。在hello_world（插件名）下创建子目录也是可行的。插件中，必须通过下面的方法调用资源文件addon_resource( "hello_world", "style.css"); 这样就可以调用资源文件了。

插件开发完成，必须把该目录下的所有文件拷贝到hello_world插件的resouce目录下面addon/hello_world/resource,这样做的作用是，插件发布或者复制给别人使用时，使用者在安装插件的时候，安装程序会自动把该目录下的文件复制到目标计算机的同样的位置。

生产环境编译打包处理步骤

开发者开发要进行一下几个步骤打包发布

admin端

安装依赖：npm anstall 开发运行：npm run dev 打包编译：npm run build

框架admin端（npm run build)编译过的目录要拷贝到niucloud\public的admin下的

wap（手机端）

（因为是saas模式，一套手机端代码，对于不同站点的域名解析是不同的，暂时功能还没开发完善，所以需要开发者手工修改打包后的小程序源码内容，开发完毕后，框架会自动完成代码的修改）

Hbuilder工具，发行------>网站

web（电脑端）

安装依赖：npm install 开发运行：npm run dev 打包编译：npm run generate

修改编译后的index.html文件npm run generate

复制代码

const match = location.href.match(/\/web\/(\d*)\//);
baseURL:match ? `/web/${match[1]}/` : '/web/'

生产环境搭建步骤

视频地址：生产环境搭建步骤

插件安装时npm，composer检测不可用问题处理

开发者或者用户在安装插件时，有时候会出现composer,npm检测通不过的问题

一般出现这种问题有两个方面的原因

node.js 未安装，composer未安装或者开启
node.js安装，但是环境变量配置有问题，命令行无法在当前目录运行

解决方法如下：

Linux操作系统

宝塔安装时记得要制定Node.js版本（一般v16.0.0以上）,这里以v18.17.0为例

下载的Node.JS 地址在 /www/server/nvm/versions/node/v18.17.0/bin

php-fpm需要修改配置增加一行env[PATH] = /usr/local/bin:/usr/bin:/bin:/www/server/nvm/versions/node/v18.17.0/bin

Window操作系统

添加环境变量

这样处理，基本上可以验证通过了

上传图片大小限制修改

上传图片的大小限制可在根目录config/upload.php中修改，位置如下：

插件uni-app开发

工具：Hbuilder开发工具；

插件uni-app开发

1、在开发商端创建插件，安装插件（本地安装）。

2、将插件的uni-app源码导入到开发工具中，即可进行二次开发。插件的uni-app源码开发目录如下：

开发过程中，可直接在HBuilder中运行到浏览器查看实时效果，不需要一直在框架中调试。

3、整体开发完成后，将开发文件打包整理，放到根目录niucloud/addon/插件名/uniapp源码下，目录如下：

需要注意的是，不可以随意卸载插件，否则会导致开发的相关内容全部丢失。

菜单语言包

菜单语言包是按照menu key来定义的，系统在进行展示菜单会先寻找对应菜单key值对应的语言包，语言包未定义寻找对应菜单名称显示。比如英文显示菜单，如果英文语言包中有菜单下面对应key的语言定义会按照语言包取值显示，如果没有就取值菜单表的菜单名称了。

菜单表增加语言字段实际感觉不好维护，一方面语言肯有多种，除非确定哪种语言。另一方面修改起来也不方便，放在语言包可以统一管理，只要菜单key对应好语言就行。

自定义端口开发

自定义端口开发NIUCLOUD框架目前有web，uni-app，admin这三个端口。有时候我们有这样的需求，在一个应用或插件中，希望开发一个师傅端，一个用户端，或者希望开发一个收银台POS端口。NIUCLOUD框架的设计中是完全支持的。这个自定义的端口可以是把现有的web，uni-app复制出来一份修改，或者是基于自己的前端架构体系完全独立开发。

实现步骤如下：

1.在插件的info.json文件中，添加如下端口描述节

复制代码

{
  "title": "商城系统",
  "desc": "实物虚拟商品，订单，物流同城配送，门店自提",
  "key": "shop",
  "version": "1.2.0",
  "author": "niucloud",
  "type": "app",
  "support_app": "",
  "port": [
    {
      "name": "doc",  
      "title": "文档管理",  
      "command": "npm i;npm run docs:build", 
      "outDir": "dist/build/h5"   
    }
  ]
}

要注意，port节是一个数组，支持在本插件或应用中添加多个端口

复制代码

  "name": "doc",   // 端口名称 需与端口目录保持一致
  "title": "文档管理",  // 端口标题
  "command": "npm i;npm run docs:build",  // 编译命令
  "outDir": "dist/build/h5"   // 编译文件输出目录相对于端口源码根目录

自定义端口的实际文件夹目录的名称需要与info.json中完全一致对应

2.在插件的app\config文件夹下添加路由文件route.php文件

复制代码

use think\facade\Route;

Route::rule( rule:'doc', function() {
      return view( template: app()->getRootPath().'public/doc/index.html');
})->pattern(['any'=> '\w+']);

通过上面的步骤，插件在云安装，云编译的时候，系统会自动把该自定义端口，按照command命令指定的格式，编译到outDir目录下。如果是开发者本地编译和运行，只要执行第三个步骤就可以，第一二步不需要。