使用HBuilderX将vue项目打包成app

因为项目要用到手机扫一扫的功能，纯H5的话我百度之后只能做到调用摄像头，拍照后识别二维码，无法做到自动识别
看到H5+有扫码功能，所以今天尝试用HBuilderX将vue项目打包成app

总的流程很简单，这真的要感谢H5中国产业联盟做出的贡献。将vue打包，生成dist文件夹，HBuilderX创建H5+App项目，这里选择的是默认模版，然后将dist里的文件夹覆盖到新项目，就可以云打包成app下载到手机或者直接进行真机调试

• 生成app后遇到的第一个坑就是白屏，原因是页面找不到
  为了解决跨域问题，原本vue build之后是放在php项目public/webstie里的，所以vue.config.js的publicPath设置为'/website/'
  配置参考-publicPath
  puclicPath默认值是'/'，因为vue-cli默认你的应用是放在根路径，现在放在子路径website里，所以要指定这个子路径
  打包后css和js请求路径就多了/website，与实际路径不符所以找不到资源
  解决办法是publicPath设置为'./'，请求本地资源，页面本来就没放在服务器

• 页面出来后验证码不显示，请求接口也报错
  原本项目是同源请求，请求的接口直接/开头即可
  但在app中/明显不是服务器地址，所以要用绝对路径，使用域名会有问题，在phpStudy中设置第二域名，使用ip进行访问
  vue中创建变量存储访问地址，如

  var appUrl = 'http://192.168.1.90:80'

  ，然后在封装好的axios请求中加上此变量
  万幸app没有跨域问题，跨域是因为浏览器的同源策略而app不是浏览器

• 真机调试时HBuilderX检测不到手机
  具体可看社区真机运行、手机运行、真机联调常见问题
  手机USB连接“仅充电”设置为文件传输，最好设置连接时默认就是文件传输
  关闭USB调试，以管理员身份运行HBuilderX，再打开USB调试，后面我用这方式都可以检测到手机

• 突然间请求出现问题，验证码也获取不到
  因为吃饭回来后忘记连wifi了，用的流量
  服务在本机启动，在同一局域网内访问没问题，用流量的话相当于外网请求内网服务

• H5+app状态栏，有四种状态正常、变色、透明（沉浸式）和消失（全屏）
  状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别

• 侧滑返回上一页
  侧滑默认都是直接退出app，但示例代码里可以监听手机返回键弹出退出确认框，既然能弹框，就能进行其他的操作
  

• barcode扫一扫模块
  BarcodeStyles对象可以在创建扫码控件时修改其样式，出现的问题是控件一直是全屏把导航条都遮挡了，设置z-index没用，再大也不可能覆盖原生控件
  修改BarcodeStyles可以修改扫码颜色但遮挡问题死活搞不定，最后发现是扫码控件的父级div样式设置成了高100%.....

• 使用canvas合成二维码海报，PC没问题，手机始终不显示
  合成需要使用到两张图的src，二维码是用qrcode生成，然后通过操作dom获取二维码img的src，PC谷歌是可以获取到，但手机上获取到的要么不显示要么是undefined
  试过html2canvas来截图，npm下载时就报404......而且html2canvas不是真的截图，也是通过获取dom分析后生成图片，但不管是用zepto还是原生js在手机上都获取不到base64的src
  也想过dom转为字符串再截取字符串，甚至还想改qrcode源码......
  最后百度发现canvas对象本身可以作为一张图片使用，所以直接合并两个canvas就行了，说到底还是对canvas不够熟悉

转载于:https://www.cnblogs.com/Grani/p/11273571.html