0%

如何三分钟将网站转换为APP?

by草梅友仁

前言

现在用前端技术来写一个app实在是太方便了,尤其是有像HBuilder(现已更名为HBuilderX,功能一样)能将原生H5打包成原生APP的软件,那就更加方便了。

下面我们就来看看,如何在三分钟之内将你的网站转换为APP。

【本案例以草梅友仁自己的个人网站https://www.caomeiyouren.cn/为例】

0.首先

首先,你肯定得先做好一个网站,也已经适配好了手机。但毕竟只是一个网站,还要通过手机浏览器来访问,有点不方便,如果能打包成app岂不美哉?【如图,已经做好了手机适配】

Screenshot_2019-05-15-21-28-49-39

1.使用HBuilder新建移动App工程

先用HBuilder建一个空的移动App工程

image

2.在index.html页面添加如下代码

1
2
3
4
<script type="text/javascript">
window.location.href = "https://www.caomeiyouren.cn/#/index";
//这段代码的意思是跳转到指定网页
</script>

3.配置App信息

image

4.发行打包

image image

5.下载app到手机试用

Screenshot_2019-05-15-22-10-01-74

效果可以说是非常完美了!

6.优化用户体验

但是这个时候又会遇到新的问题了。

  • 用户一旦按了手机的物理退出键,会触发app的默认退出事件,也就是说这个app就直接退出了

    解决方案如下,在你的网站首页添加这样一段代码。请注意,是你的网站首页!

    本段示例仅适用于单页面应用。多页面应用需要每个页面都有这么一段。

    同时为了避免在首页还会返回原来页面的bug,建议通过路由来判断是否为首页

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <script>
    /* 解决App端物理返回键的问题 */
    document.addEventListener('plusready', function () {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function () {
    webview.canBack(function (e) {
    //通过哈希路由来判断是否为首页,是首页则按返回键退出。避免退出后还会返回原来页面的BUG
    if (e.canBack && location.hash !== "#/index") {
    webview.back();//返回上一个页面
    } else {
    //首页返回键处理
    //处理逻辑:1秒内,连续两次按返回键,则退出应用;
    var first = null;
    plus.key.addEventListener('backbutton', function () {
    //首次按键,提示‘再按一次退出应用’
    if (!first) {
    first = new Date().getTime();
    plus.nativeUI.toast('再按一次退出应用');
    setTimeout(function () {
    first = null;
    }, 1000);
    } else {
    if (new Date().getTime() - first < 1500) {
    plus.runtime.quit();
    }
    }
    }, false);
    }
    })
    });
    });
    </script>

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/a7652497.html
版权声明:转载请注明出处!

编程常用工具推荐

by草梅友仁

前言

正所谓“工欲善其事必先利其器”,有一个好用的工具可以让我们写代码事半功倍,下面草梅就基于自己的使用体验来给大家推荐一些工具

编辑器

远程工具

数据库管理

其他

最后

这些好用的工具基本上都是外网的,访问可能有些慢。建议优先从官方下载,官方下载不到的再去百度找别的版本

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/b3b22e84.html
版权声明:转载请注明出处!

为什么选择node.js

参考教程 https://www.runoob.com/nodejs/nodejs-tutorial.html

简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。

——by菜鸟教程

node.js的牛逼之处就在于能让JavaScript离开浏览器环境,独立运行。因此也能用于后端。

参考链接:https://www.zhihu.com/question/20986058/answer/16825178

比较一下目前流行的几个后端语言:Java, PHP, nodejs, Ruby (on Rails), Python:

  • 客观来讲,Java拥有最完整的生态链,目前基于Java的框架,应用非常多,语言本身上手也比较容易。学习Java的话,至少将来5-10年找工作是不成问题。但是我个人非常不喜欢Java,主要原因可能确实不太了解Java,在为数不多对Java的印象就是“慢”和“Heavy”(我学生时代写过jsp的东西,也不同一窍不通)
  • Nodejs:事件驱动+异步IO让nodejs最擅长低CPU运算、多IO、高并发的Web service。Javascript本身就是基于原型的语言,想要真正精通,难度比其余稍微大一点(如果你现在对js掌握就非常好,就不用担心这个了)。nodejs变态的事件驱动对于代码的维护也是一个挑战,当然这些都是可以靠牛逼的编程能力克服的。除开语言本身的问题,nodejs最大的毛病还是目前npm里面的包都不太成熟,应用于生产环境稍微有点不稳定。

选择JavaScript,只是个人认为,js比其他语言来说,更加简单一些。不过,也正是因为js的语法太过灵活,在代码质量上就需要加以注意了。JavaScript不像java一样有着完善的异常处理机制,一旦出现异常会导致整个程序退出,因此,一旦要注意单元测试和异常捕捉。

另外还有个参考如何评价阿里开源的企业级 Node.js 框架 EggJS?

阿里是业界最早的一批使用 Node.js 来做线上大流量应用的公司,
早在 2011 年的就已经开始在生产环境中使用。

众所周知,在阿里的技术栈中, Java 是最最核心的,那 Node.js 扮演怎么样的一个角色呢?

  • 基础设施大部分采用 Java 实现,变化较少,有事务要求的 Business Services 通常使用 Java。
  • 而 Node.js 则替代过去 PHP/Java Web 的场景,用在需要快速迭代,需求变化非常快的用户侧。
  • 很多内部的工程化支撑系统也逐渐基于 Node.js 了。

简单的说就是node.js也有大厂实际应用,性上其实也是完全可靠的

总结

但最后也要说一句,学习什么语言并不重要,js也只是其中一种而已。

在菜鸟教程的服务端教程中,一共有Java、PHP、nodejs、 Ruby、 Python、Go等语言教程。这些语言都可用于后端,选择一个学习即可。

本人将基于node.js学习中遇到的各种困难/坑/问题来写一些经验和心得

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/8be71ee0.html
版权声明:转载请注明出处!

版本号的规范

语义化版本号规范链接:https://semver.org/lang/zh-CN/

参考链接:https://blog.csdn.net/u012107143/article/details/78731272
https://blog.csdn.net/qq_38880380/article/details/79319126

整理:草梅友仁

注:草梅在整理的过程中发现两篇文章还是有较大差异的,不过意思是差不多的,只要理解一下就行。

前言

版本号是一个很重要的东西。搞明白版本号问题,对于开发者和用户都有很大的帮助

  1. 对开发者
    • 版本号的命名和更新问题,是开发者的责任感和前瞻性的问题,一个规范的版本号,能够帮助用户正确理解你开发的程序,以及优化用户体验
  2. 对用户
    • 明白版本号规范之后,就能找到对应的教程和文档,才不至于在使用中摸不着头脑
  • 另外也要说一句,IT界日新月异,网上的资料很有可能已经是过时的,因此,在找到时间较早、距离现在时间已经比较久的资料时,一定要注意版本号问题

版本号规范

  1. 版本格式:主版本号.子版本号.阶段版本号,版本号递增规则如下:

  • 主版本号:全盘重构时增加;重大功能或方向改变时增加;大范围不兼容时增加;当产生了严重影响项目的修改时增加。

  • 子版本号:增加新的业务功能,并且向下兼容的更新时增加

  • 阶段版本号:一般是 Bug 修复或是一些小的变动,要经常发布修订版,时间间隔不限,修复一个严重的bug即可发布一个修订版。修复BUG、以及一些细节上的更新时增加(没有产生新业务功能,仅在原来的上面修订时都可以增加)

  1. 也可以在三位的基础上再加一位日期版本号希腊字母版本号

    • 日期版本号:用于记录修改项目的当前日期,每天对项目的修改都需要更改日期版本号。此版本号由开发人员决定是否修改。(例如 20190513)
  • 希腊字母版本号:此版本号用于标注当前版本的软件处于哪个开发阶段,当软件进入到另一个阶段时需要修改此版本号。此版本号由项目决定是否修改。希腊字母版本号共有5种,分别为:base、alpha、beta、RC、release。(例如:4.0.0_beta)
    • α(Alpha)版:内测版。此版本表示该软件在此阶段主要是以实现软件功能为主,通常只在软件开发者内部交流,或者专业测试人员测试用,一般而言,该版本软件的Bug较多,需要继续修改。
    • β(Beta)版:公测版。该版本相对于α版已有了很大的改进,消除了严重的错误,但还是存在着一些缺陷,需要经过多次测试来进一步消除,此版本主要的修改对像是软件的UI,供专业爱好者大规模测试用。
    • RC 版:是 Release Candidate 的缩写,意思是发布倒计时,候选版本,该版本已经相当成熟了,完成全部功能并清除大部分的BUG,基本上不存在导致错误的BUG,与即将发行的正式版相差无几。
    • Release 版:该版本意味“最终版本”,在前面版本的一系列测试版之后,终归会有一个正式版本,是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下,Release不会以单词形式出现在软件封面上,取而代之的是符号(R)。
  1. 除此之外

    • 先行版本号(Pre-release):意味该版本不稳定,可能存在兼容性问题。 其格式为:X.Y.Z.[a-c][正整数],如 1.0.0.a1,1.0.0.b99,1.0.0.c1000。

    • 开发版本号:常用于 CI-CD(持续集成和持续交付)。 格式为 X.Y.Z-dev[正整数],如 1.0.1-dev4。

    • 版本号的排序规则为依次比较主版本号、次版本号和修订号的数值,如 1.0.0 < 1.0.1 < 1.1.1 < 2.0.0;对于先行版本号和开发版本号,有:1.0.0.a100 < 1.0.0,2.1.0-dev3 < 2.1.0;当存在字母时,以 ASCII 的排序来比较,如 1.0.0.a1 < 1.0.0.b1。

后记

草梅之所以会如此在意版本号的问题,也是因为在版本号上栽过跟头。

之前在开发的时候还没注意过版本号的规范,于是就想当然的来了,结果就发现自己的版本号命名是不符合规范的,造成什么误解也是不奇怪的。

而作为用户,要举的例子就是webpack这个前端打包神器。目前它的版本已经到了4.x,而我在网上找的教程、别人写的博客等都还是3.x的,遇到问题也是因为版本号不同。从3.x到4.x,显然其中是有不兼容更新的,不然它也没必要增加一位主版本号。

而且作为一个工具,webpack上还有很多插件,显然,当webpack更新时,这些插件也得跟着更,其中有一个插件就是”extract-text-webpack-plugin”,直接下载的话它是3.x版本,不支持webpack4.x版本,只能指定版本号为4.0.0-beta.0才行

所以一定要再三注意版本号问题!

本文作者:草梅友仁
本文地址: https://blog.cmyr.ltd/archives/898ef2bd.html
版权声明:转载请注明出处!