首页 > 其他分享 >HbuilderX将Vue项目打包后的dist,打包成安卓apk安装包

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

时间:2023-09-22 15:12:31浏览次数:34  
标签:Vue state plus 打包 msg 安装包 HBuilderX 模拟器

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',
    })
   }
  }

 备注:

 -最终打包

 

 

标签:Vue,state,plus,打包,msg,安装包,HBuilderX,模拟器
From: https://www.cnblogs.com/lyt520/p/17722394.html

相关文章

  • 关于vue的axios请求的封装
    先加载axiosimportaxiosfrom'axios';importVuefrom'vue';importQsfrom'qs';importurlsfrom'./url'import{ Message}from'element-ui';//用来设置接口请求频繁时候的调用varapi_url;varapi_data;//axios.def......
  • ABP + Vue Docker 部署
    #!/bin/bashecho"Welcometodockerbuild"echo""echo""ABP_HOST="abp/host"ABP_NG="abp/ng"cd..echo"Buildingdockerimage$ABP_HOST..."#cd到aspnet-core目录,eg:cd/data/apb/#将aspnet-......
  • vue3 将文件集合下载后导出zip文件
    //注意:文件的url一定是服务器上的地址如http:xxxx//先下载npmijszipfile-saver//封装importJSZipfrom'jszip'importFileSaverfrom'file-saver'constgetFile=(url)=>{returnnewPromise((resolve,reject)=>{//通过请求获取文件blob格式......
  • 基于Java+vue开发的企事业移动培训考试平台
    随着移动互联网的快速发展,越来越多的企业开始关注移动培训和考试平台的开发。为了满足这一需求,我们可以使用Java和Vue来开发一个基于移动端的企事业培训考试平台。获取方式Q+:262086839一、背景和需求企事业移动培训考试平台是一个基于Web的应用程序,旨在提供一个方便、高效的......
  • 【Vue】由0到1深究计算和侦听属性的原理
    hello,我是小索奇,精心制作的Vue系列教程持续更新哈,涵盖大量的经验和示例,由浅入深进行讲解,想要学习&巩固&避坑就一起学习吧~计算和侦听属性计算属性重点概要定义:要用的属性不存在,需要通过已有属性计算得来原理:底层借助了Objcet.defineproperty()方法提供的getter和setter来计算属性计......
  • vue3+elementplus 去除小数点后多余的0公用函数
    vue3+elementplus去除小数点后多余的0公用函数exportfunctionremoveTrailingZeros(value){//尝试将值转换为数字constnumericValue=parseFloat(value);//检查是否成功转换为数字if(!isNaN(numericValue)&&typeofnumericValue==='number'){//......
  • Day04 - Vue的请求方式、计算属性、监听、ref
    与后端交互的三种方式//后端接口写好了,前后端分离的项目,前端如何与后端进行交互?前后端要打通----->从前端发送Ajax请求------>核心:使用JavaScript发送HTTP请求,接受返回的数据 -使用原生JS,可以开启Ajax,但是使用原生JS,比较麻烦,需要做浏览器兼容,现在基本不使用 -jQuery,写了个兼......
  • Day03 - Vue语法使用
    JS循环方式JS循环方式//方式一:js循环----->for()------>基于索引的循环leti=0for(;i<10;){console.log(i)i++}letlist=[1,2,3,4,5,6,7,8]for(letj=0;j<list.length;j++){console.log(lis......
  • Day02 - Vue 基础知识
    模版语法<body><divid="app1"><h1>模版语法</h1><p>渲染字符串,------姓名:{{name}}</p><p>渲染字符串,------年龄:{{age}}</p><p>渲染数组类型,------>:{{list1}}</p><p>渲染数组类型按照索引取值......
  • Day01 - Vue介绍
    前端介绍1HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看2Ajax的出现->后台发送异步请求,Render+Ajax混合3单用Ajax(加载数据,DOM渲染页面):......