流应用类似原生体验，因此首先要求wap站的UI风格是App化的，在下图示例中，
左侧为超链接方式的M站，右侧是app风格的M站

wap2app优化UI展现，主要分为几大类，本文逐个说明。

去wap化展现

wap2app需要将一些明显带有wap特征的元素给去掉，主要包括：

• 顶部导航条（标题栏）：因为wap2app默认使用原生导航条，若不去除，会显示双标题；
• 原生App下载引导：包括下载banner、仅原生App才支持的业务，流应用是一种独立的发行模式，不允许给原生导流，否则无法通过上线审核；
• PC/mobile版本切换链接
• 版权信息：包括icp备案及版权说明等

优化方案参考如何在流应用环境下去wap化展现

图片全屏预览

wap2app框架支持将页面图片全屏展示，全屏后支持双指缩放；在 sitemap.json 中，配置目标 webview->easyConfig->previewImage 节点。

{  
  "webviewId": "detail",  
  "easyConfig": {  
    "previewImage": [  
      {  
        "gallerySelector": "#slider", //图片组父容器选择器  
        "imageSelector": "img", //图片img节点的选择器  
        "loop": true, //是否支持循环预览  
        "indicator": "number" //图片指示器样式  
      }  
    ]  
  }  
}

下拉刷新

下拉刷新在App中是普遍需求，但鉴于性能体验，很多M站不支持下拉刷新；wap2app弥补了这块缺陷，可通过简单配置，实现原生下拉刷新，如下为刷新效果：

wap2app可通过 webview -> webviewParameter -> pullToRefresh -> support 节点配置当前webview是否启用下拉刷新，默认为不启用；如下为示例代码：

{  
  "webviewId": "pullToRefresh",  
  "webviewParameter": {  
    "pullToRefresh": {  
      "support": true  
    }  
  }  
}

概述

wap2app默认会以新窗体的方式打开每个要展现的url，每个新窗体默认都带有原生的导航栏。

开发者可以通过titleNView节点配置导航栏的背景色、标题内容、标题颜色、标题文字大小；wap2app默认生成灰底黑字的导航栏，参考sitemap.json中如下代码：

"global": {  
    "webviewParameter": {  
        "titleNView": {  
            "backgroundColor": "#f7f7f7",//导航栏背景色  
            "titleColor": "#000000",//标题颜色  
            "titleSize": "17px"//标题字体大小  
        }  
    }  
}

开发者可根据产品整体风格设置导航栏样式，比如希望黑底白字，则如下修改sitemap.json代码即可：

"global": {  
    "webviewParameter": {  
        "titleNView": {  
            "backgroundColor": "#1B1A1F",//黑色背景  
            "titleColor": "#FFFFFF",//白色文字  
            "titleSize": "17px"//标题字体大小  
        }  
    }  
}

如上设置为应用全局设置，开发者可以在页面组中为每个页面组单独设置，比如详情页面导航栏标题设置为“新闻详情”，如下：

{  
    "global": {  
        "webviewParameter": {  
            "titleNView": {//通用导航栏配置  
                "backgroundColor": '#1B1A1F',//导航栏背景色  
                "titleText": '我的项目',//导航栏标题  
                "titleColor": '#FFFFFF',//标题颜色  
                "titleSize": '17px'//标题字体大小  
            }  
        }  
    },  
    "pages": [  
        {  
            "webviewid":"detail",//详情页  
            "matchurls": [  
                {  
                    "pathname": "R:\\/detail\\/\\d+"  
                }  
            ],  
            "webviewParameter": {  
                "titleNView":{  
                    "titleText":"新闻详情"  //单独设置新闻详情页的标题内容  
                }  
            }  
        }  
    ]  
}

在有原生导航条的情况下，wap站就不再需要显示HTML5导航栏，否则会出现原生、HTML5双标题并存的情况。

为避免双标题并存的情况，需要去除wap版的导航栏，参考wap站修改-去除M站的指定DOM元素教程。

原生导航条的启用/禁用

可以通过配置titleNView为false，来禁用原生导航条。

wap2app项目首页默认不启用原生导航条，因此新建wap2app项目生成的sitemap.json中，首页下的titleNView配置为false，如下：

"pages": [  
    {  
        "webviewId": "__W2A__m.example.com",//首页  
        "matchUrls": [  
            {  
                "href": "http://m.example.com"  
            }, {  
                "href": "http://m.example.com/"  
            }  
        ],  
        "webviewParameter": {  
            "titleNView": false  //首页不使用原生导航条  
        }  
    }  
]

如果首页也需要原生导航条，则在首页的配置规则中，配置titleNView参数即可，例如：

"pages": [  
    {  
        "webviewId": "__W2A__m.example.com",//首页  
        "matchUrls": [  
            {  
                "href": "http://m.example.com"  
            }, {  
                "href": "http://m.example.com/"  
            }  
        ],  
        "webviewParameter": {  
            "titleNView": {//首页启用原生导航条  
                "backgroundColor": "#FF00FF",//导航栏背景色  
                "titleColor": "#ffffff",//标题颜色为白色  
                "titleText":"wap2app项目首页"//导航条文本  
            }  
        }  
    }  
]

注意：在wap2app项目中：

• 首页可以不使用原生导航
• 其余非首页均建议使用原生导航

title文字显示的专项说明

如果配置了titleText，那么该Webview下match到的所有页面，都是这个title文字。
如果不配置titleText，则titleNView默认显示的标题文字就是网页的HTML里的<title>节点里的内容。
如果网页title的文字不适合显示到页面标题栏上，又不想使用固定文字，那么：

1. 常规建议是修改wap页面的title节点，在wap2app环境的ua下给出不一样的title。
2. 也可以在wap2app项目根目录下的app.js里编程，动态修改title文字。当然这种编程不止是能修改标题文字了。

透明渐变导航栏

wap2app框架提供了一种漂亮的导航栏样式，页面刚开始是顶部沉浸式图片，向下滚动后渐变出现title。
因为是动态效果，截图无法表达。
可以在流应用中点击唯品会的商品详情页面或大众点评的团购详情页面中体验。
也可以看这个视频第32-35秒：https://v.qq.com/x/page/k05051mc143.html
设置透明渐变导航栏，需要在titleNView节点下增加type:'transparent'，如下是一个示例：

{  
    "webviewid":"detail",//详情页  
    "matchurls": [  
        //详情页url匹配规则  
    ],  
    "webviewParameter": {  
        "titleNView":{  
            "titleText":"新闻详情",  //单独设置新闻详情页的标题内容  
            "type":"transparent",//透明渐变样式  
        }  
    }  
}

（在唯品会示例中，除了'transparent'的titleNView，还使用了subNView里的原生ImageSlider）
注意透明渐变导航栏模式对上面的buttons的字体设计有更高要求，需要在半透明状态下和不透明时，均保持好看。

完整的titleNView配置参数

熟悉DCloud产品的开发者都知道，DCloud在手机端的核心强化引擎是HTML5+Runtime，它遵循HTML5Plus规范，提供了超级强大的功能。而wap2app的底层引擎其实也是5+Runtime引擎。

wap2app里的titleNView就是HTML5Plus的Webview里的titleNView，完整参数配置可以参考HTML5Plus规范：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

下面一个示例，演示如何在原生导航栏右侧绘制一个分享按钮，并添加按钮点击事件：

{  
    "webviewId": "page1",  
    "matchUrls": [  
        //page1 url匹配规则  
    ],  
    "webviewParameter": {  
        "titleNView": {  
            "titleText": "原生标题栏",  
            "buttons": [  
                {  
                    "float": "right",  
                    "fontSize": "27px",  
                    "fontSrc": "__wap2app.ttf",//wap2app内置字体文件  
                    "text": "\ue602",  
                    "onclick": "javascript:plus.webview.getWebviewById('page1').evalJS('myshare();')"  
                }  
            ]  
        }  
    }  
}

运行结果如下：

关于onclick注意事项：

• 仅支持字符串类型，且以javascript:为前缀
• 必须先获得对应的webview,然后以evalJS的方式执行；evalJS是Webview的标准api，具体api参考http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject，在里面搜evalJS。
  evalJS的意思就是让某个Webview运行其内部的某个js函数。
  示例中，myshare()这个函数写在id为page1的页面内，故需通过plus.webview.getWebviewById('page1')获得目标webview对象，并且命令这个Webview运行myshare这个函数；
• 目标页面的函数必须是全局函数（通过window可访问的的函数）；示例中调用的myshare方法，需要写在原生标题栏所属的webview页面中；
• 真机运行时，首页webview的id为"HBuilder"，若为首页原生标题增加按钮，则建议使用plus.webview.getLaunchWebview().evalJS('myshare()')；
• 注意在onclick后面的js里，不能写plus.webview.currentWebview()。因为sitemap不运行在任何Webview下，在sitemap里写的js其实是和app.js一起运行在一个独立的、不可见的本地Webview中。所以若需要操作当前titleNView所在的Webview，也必须指定明确的WebviewID。

wap2app内置字体：
titleNView上经常需要配置的字体图标，wap2app已经内置，字体及unicode编码如下：

• 向右箭头：\ue600
• 向左箭头（返回箭头）：\ue601
• 分享图标：\ue602
• 收藏图标：\ue604
• 主页图标：\ue605
• 关闭图标：\ue650

开发者也可以引入自定义字体图标，注意text属性需要设置为unicode字符，必须以'\u'开头，如"\ue123"（注意不能写成"\e123")。
DCloud的mui框架里有常用字体，可以复制到wap2app项目下使用。
网上类似的常用字体库很多，也有很多图标转字体的工具，比如https://icomoon.io/app/#/select。
titleNView支持图片，具体见下面的章节。但我们仍然推荐使用字体，字体在点击变色、屏幕适配上更具有优势。

通过js动态调整titleNView

如果是简单修改titleNView，那么重新设置Webview的style即可。
因为Webview有setStyle方法，如下代码可实现js修改title文字。

plus.webview.currentWebview().setStyle({titleNView: {titleText: 'new text'}})；

同理，titleNView的每个配置都可以这样修改。
这段代码可以放在你的M站页面里，也可以放在appendJS里。

除了简单的用法，titleNView还支持像画布一个任意画图写字、内嵌输入框。
因为titleNView继承自plus.nativeObj.view，这是一块纯原生的画布，想怎么画都可以。
如果你愿意研究这些高级技巧，可以继续看：
首先通过js获取titleNView对象，得到一个NView对象，参考http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.getTitleNView
然后按照下面的api操作这个NView对象，绘图、写字、画区域、嵌输入框都可以，就是一块画布。
http://html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

FAQ

Q：如何移除原生导航栏
A：原则上不建议移除原生导航栏，原生导航栏也是优化的比较重要的一部分。http://ask.dcloud.net.cn/question/50018

Q：首页titleNview配置的按钮怎么添加监听事件
A：http://ask.dcloud.net.cn/article/12622

wap2app是什么

wap2app 是一个将现有M站（也称手机wap站，区别于pc的web站）快速发布成 App 的增强方案，通过 DCloud 的 wap2app 框架，进行简单的配置和必要的编程，即可完成M站的体验强化，达到原生应用的功能体验，进而再发布为原生安装包或流应用。

名词解释

• wap 这里并不是严格意义上的 wap 站点，是对所有移动站点的统称。
• 2 即 to
• app 单指移动应用

连起来，就是“将移动站点转换成移动应用”。

产品特点

• 提供了原生渲染能力，让界面渲染速度和动画效果，达到原生体验（优化后的体验有多好，可以滚动到文档底部看“案例体验”章节）
• 提供丰富的系统原生能力（定位、分享、支付、推送等），达到原生功能
• 通过 json 配置页面规则和强化规则，工作量低，学习成本低
• M站仅需稍作修改，改造成本低
• 强化部分和之前的M站解耦合，M站后续升级业务逻辑，生成的App自动含有更新后的业务逻辑

本地强化和M站的关系

理解这段很关键 x 3
使用 wap2app，开发者可复用M站之前的所有业务逻辑，仅需进行必要的强化，而之前的注册、购物、查询等所有业务逻辑全部复用。
开发者所做的强化工作，分为：

1. wap2app 客户端的配置编程工作
2. 原M站的改造工作

注意这2块是分开解耦的。

自 HBuilder 8.8.3 起，新建 wap2app 项目，会自动生成项目必须的模板文件，强化工作主要在这里做。
Tips：这些 json 或 js 是部署在手机客户端的，并非M站的服务器上。

开发者无需、也不能把M站的项目源码导入到 HBuilder 的 wap2app 项目里，M站依旧以之前的模式部署在远程服务器上。

在 HBuilder 中把新建的 wap2app 项目选择打包为原生应用或发布为流应用时，wap2app 项目下的这些强化配置和编程文件，是存在原生 App 包里的，安装后直接在手机的本地存储区里运行，可以理解为是 C/S 模式的 Client 部分。而M站仍然是 B/S 模式的，并不会将M站的资源打包到 App 包里，而是从服务器加载在线的M站页面。

手机端实际运行时，DCloud 的框架会自动把本地的强化配置和在线的M站融合在一起，在用户眼里是一个 App 的感觉。

强化工作

1. wap2app 本地端的工作：通过框架提供的 sitemap.json 文件，描述页面关系和动画强化方案，以达到原生的窗体切换效果。当 sitemap.json 配置无法满足复杂需求时，可使用 app.js 编程进行增强处理。
2. M站的改造工作：针对 App 运行环境（可根据UA区分），进行适当的改造。包括去掉一些 App 里不应该出现的页面元素（如底部的电脑版链接，或某些原生 App 下载引导等）。
3. 扩展原生的能力：如果需要调用 DCloud 的 HTML5+ 引擎 扩展的原生能力，比如M站之前无法实现的微信分享、推送、原生支付等，需要进行必要的编程工作。这部分工作，可以在 wap2app 本地端实现，也可以直接在M站实现（注意判定当前运行环境）。

Tips：强化工作的第3点，需要开发者了解并学习一部分 HTML5+App 开发的知识，请阅读文档树的 HTML5+ 及 App 教程 部分。

强化和新开发的区别

新开发一个 App，是大多数编程人员常见的思路，比如新开发一个微信小程序，学习它的每个 API，重头做起。
但使用强化框架，并非重头做起。它的学习方式和开发者过去的习惯可能有所不同，比如开发者时刻要清楚什么工作在客户端强化，什么工作在M站改造。但如果掌握了，它的投入产出是更高的。

第一个wap2app工程

下载/登录开发工具

前往 dcloud.io 根据自己的操作系统，下载相应的 HBuilder 包并解压，无需安装。
首次使用需注册一个开发者账号，方便后续的打包以及应用管理。

创建项目

按照如下步骤新建 wap2app 工程

• 顶部菜单，文件 -> 新建 -> Wap2App
• 输入应用名称、wap 站首页地址，点击“完成”

工程建成后，默认目录结构如下：

每个文件的作用如下：

• sitemap.json：wap2app核心配置文件，wap2app的大部分工作在该文件中完成
• app.js：为弥补sitemap.json的格式限制，提供的基于JavaScript的可编程增强方案
• manifest.json：工程参数配置，比如icon、splash图等（打开该文件后有帮助链接）
• client_index.html：内置静态页面，若首页有选项卡，需在该文件中配置
• %APPID%.append.css：本示例中 APPID 为 “W2Am.example.com” ，故默认创建了一个 W2Am.example.com.append.css 文件；该 css 文件负责提前修饰首页的样式，比如隐藏M站首页的原生下载引导等 DOM 元素。

Tips：以上文件的名称以及位置，不可修改或调整。

代码编辑

打开项目，会默认进入开发视图。从左到右，依次是项目管理器、代码编辑区。

从sitemap.json的编辑开始，参考http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/12755
进行配置及必要的编程，然后就可以真机运行。

真机运行

将手机通过USB口连接电脑，可以将wap2app项目代码同步到手机上，实现真机运行，具体参考调试方式介绍二 真机运行

注意：每次在HBuilder保存修改文件后，会自动编译并同步到手机端；wap2app页面管理栈较为复杂，每次修改配置规则后，会自动重启手机端的调试App，如下：

新建的项目直接运行是看不出优化效果的，需要参考后续教程配置好sitemap，优化好体验。

真机运行是一个发布前必要的调试环境，不停开发、调试、看日志、看效果、完善迭代。成熟后即可正式发布。

应用发布

目前支持将wap2app项目打包成原生安装包（iOS平台的ipa安装包、Android平台的apk安装包），也支持发布到流应用平台。

在HBuilder中，点击顶部“发行菜单”，选择发行方式，如下：

站点唯一性原则：
为保证wap站所有者的版权归属，一个wap站在流应用平台上仅允许发布一个流应用；wap2app会自动解析待转换的wap站首页地址，分析出wap站域名（如：m.example.com），然后使用如下格式：W2Am.example.com作为appid，appid作为流应用的唯一标识，不允许重复。因此若在发布测试版流应用时，平台发现该appid已存在，会提示开发者，此时开发者有两个选择：

• 该appid的原所有者和开发者是一个企业（团队）的成员，可以联系原所有者，将开发者设置为“团队成员”；参考协作者设置教程
• 该appid的原所有者和开发者不是一个企业（团队）的成员，但该应用（域名）确实归属当前开发者所属的企业（团队），此时可以“申请认领”，平台审核通过后，会将该流应用分配给开发者；

案例体验

如下视频中，在同型号的2款手机中同时操作原生应用和基于wap2app优化的M站，可以看出wap2app版可以达到原生应用的流畅度。
参考视频

FAQ

Q：没有wap站，PC可以转换吗？
A：可以。工作量更大而已，需要处理更多页面的样式修改。可以在wap2app本地直接新做样式，隐藏PC上里一些不需要的元素，修饰一些不合适的样式。

Q：我的wap站风格是纯web感觉的，比如列表项都是下划线的超链接，是否可以强化改造？
A：可以。你可以先调整wap站的风格，也可以wap站风格不动，在wap2app本地调整风格。

Q：我的wap站是SPA（单页）方式，是否可以强化
A：SPA方式的wap站如果窗体切换是div动画，没有url跳转，那么就不能通过简单的sitemap.json的配置来强化了。因为sitemap是基于url的。只能在app.js里编写更多代码来处理。如果你的页面dom不复杂，dom动画也不卡，也可以不做窗体切换强化，直接打包。

Q：wap2app应用可以本地打包或嵌入其它应用内么？
A：不支持本地打包，只能通过云端打包成相应的apk/ipa。同时，也不能嵌入到其它应用中。

Q：可以使用腾讯X5浏览器引擎吗？
A：可以使用，使用方式详见：https://ask.dcloud.net.cn/article/36806。使用了X5，有2个好处：1、X5有网络劫持优化，可以减少被劫持的概率；2、X5自带原生视频播放，比webview的video在功能、体验上更优秀。

Q: wap2app可以上Appstore吗？
A: 不行。苹果要求强制wkwebview，而wap2app需要使用uiwebview。导致iOS上的wap2app可以真机运行，但没法上Appstore。

学习建议

文档

在PC浏览器中访问http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/1244，按左侧目录树顺序，通读所有文章。
尤其要认真读概述以理解理念。
除了NView稍有难度外，学习掌握其他环节只需要半天时间，如果你的网站不复杂，开发也只需要1、2天。
可以先花1、2天时间做一个基础版，然后再研究NView，以达到更好的体验。

HelloWap2App

在 HBuiler 中新建 wap2app 工程 -> 选择模板 -> Hello Wap2App 示例，示例工程的源码与文档结合，可以更好地学习和理解。

QQ交流群及问题反馈

wap2app 交流 QQ 群：320865692

欢迎大家在 ask社区 上反馈问题或提交Bug，问答主力会在 ask 社区。

若问题不好重现，建议将 wap2app 发行到流应用测试平台，并提供 appid 及测试二维码在问题帖子中，DCloud 工程师会定期跟进处理相关问题。

wap2app 本身是免费的工具产品，开发者可以免费使用。

如图哦，我就成叠起来就酱紫了。

我是第一次用，而且是边学边用，头大了2天，从用这个功能到动态加载，连看demo再搜度娘，终于实现了需要的功能！
做动态加载后，也遇到了搜索不能的问题，看网上解决了，就是加载完数据之后，再搞一下
window.indexedList = new mui.IndexedList(list);
能搜索了，但是搜索不准确，按拼音什么的搜索，各种找不到，准备放弃的，无意间看见了某大神的回复（页面关了，找不到大神的名字了……）：
把
window.indexedList = new mui.IndexedList(list);
改为
mui("#list").indexedList().findElements();
哦了，搜索也准确了，模糊查询什么的都测试通过了！
希望对和我一样的新手有帮助！
好几个小时了，就一直翻来覆去的找原因！知道是这句的原因，但是不会写……
新手的悲哀……

非5+页面，可以用Iframe 模拟多页面，这样可以在PC浏览器打开APP页面。
今天只是简单搞了一下plus.webview, 的create，hide，show
看看大家有没有兴趣，可以考虑发布一个完整的轮子，方便多端发布

var PlusWebview = {}  

    function PlusIframe(plus) {  
        function IframeView(id){  
            this.id = id  
        }  
        IframeView.fn = IframeView.prototype  
        IframeView.fn.create = function(opt){  
            var self = this  
            self.url = opt.url  
            self.style = opt.style  
            self.iframe = createIframe('.mui-content', opt)  
            //createIframe2(self.id)  
            return self  
        }  
        IframeView.fn.show = function(){  
            this.iframe.style.display = "block"  
        }  
        IframeView.fn.hide = function(){  
            this.iframe.style.display = "none"  
        }  
        IframeView.fn.evalJS = function(js){  
            var win = this.iframe.window || this.iframe.contentWindow;  
            win.eval(js)  
        }  

        plus.webview.getWebviewById = function(id){  
            return PlusWebview[id]  
        }  
        plus.webview.create = function(url, id, style) {  
            var v = new IframeView(id)  
            PlusWebview[id] = v.create({url: url, id: id, style: style} )  

            return v  
        }  
        plus.webview.show = function(id) {  
            //hide others  
            for (var _id in PlusWebview){  
                if(_id == id){  
                    PlusWebview[_id].show()  
                }else{  
                    PlusWebview[_id].hide()  
                }  

            }  
        }  
        plus.webview.hide = function(id) {  
            PlusWebview[id].hide()  
        }  
    }  
var createIframe = function(el, opt) {  
        var elContainer = document.querySelector(el);;  

        var wrapper = document.querySelector(".mui-iframe-wrapper");  
        if(!wrapper) {  
            // 创建wrapper 和 iframe  
            wrapper = document.createElement('div');  
            wrapper.className = 'mui-iframe-wrapper';  
            if(typeof opt.style.top !== 'string') {  
                opt.style.top = '0px';  
            }  
            if(typeof opt.style.bottom !== 'string') {  
                opt.style.bottom = '0px';  
            }  

            for(var i in opt.style) {  
                wrapper.style[i] = opt.style[i];  
            }  
            elContainer.appendChild(wrapper);  
        }  
        var iframe = document.createElement('iframe');  
        iframe.src = opt.url;  
        iframe.id = getIframeId(opt.id);  
        iframe.name = opt.id;  
        wrapper.appendChild(iframe);  
        return iframe  
    }

第一步：cmd [必须管理员身份]
netsh interface portproxy add v4tov4 listenaddress=192.168.1.105 listenport=9999 connectaddress=127.0.0.1 connectport=62001

说明：
192.168.1.105 为 局域网中的设备IP
127.0.0.1 为模拟器IP或安卓设备的IP
connectport=62001是夜神模拟器的端口，安卓原生设备为5555
listenport=9999 为将来要连接的端口号【可定义成别的】，此端口如果连接不上，做防火墙进站规则 TCP，9999，所有网络都允许

第二步
开发的电脑 cmd:
d:
cd D:\Program Files (x86)\HBuilder\tools
adb kill-server
adb connect 192.168.1.105:9999

找到hbuider tool下的adb工具：
连接到 192.168.1.105:9999 就可以了

此方法从原理上讲可以连接局域网中所有安卓设备。

连真机可以百度哈

1.从个推官网下载最新版SDK

libGeTuiSdk-1.6.2.0-noidfa.a  
libGtExtensionSdk-1.1.0.a

2.更名为

libGeTuiSdk.a  
libGtExtensionSdk.a

3.将这两个文件(libGeTuiSdk.a、libGtExtensionSdk.a) 导入到5+SDK/Libs目录下替换掉原来的文件

4.将这两个文件移动到XCode Framewoks下

5.工程里需要导入一下几个系统库

 "libz.dylib",  
   "libsqlite3.0.dylib",  
   "AVFoundation.framework",  
   "CoreTelephony.framework",  
   "Security.framework",  
   "SystemConfiguration.framework",  
   "MobileCoreServices.framework",  
   "CoreLocation.framework",  
   "UserNotifications.framework"

引入系统库方式请参考此文档:http://ask.dcloud.net.cn/article/941

//原生JS代码解决picker与软键盘冲突
//初始化picker
var picker = new mui.PopPicker();

//给picker设置列表参数
picker.setData([{value:'zz',text:'智子'}]);

/点击'#inputPicker'触发显示picker控件/
document.getElementById('inputPicker');.addEventListener('tap', function(event) {
pickerBlur(); //处理ios失去焦点的坑
picker.show(function(items) {
console.log(selectItems[0].text);//智子
console.log(selectItems[0].value);//zz
});
}, false);

/让当前页面所有input失去焦点,关闭软键盘/
function pickerBlur(){
var inputs = document.getElementsByTagName("input");
for (var i=0;i<inputs.length;i ) {
inputs[i].blur();
}
}
/当手机先触发软键盘，input未失去焦点，再点击picker控件，---此时呈现的BUG为软键盘和picker控件同时呈现，理想解决结果，先让软键盘消失，再呈现picker控件。/
//初始化获取当前手机可视高度
var windewHeight = document.body.clientHeight ;

//获取当前页面全部pickerBox
var poppicker = document.getElementsByClassName('mui-poppicker');

//获取其他类型pickerBox --- 作者在二级联动城市的时候使用的
var dtpicker = document.getElementsByClassName('mui-dtpicker');

//作者在网上查询到最神奇的软键盘监控方法！---软键盘打开的时候，会让浏览器的可视高度发生改变。
window.onresize = function(){ //window.onresize为浏览器宽度发生变化时触发的事件

// 那么，如果页面当前高度不等于初始化的高度时,意味着软键盘正在打开。
if(windewHeight !=document.body.clientHeight ){
// 当软键盘打开的时候将mui-poppicker隐藏
if(!poppicker.length) return
for (var i=0;i<poppicker.length;i++ ) {
poppicker[i].style.display="none";
}
if(!dtpicker.length) return
for (var i=0;i<dtpicker.length;i ) {
dtpicker[i].style.display="none";
}
｝
// 相反的，当初始化的屏幕高度等于当前屏幕高度时，意味着软键盘完全收起。
else{
// 当软键盘收起0.15s后，再将mui-poppicker显示
setTimeout(function(){
if(!poppicker.length) return
for (var i=0;i<poppicker.length;i ) {
poppicker[i].style.display="inline";
}
if(!dtpicker.length) return
for (var i=0;i<dtpicker.length;i ) {
dtpicker[i].style.display="inline";
}
},150)
}
}

作者表示第一次写这类东西，有BUG欢迎指正

3.15是揭露造假者真面目的好时间，时隔2年，北京知识产权法院终于出了一审判决，认定apicloud公司虚假宣传，并判赔DCloud公司20万元。
20万元不多，重要的是大众终于可以看清apicloud公司的真面目了。

本案涉及的仅仅只是apicloud众多花式宣传中的2点：虚假的融资额、和并不能保护代码的所谓代码加密功能。
其实还有很多虚假宣传点，DCloud没有持续补充，那会让案子拖延更久。
但大众需要清楚，apicloud的各种花式宣传里，大多都不能信。

大多数315曝光企业，都有一个诚恳认错，真实悔改的声明。
但从今天apicloud官方公众号新声明来看，仍然充满了狡辩，这20万元的教训，并未让apicloud公司成为一家知错就改、真诚待人的公司。
我们对此表示遗憾。

不管是用户、开发者、媒体，大家渴望一个健康的产业环境，而不是每天需要花很多精力识别信息的真假。
希望所有从业公司，以此为鉴，停止虚假宣传，真诚对待你的用户和合作伙伴，把每天都当做3.15对待！

附法院判决书摘要。

使用了encodeurl（）解码，但是打包后百度地图还是无法调起。Android没有问题，真机调试的时候也可以调起百度地图APP

刚才遇到一个问题就是页面加上了mui-scroll和mui-scroll-wrapper类了，如下：
<div class="mui-content mui-scroll-wrapper" id="pullrefresh">
<div class="mui-scroll">
........
</div>
</div>
但是不出现滚动条，究查原因，是没有设置滚动区域，设置方法如下
mui.scroll("#pullrefresh") //设置id为pullrefresh元素为滚动区域