使用mui制作一个web2app类型的app

最近发现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下载下来，安装在手机上：

使用mui制作一个web2app类型的app

猜你喜欢