image
image

酷安里发现的app,能把网页打包成安卓app,跟真的软件一样的体验,里面还有丰富的模板ui供你自定义。淘宝,微博什么的臃肿应用能用这个替代,方便多了。


之前有做过chrome的pwa应用,把一个导航页面弄成了简单的apk,但里面布局实质就是网页。。直接打包成pwa效果不大好,一点都不像应用。要想做成软件一样的ui,需要自己写框架,很麻烦的说。
image
image

之前做的导航



现在有了Fusionapp,网页转app就人性化多了!来做一个属于自己的博客app吧!下面来说一下我自己怎么做的233

1

新建一个模板,选择自己合适的模板

image
image

我选了标签栏模板,感觉这个很合适做博客!

2

创建成功后,先滑到组建那,填好自己需要的菜单

image
image

简单填好后,博客app就初步完成了

image
image

预览可以看到,是直接显示博客,app显得很奇怪。接下来需要控制网页元素的显示

3

滑到配置那,点击下面的网页控制,填上要修改链接和要删除的元素就ok,网页顶栏就不见了,观感好了不少。

image
image

image
image

用chrome,F12就能看到想要隐藏的元素

后来我网上搜了下,竟然看到泽泽原来还做了个插件!支持文章无限滚动加载,适应手机端的模板设计。哈,看起来更加棒了,跟普通的应用差不多! 上面的网页控制可以忽略掉不用了2333,插件会自动替换模板,记得ua自定义添加fusion

image
image

快来了解一下Typecho-Fusionapp插件

4

用了插件后,观感的确好很多。但用起来会发现跟预览图还是差别很大的,像软件首页随便点开的一个文章,你会发现网页直接在当前窗口打开,感觉怪怪的,这里可以设置一下拦截,把文章放在子页面里打开。

image
image

先回到配置那,添加一个子页面选一个合适的模板显示文章。(我这建了个子页面取名为“文章”)因为用了插件,同样要把ua自定义添加fusion
再回到配置那,再自定义事件那按网页即将加载添加下面代码,保存。

if(网页链接:find"https://kirimasharo.com/archives/.") then
  停止加载()
  进入子页面("文章",{链接=网页链接})
end

image
image

代码添加好后,看起来更加合理了,跟泽泽的预览图一样233

最后

博客基本成型了,剩下一些小改。从泽泽的demo学到了不少233
说几个好用的~

平滑返回网页顶部

按自己喜欢的布局添加一个按钮,我这跟泽泽一样添加一个悬浮按钮。软件内置了不少实用的事件,里面也有返回顶部,但这个很生硬,不是平滑滚动到顶部。

加载Js([[$('html,body').animate({scrollTop:0},800);]])

用外置浏览器打开链接

像文章内有的链接,不想直接在软件内打开,可以提示调用外置浏览器打开
子页面“文章”,找到自定义事件,添加网页即将加载事件

if(网页链接:find"https://kirimasharo.com.") then
else
停止加载()
对话框()
.设置标题("提示")
.设置消息("您正在打开的是非客户端网站地址,请点击确定使用浏览器打开!")
.设置积极按钮("确定",function()
  this.startActivity(Intent(Intent.ACTION_VIEW,Uri.parse(网页链接)))
end)
.设置消极按钮("取消")
.显示()
end

软件标题同步网页标题

像我创建的子页面,默认名称是“Title”,想同步文章的标题可以这样
我创建的子页面“文章”,找到自定义事件,添加收到新标题事件

设置顶栏标题(webView.title)

软件更新这块不是很懂,从泽泽那demo里看,运行起来会有奇怪的错误提示。。
最后根据自己喜好,改一下软件ui颜色,加一点小按钮什么的,就大功告成了233

遗憾
Fusionapp拥有丰富的自定义功能,却不能设置最近任务栏那块变色。。。全都是默认黑色。
敲代码那个编辑器很难用。。。
不能添加或改css