HbuilderX将Vue项目打包后的dist,打包成安卓apk安装包

发布时间 2023-09-22 15:09:13作者: yw3692582
1、先看这个(必看):https://www.cnblogs.com/lyt520/p/16545806.html
2、安装移动端log(如不需要可跳过此步骤)
npm install vconsole
main.js中引入:
import VConsole from 'vconsole'
const vConsole = new VConsole()
Vue.use(vConsole)

3、HBuilderX和逍遥模拟器(用模拟器实现真机模拟,不需要的可跳过此步骤,直接看第4步)

 -找到HBuilderX的安装路径

 -找到逍遥模拟器安装路径

 

  -配置HBuilderX逍遥端口,工具-设置-运行配置

  -逍遥模拟器打开开发者模式和USB调试,一直点击这个版本号直到提示已经进入开发者模式

  -完成上述后操作后,重启HBuilderX和逍遥模拟器, 点击index.html,然后运行到安卓app基座,并点击运行,此时就算是成功了

 4、调用安卓相关sdk(我主要是调用了弹出通知栏,打包时需在HBuilderX中引入push模块配置具体看最下面的备注)

 mounted() {
  this.$store.commit('handle_save_state', '1') // 默认在前台
  // 监听plusready加载, 里面可以不用写代码块,会自动复制全局变量plus(重要!!!)
  document.addEventListener('plusready', () => {})
  // 从前台切到后台,里面的代码块根据自己系统的实际情况修改
  document.addEventListener('pause', () => {
   this.$store.commit('handle_save_state', '0')
  })
  // 从后台切到前台,里面的代码块根据自己系统的实际情况修改
  document.addEventListener('resume', () => {
   this.$store.commit('handle_save_state', '1')
  })
 },

上面代码放在登录界面(不固定,总之一定要是App的第一个界面),如果是直接放在index.html中,则去掉mounted。

5、界面中调用(plus就是第4步中的plusready加载成功后自动赋值的一个全局变量)

// 推送消息,msg为需要推送的消息,具体plus.push的api自行搜索,此处为简单示例
  push_msg(msg) {
   if (plus) {
    // 运行在前台时不弹出提示窗
    if (this.$store.state.isBackground == '1') return
    plus.push.createMessage(msg, '', {
     cover: false,
     delay: 0,
     sound: 'none',
    })
   }
  }

 备注:

 -最终打包