uniapp同步开发h5+小程序双平台踩坑记录_uni项目路由配置h5和小程序兼容

最近做项目的需求是先发布h5，后续再开发上线微信小程序版，自然我选择了uniapp多平台打包，过程中也踩了一些坑。本篇文章记录了使用uniapp开发h5的注意事项，及打包成小程序需要兼容改动的内容。

1.需要在pages.json注册页面路由

在uniapp开发h5也要通过pages.json来注册路由，和小程序开发一样。pages数组中第一项表示应用的启动页，参考：https://uniapp.dcloud.io/collocation/pages。路由跳转和小程序一样使用uni.navigateTo。

因为小程序有主包2m大小限制，页面的分包最好也在h5开发时规划出来。

2.分别定义header

页面公共header也是在pages.json里设置的。因为需要针对两个平台分别进行设置，要用到uniapp的条件编译注释：微信小程序 // #ifdef MP-WEIXIN  h5 // #ifdef H5 最后都是以// #endif结束。这样uniapp就可以分别进行编译从而实现对不同平台的处理。

h5不需要header，因为已经有了浏览器头部，再设置header就会有两个。这里我们使用"navigationStyle": "custom"来取消h5的额外header。

微信小程序则需要设置header，如果你需要的是常规的纯色header，用navigationBarBackgroundColor设置背景色，navigationBarTextStyle设置文字颜色即可。header的文字会自动取前面页面路由里设置的navigationBarTitleText。

如果需要实现渐变，沉浸式header等设计，使用"navigationStyle": "custom"，然后配合uni-nav-bar或者写一个你自己的header组件。

"globalStyle": {
    // #ifdef MP-WEIXIN
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    // #endif
    
    // #ifdef H5
    "navigationStyle": "custom"
    // #endif
},

3.没有浏览器专用js对象

1. 没有浏览器专用的js对象，比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等对象。

如果你的代码没有直接使用这些，那很可能是引入的三方库使用了这些。如果是后者，去插件市场搜索替代方案。要知道非H5端的js是运行在一个独立的js core或v8下，并不是运行在浏览器里。

从HBuilderX 2.6起，App端新增了renderjs，这是一种运行在视图层的js，vue页面通过renderjs可以操作浏览器对象，进而可以让基于浏览器的库直接在uni-app的App端运行，诸如echart、threejs，详见：renderjs

这一条需要特别注意。如果自己代码或者第三方库使用了这些对象，项目会直接报错白屏。如果h5里一定要用，加上// #ifdef H5条件注释让它只适用于h5。

另一个问题是很多vue的第三方插件也不能用，虽然有个renderjs的方案，在小程序里并不推荐。解决方案是使用uniapp的官方扩展组件uni-ui，或者在官方插件市场里找。注意在h5里使用这些用到了浏览器对象的插件一样需要用renderjs，比如我这篇引入vconsole调试工具时：

uniapp解决vconsole无法正常使用-CSDN博客

 4.uni-ui组件使用相对路径图片的问题

在使用uni-list-item等组件时，比如你给缩略图thumb设置为当前页面的相对路径"../../../static/img/icon.png"，这样在h5里没问题，运行为小程序时就会发现路径的起始位置不是当前页面，而是从uni_modules开始找，所有组件用到的相对路径图片都会404。

这里我推荐在页面import引入图片，比如：

import iconImg from '../../../static/img/home/icon.png'，然后放到data里，最后:thumb="iconImg"

5.uni-ui组件自定义样式问题

这个问题真的很头疼，一些组件内找到的css名，自定义覆盖样式在h5里是正常的，小程序里很多就失效了，检查后发现有的组件的css名在h5里有，在小程序是没有的。而且在页面内使用:deep改样式有的可以有的不行。

最后比较好的解决方案是，给当前页面顶层定一个class名，比如<view class="feedback">，接着在common/uni.css或者别的公共样式里带上页面的class来定义，比如：

/* #ifdef MP-WEIXIN */
.feedback .uni-data-tree {
	width: 240rpx;
}
/* #endif */

注意css里也可以用条件编译注释，只不过要用css风格，变成了/* #ifdef MP-WEIXIN */

 

小程序开发其他相关问题见：

记录一些微信小程序开发的注意事项和坑-CSDN博客 

【微信小程序】登录授权流程 最新版, 用户信息接口已废弃！_微信小程序获取用户信息接口,无法授权登录-CSDN博客