uni-app 混合小程序的多平台开发配置该如何管理

uniapp项目中，即开发了web和app，又开发了小程序，pages.json如何隔离？

情况描述

• 若项目需要同时开发 H5｜APP 和 小程序，由于 小程序 和 H5｜APP 之间可能存在较大路由控制差别
• • 比如项目主攻 H5｜APP（独立登录之类的逻辑），而项目对于小程序，只需要开放部分模块的页面，而且是通过公众号链接跳转的
• • 这种情况下，我们当然是需要给小程序一个完全独立的 pages.json，避免影响原有的 H5｜APP 各项功能，有些过于复杂或者区别较大的页面，则通过共用组件之类的方式进行开发

关键目录和文件说明

• 这些目录和文件便是当前方案的核心思路

｜-- pages.js (webpack loader钩子文件，根据不同环境使用不同的pages.json)
｜-- pages.json （默认使用的 H5和APP 配置）
｜-- pages-wx.json （微信小程序 配置）

｜-- App.vue (H5和APP 入口组件)
｜-- AppWx.vue (微信小程序 入口组件)

｜-- main.js （应用主入口文件，其中编写了针对不同平台的 vue app 挂载逻辑，即包含引用 App.vue 或 AppWx.vue）

｜-- pages/ （该目录下放置 H5和APP 页面组件）
｜-- pages-wx/ （该目录下放置 微信小程序 页面组件）

【uni-app 微信小程序 开发避坑】

• uni-app 微信小程序动态 style 绑定不支持模版字符串拼接

❌
<view :style="`width:${w}px`"></view>
✅
<view :style="{width:w+'px'}"></view>

• uni-app 微信小程序动态 class 绑定不支持模版字符串拼接

❌
<view :class="`my-class my-class__${suffix}`"></view>
✅
<view :class="{'my-class':true}"></view>

• uni-app 微信小程序动态 key 不支持字符串拼接

❌
<view v-for="item in list" :key="`item_${item.flag}`"></view>
✅ 
<view v-for="item in list" :key="item.id"></view>

• uni-app 微信小程序 暂不支持动态组件（官方提示，可能正在开发吧）

❌
<component v-bind:is="componentName"></component>
✅
<!-- 只能写静态组件 -->

源码在此！

源码链接 -> 点击这里