多端口项目,整合在一个项目中运行,个人心得

时间:2024-04-02 13:12:05

最近接手了一个项目:将uniapp编写的两个APP端整合在同一个app中运行的项目,端口不同,两个app界面效果图也有些差别;
项目需求:用户注册后,跳转到选择身份界面,选择好身份后会跳转到对应的界面;

思路:(前期自己想的有些复杂,而且多次掉坑;后经朋友讲解,并重新捋顺思路,结合下图)
多端口项目,整合在一个项目中运行,个人心得

步骤1:前期先整合两个端口的接口与配置页面路径,可以放在同一个文件夹内(注意:由于是两个端口,合在一起,不免会重新命名重复等一些问题,前期需要规划好);

步骤2:由于两个界面底部TabBar内容不一样,此时建议在components内封装两个,pages.json中原生的tabbar建议禁用

多端口项目,整合在一个项目中运行,个人心得
components/tui-tabbar/tabbar1.封装的内容如下:
(暂时省略,后期补全)

步骤3:可以将两个端口的页面代码在pages中分别新建两个文件夹存放连个端口的对应文件:home1,home2(页面命名切记不要重复,避免覆盖等问题)
多端口项目,整合在一个项目中运行,个人心得
步骤4:在pages文件夹中新建的两个端口文件,分别新建一个index.vue文件调用封装的tabbar组件及页面文件,
(相应代码,暂时省略,后期补全)

步骤5:根据需求事项对应跳转,并判断

未完待续…