裴大头-秦可爱

裴大头-秦可爱

记录一下vue打包成app(Hbuilder X)

发表于 2021-11-22
裴大头
阅读量 468

前言:

平时自己有在用 vue 写一些小 app,像待办清单了、记账本了之类的,所以记录一下使用 Hbuilder X 工具将 vue 项目打包成 app 的过程。

一、首先将写好的 vue 项目打包

npm run build

打包后会有 dist 这个文件夹。

二、打开 Hbuilder X

max-width: 200px

1、新建一个 5 + App(A) 项目。

max-width: 200px

2、删除默认的内容。

max-width: 200px

3、将打包后 dist 中的内容复制过来(favicon.ico 和 robots.txt 可以不用)

max-width: 200px

4、修改打包配置

打包需要在 Hbuilder 开发者中心实名认证!!! max-width: 200px max-width: 200px 点击发行 -> 原生App-云打包 使用公共测试证书即可

注意:

如需要安全环境,则使用自有证书 -> 如何获取自有证书, 如果是公司项目要求不能云打包,可以自行搭建本地打包环境 -> Android 本地打包指南ios 本地打包指南

推荐阅读

1、Idea 2021.2.3破解过程 2、前端面试精选-基础篇 3、Vue项目代码规范 4、.gitignore 文件常用配置 5、记录一下Vue中父子组件数据双向绑定

关注公众号 width:400px;height:150px;

关注贴吧:pei你看雪吧

评论
来发一针见血的评论吧!
表情
  • 裴大头

    男博主

    2021-11-30 16:30

    想学就去学,哈哈哈


    初学者可以去B站找个vue全家桶的视频(播放量高的就行),一步一步来,一般都是先跟着学学vue的基本语法,然后再是搭个脚手架写个小demo(一般都是待办事项)


    max-width: 100px


    0
    回复
      共0条回复,点击查看
  • Ricken

    2021-11-30 16:22

    也想学VUE🤣


    0
    回复
      共0条回复,点击查看
  • 裴大头

    男博主

    2021-11-22 17:18

    打包之后手机点击返回键直接退出app的问题


    新建一个appback.js文件


    import { Toast } from 'vant';
    /**
    * 解决Hbuilder X打包app之后点击手机返回键直接退出app的
    */

    document.addEventListener('plusready', function () {
    const webview = plus.webview.currentWebview()
    plus.key.addEventListener('backbutton', function () {
    webview.canBack(function (e) {
    if (e.canBack) {
    webview.back()
    } else {
    // webview.close() //hide,quit
    // plus.runtime.quit()
    // 首页返回键处理
    // 处理逻辑:1秒内,连续两次按返回键,则退出应用;
    let first = null
    plus.key.addEventListener(
    'backbutton',
    function () {
    // 首次按键,提示‘再按一次退出应用’
    if (!first) {
    first = new Date().getTime()
    Toast('再按一次退出应用') // 此处可以用自定义提示
    setTimeout(function () {
    first = null
    }, 1000)
    } else {
    if (new Date().getTime() - first < 1500) {
    plus.runtime.quit()
    }
    }
    },
    false
    )
    }
    })
    })
    })

    然后在入口文件main.js中导入


    import '@/utils/appback.js'

    0
    回复
      共0条回复,点击查看
推荐文章
  • JavaScript 的事件循环机制

    1点赞1评论

  • Vue项目代码规范

    1点赞1评论

  • Element UI 级联选择器 el-cascader 实现懒加载和搜索功能

    1点赞0评论

  • Java 23种设计模式——单例模式(Singleton)

    0点赞1评论

  • Java 23种设计模式——适配器模式(Adapter)

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 982 天访客 26086

© 2023 Pei你看雪鲁ICP备19037910号-2