最近发现HBuilder又搞出来了一个wap2app的东西,很是感兴趣,于是就自己尝试了一下,虽然还有很多东西没弄懂,也有不少东西没实现,不过总算弄出来个东西。在此给大家分享一下。
mui是Hbuilder自己研发的一套框架,它可以制作三种app:
移动app:即与cordova一样将web的资源全部打包为本地文件,这样的app上线后不会再从服务器请求资源,每次更改需要重新上传新的app。
webapp:可以用浏览器打开,一般用手机浏览器使用或者微信公众号。
wap2app:这种是目前最常用的,就是用app原生代码先搭一个框架,然后我们的网页通过webview嵌入到里面,这时的网页是从服务器请求的,所以只要服务器的文件发生更改,就可以随时改变app里的内容了。
我们先打开‘文件’》‘新建’》web2app
wap站首页地址填写你的app首页地址。随后编译器会自动生成一个项目,在项目里面找到sitemap.json,这个文件是用来配置app里各个页面情况的。
首先是全局配置,里面的东西就默认的就可以了
"global": {//global为全局配置,与pages数组中webview对象呈继承关系 "webviewParameter": { "titleNView": { "autoBackButton": true, "backgroundColor": "#D74B28",//导航栏背景色 "titleColor": "#f7f7f7",//标题颜色 "titleSize": "17px",//字体大小 "splitLine": {//标题栏的底部分割线,默认不显示底部分割线 "color": "#D74B28", //分割线颜色 "height": "1px" } }, //在嵌入页面的同时插入css,可以取消以前网页的头部和底部并用原生代替 "appendCss": ".download,.mui-bar-tab,header{display:none!important;} .mui-bar-nav~.mui-content,.info,.dcontent{padding-top: 0!important;} .sdcontent{top:0!important;} " }, "easyConfig": { "quit": {// 参考文档 【http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12750】 quit "toast": { "showFeedback": false //默认为true } } } },
然后下面就是pages了,这个很重要,可以配置每一页的标题、导航、返回按钮等事件
{ //首页 "webviewId": "此处必填",// 注:此id应该和manifest.json中appid保持一致,一般会创建wap2app时自动生成,不可随意修改 "matchUrls": [// 参考文档 【http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12731】 { "href": "首页要显示的网址"//匹配规则,此处为精准匹配,当检测到为此链接时,使用此webview } ], "webviewParameter": {// 参考文档【http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12749】 "tabBar": {//选项卡配置,仅首页支持 "height": "51px",//选项卡高度,默认为50px "list": [//依次匹配,此处为首页的三个导航入口 { "url": "http://" }, { "url": "http://" },{ "url": "http://" } ] }, "titleNView": false//是否显示标题,此处不显示 } },
现在修改client_index.html,这个是生成首页底部选项卡的
打开编译器上方的真机调试
可以看到底部选项卡跟刚才的配置一样,而首页展示的内容为刚才配置的地址的web页面。
点击编译器顶部导航栏的发行,可以选择在线打包或者本地打包,本地ios的本地打包需要安装xcode,而Android则需要eclipse和java环境。
在这里面设置你的app的相关配置,比如封面,图标啊,需要获取的权限啊,开发者id啊等等,这里就不详细解说了。
从导航栏的发行-》打包状态可以看到
将打包好的app下载下来,安装在手机上: