用惯了 uniapp 我又用 wap2app 接到一个外包项目，现在已成功上线，分享一下踩过的坑！

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 38 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近合作了一个客户，需求是把现成的这种网站包装成 App ，在各大应用商店也能下载，做用户留存。

需求不复杂，现在已经完工了，客户指明要使用 wap2app 这种技术，本来之前一直是用 uniapp 开发 app 的，一下子调整到 wap2app 还不适应。

别无他法，唯有熟读文档，文档东西不多，wap2app 包装起来非常简单，但是有一些东西文档并没有，分享一下往后来人避之！

1. 增加底部原生选项卡，屏蔽 h5 选项卡，底部选项卡怎么设置都不对？ 解答：底部选项卡每个选项都要单独匹配 matchUrls

2. android 和 ios 顶部状态栏时有时无？ 解答：manifest.json 文件中对 statusbar 单独设置

"plus" : {
        "statusbar" : {
            "style" : "dark",
            "background" : "#F7F7F7",
            "immersed" : "supportedDevice"
        }
}

3. 隐藏 H5 右侧滚动条 解答：页面 js 中设置代码

function init() {
	const ws = plus.webview.currentWebview()
	ws.setStyle({scrollIndicator:'none'})
}

init()

4. 没办法分享朋友圈？ 解答：不要用 plus 中 sendWithSystem 的 api ，用这里的方案：原生分享 - wap2app 教程

5. ios 底部选项卡和手机 dock 重叠？ 解答：cliend_index.html 中调整高度

.tab {
  height: 66px;
}
.tab-item {  
  color: #444444;//选项卡文字默认 
  height: 66px;
  padding-bottom: 16px;
}

6. 头部导航栏需要换成图片 logo ？ 解答：借助 plus 功能，绘制图片，https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

function init() {
  document.querySelectorAll('.kfwrapbox')[1].style.display = 'none'
  const ws = plus.webview.currentWebview()
  const nView = ws.getTitleNView()
  nView.drawBitmap('/icons/logo.png',{},{left: '35%', top: '10px', width: '98px', height: '30px'})
  ws.setStyle({scrollIndicator:'none'})
}

init()

7. ios 打包后提示 Prompt:Unable to connect to server. please check network settings 解答：这个是最难搞的问题，ios 未授权网络访问前 app 是没网的，方法是监听网络状态变化，授权网络访问后重启应用

8. ios 打包后进入 app 白屏？ 解答：使用 IOS UIWebview

事后处于好奇我又分析了一下这个项目的商业模式发现还挺好的，看前台数据基本上已经实现盈利了。它的市场定位是县城级，我们都知道做比较大的生活平台是谁，58 同城嘛！但是县城这种他覆盖有限。

目标用户呢就是县城内的居民、商户、企业。

平台能提供需信息发布，像劳动力、服务、商品等、还有信息匹配与推荐、交易撮合与支付，根据县城的特点，平台可以提供一些本地化的服务，如农产品直销、家政服务预约、二手物品交易等。

盈利模式主要是广告收入：首页位置展示广告、发布消息置顶向广告主收取费用。

因为第一次合作，客户担心风险并且需要开发票，走的是平台，现在已经结清了项目款。

真心佩服这些有头脑的老板，脑子是真好使！

最后说一句，uniapp 、wap2app 真的是良心出品，快速做项目还得看它。