使用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/' <a href="https://cli.vuejs.org/zh/config/#publicpath" target="_blank">配置参考-publicPath</a> puclicPath默认值是'/'，由于vue-cli默认你的应用是放在根路径，如今放在子路径website里，因此要指定这个子路径 打包后css和js请求路径就多了/website，与实际路径不符因此找不到资源 解决办法是publicPath设置为'./'，请求本地资源，页面原本就没放在服务器

• 页面出来后验证码不显示，请求接口也报错 本来项目是同源请求，请求的接口直接/开头便可 但在app中/明显不是服务器地址，因此要用绝对路径，使用域名会有问题，在phpStudy中设置第二域名，使用ip进行访问 vue中建立变量存储访问地址，如<pre>var appUrl = 'http://192.168.1.90:80'</pre>，而后在封装好的axios请求中加上此变量 万幸app没有跨域问题，跨域是由于浏览器的同源策略而app不是浏览器

• 真机调试时HBuilderX检测不到手机 具体可看社区<a href="http://ask.dcloud.net.cn/article/97" target=“_blank”>真机运行、手机运行、真机联调常见问题</a> 手机USB链接“仅充电”设置为文件传输，最好设置链接时默认就是文件传输 关闭USB调试，以管理员身份运行HBuilderX，再打开USB调试，后面我用这方式均可以检测到手机

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

• H5+app状态栏，有四种状态正常、变色、透明（沉浸式）和消失（全屏） <a href="http://ask.dcloud.net.cn/article/1150" target="_blank">状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别</a>

• 侧滑返回上一页 侧滑默认都是直接退出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不够熟悉