hbuilder 打包 vueAPP】的更多相关文章

1:设置状态栏颜色 在manifest.json 找到 plus 下添加 "statusbar": { "immersed": true/*沉浸式状态栏*/ 设置背景色就不要设置 此项 或者删除不配置 "background": "#ffffff" }, 2 :home键返回问题 mui进行手机物理键的监听 首先安装 vue-awesome-mui npm i vue-awesome-mui 在main.js注册 import…
前言 最近有点空余时间,所以,就研究了一下APP支付.前面很早就搞完APP的微信支付了,但是由于时间上和应用上的情况,支付宝一直没空去研究.然后等我空了的时候,发现支付宝居然升级了支付逻辑,虽然目前还兼容老的方法,但是新的既然出来了,肯定研究新的了.但是网上几乎都是旧的方法,所以,唯有自己看官方的文档,慢慢一步一步研究了.在研究的过程中,发现,他跟微信支付的差别蛮大的.好了废话不多说了,下面直接来干货. 首先,你得去蚂蚁金服开放平台申请一个应用,地址:https://openhome.alipa…
1.运行HBuilder---百度搜索HBuilder,官网下载安装包,解压,运行HBuilder.exe.注册账号,并登陆 2.新建app---在左边右键,选择新建APP,或者,点击中间的新建app 3. 在弹出的窗口,填入应用名称,根据需求选择项目位置,以及模板内容 4.检验app效果----创建好之后,选择刚刚创建好的项目,在顶部选择运行,根据你的情况现在运行方式 5.效果展示---这是我刚刚选择的模板app展示,功能齐全,用着感觉还不错(若在手机运行过程中遇到了问题,可参见下一篇<HBu…
楼主是使用vue-cli构建的页面,代码是vscode,然后使用hbuilder打包成移动端的安装包.首先确认在npm run build 之后没有问题(默认dist文件夹),可以使用anywhere开一个服务器看看. 在确保咩有问题的情况下,将dist文件夹直接拖进 hbuilder (hbuilder下载地址)中, ,在dist上面右击,点击 转换成移动app,dist的图标会由 W 变成 A,如图: ,dist文件夹中会新增manifest.json(这个是app的配置文件,修改app图标…
问题描述:Hbuilder打包的app如果点击手机返回键,app会直接退出,返回不了上一页. 写在公共js文件中,每个页面均引入该js,代码如下: document.addEventListener('plusready', function() { var webview = plus.webview.currentWebview(); plus.key.addEventListener('backbutton', function() { webview.canBack(function(e…
众所周知,前端开发完成的webapp只能运行在浏览器上,对运行环境有一定的限制,也就是除了浏览器其他的环境下不支持:那么现在如果有个需求是这样的呢?需要一套代码三端运行呢?三端运行(黑人脸??)是的,三端运行即web端,安卓端和IOS端 :先别急着说实现不了和不可能,利用HBulder来试试: HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.  HBuilder的编写用到了Java.C.Web和Ruby.HBuilder本身主体是由Java编写.它基于Ecl…
声明:本文可能用到一些工具和第三方网站,都是为了达到目的而使用的工具,绝不含有广告成分 1.下载.最新的Hbuilder X貌似不能直接创建移动app了(自己不会用),建议旧版.可去腾某讯软件中心下载使用. 2.新建移动app 基本设置 空模板结构 3.代码引入.推荐引入打包好的代码,直接将整个包引入.原来的空模板中的文件除了"unpackage"和"manifest.json"都可以删除.然后将打包好的代码放入就行 右键test,然后打开文件所在位置去删除和增加代…
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP. HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包. 1,下载HBuilder,注册并登陆.首先打开"文件"-"新建"-"移动APP",输入"应用名称","位置…
1.安装HBuilder 2.将你的项目在HBuilder中打开 3.控制台 打包编译 npm run build 4.新建一个app项目,将项目编译生成的dist文件夹 ,复制到app项目中 5.双击manifest.json文件,修改页面入口,是否压缩的选项   (appid 注册登录后 则有) 6.点击发行,打包原生 (会有弹框 一直点击是 即可 之后会弹出打包进度) 7.下载安装包 之后发送至手机 安装后 查看效果 效果图 : . 不过 有很多兼容性的问题 不过是向大前端迈出一大步了 哈…
springboot整合web开发的各个组件在前面已经有详细的介绍,下面是用springboot整合layui实现了基本的增删改查. 同时在学习mui开发app,也就用mui实现了一个简单的自动登录和用户列表上拉刷新的app. 下面是自己实现前的思路: 1. web端实现用户的增删改查,SSM实现. Spring + SpringMVC +Mybatis + PageHelper 表主要有两个user表和token表. user表就是基本的信息(ID.username.password.user…
转载 标签: apk / 打包 / vue 现在的前端开发可谓是,百花齐放啦,什么都可以做,只有想不到没有做不到的,今天就简单的介绍用vue,ng或者是react开发的单页应用如何打包为apk,在移动设备上运行. 这里以vue为例,其他的差不多,大家可以根据自己的情况去查找相应资料. 第一步,需要安装node,如果是做前端的er,这个应该就不用过多介绍了. 第二步,使用vue-cli工具初始化vue项目,这里只是做一个测试的项目,所以vue-router等东西就不用安装了,实际项目,根据具体情况…
一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行 二.修改路径(assetsPublicPath: './') 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 三.打包文件  指令:npm run build 打包后会生成dist文件 四.把dist文件变…
1.在打包之前需要修改一个地方,那就是config->index.js文件,修改assetsPublicPath: '/'为assetsPublicPath: './',截图如下 上面文件改好后,开始打包,执行如下命令: npm run build 生成 dist 文件夹 2.打包步骤 步骤一: 将 dist 文件 放入 HBuilder 编辑器中,将项目 转换成 App ,生成 manifest.json 步骤二: 配置 manifest.json , 点击 "发行" 按钮 -…
摘要:基于HBuilder建立一个简单的移动app项目,并打包成apk,使用这套平台用H5开发真正的移动项目,相当于省去了原生部分的人力和工作配合,性能的话,后续我会基于这套技术开发相关的应用来验证,看能否媲美常用的hybrid应用. 一.  下载HBuilder安装包,官网地址:http://www.dcloud.io/ 二.  打开HBuilder并注册登录,新建移动App项目. 三.  点击新建移动App后,在弹出的框中,选择相关项目信息,点击完成. 四.现在先测试真机调试能不能用,usb…
最近两天,新的APP准备要上线,然后打包正式发布版 时,总是提示不匹配 证书照hbuilder里面的文档 一样也不行,然后百度了N种方法,都是不行,而且也比较少搜索到相关问题. 后来都是谷歌了下,找到别人的解决方法,有一个是说权限问题.解决方法是这样: 我试了是不行.后来又看到一个方法,是证书信任问题,下载 的cer发布证书安装后双击,信任那里选择始终信任 然后再导出p12格式 的证书... 然后才解决.....好了,继续研究怎么上传到APP STORE了…
使用Hbuilder来打包自己的H5项目 第一步 在Hbuilder上新建一个"移动APP"wolf(项目命名随意)(如果没用引用mui框架的东西,"选择模板"中可以勾选"空模板") 第二步 新建"空模板"项目wolf中,删除不必要的文件夹,只保留以下文件 第三步 然后把你的H5项目里面相关的文件拷贝到Hbuilder中新建的项目wolf中(自己的H5项目文件)(拷贝到HBuilder中) 第四步 点击maifest.json…
1.运行HBuilder---百度搜索HBuilder,官网下载安装包,解压,运行HBuilder.exe.注册账号,并登陆 2.新建app---在左边右键,选择新建APP,或者,点击中间的新建app 3.在弹出的窗口,填入应用名称,根据需求选择项目位置,以及模板内容 4.检验app效果----创建好之后,选择刚刚创建好的项目,在顶部选择运行,根据你的情况现在运行方式 5.效果展示---这是我刚刚选择的模板app展示,功能齐全,用着感觉还不错 6.打包成app---选择要打包的项目,在顶部选择运…
一.测试项目是否可以正确运行    指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目 不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行 二.修改路径(assetsPublicPath: './') 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 三.打包文件  指令:npm run build 打包后会生成dist文件 四.把dist文件变…
1.首先使用的是vue-cli构建的页面,用hbuildX打包成移动端的安装包(hbuildX打包成app的流程,请看自行搜索) 2.cnpm install build 生成dist文件夹,里面包含static+index.html 3.将dist文件夹直接复制在hbuilderX中,打包成移动端app,此处我打包的是Androidapp 4.下载到手机端之后页面是空白的 解决的方案: 1.在config/index.js 下的配置路径出现了问题 改为:assetsPublicPath: '.…
1.打包后手机打开"该app专为旧版本安卓"问题解决(在hbuilder中设置) 打开manifest.json 然后 2.打包后app打开显示白屏. 路径问题:在webpack中配置 3.路由跳转图片显示不出来(在router中设置) // src文件夹 ==> router文件夹 ==> index.js中找到 new Router export default new Router({ mode: 'history', //修改为hash 或者直接去除 routes:…
1先安装itunes在电脑上 2,在HBuilder的工具栏上的"工具"选项卡上安装ios插件…
(解决空白问题)在打包之前一定要修改 config 目录下的 index.js 文件中的 bulid 模块打包配置项,否则会出现空白,如图   修改前 assetsPublicPath= '/',. 修改后 assetsPublicPath='./' 然后在根目录下执行 npm run build 会在目录下产生一个 dist 目录,dist 目录包含一个 index.html 文件和一个 static 目录 注意打包时,要使用域名(解决请求不到数据问题)…
使用 Hbuilder新建好移动app项目后,mainfest.json这个文件里的 plus里设置 statusbar ..... "plus": { "statusbar": { "immersed": true }, ...... }, ..... 效果 此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处. 如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力.…
1. 新建app 2. 新建弹窗面板中选择MUi登录模版 ps:在弹出的窗口,填入应用名称,根据需求选择项目位置,以及模板内容. 3. 检验app效果 菜单栏 -> 运行 -> 手机运行 4. 打包成app 菜单栏 -> 发行 -> 发行为原生安装包 5. 云端打包 在弹出的窗口,选择相应证书,如果参数配置未完成,点击顶部参数配置 6. 图标配置 上传图标,如果不想挨个穿图标就点击下方生成并替换 ps: app在桌面上图标 7. 参数配置 配置相应的app入口位置,app名称,版本…
在命令行直接运行 npm run build后,生成的dist文件中,直接打开index.html文件 Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work. 打包完后,提示只能在服务端可以开启,file模式下无法工作 问题: 使用vue脚手架开发的spa项目,在打包为app时,出现白屏现象 原因: 想要在手机端打开,等同于在本地file模式下…
查看了很多网上写的改来改去都在手机上运行不起来,运行起来又是白屏:最后放弃,自己结合文档搞吧! 1. 项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”,改为“./”后,打包生成的 dist 文件. 注释:config文件夹里的index.js中有两个assetsPublicPath,记住是改 build对象下的 assetsPublicPath 完了之后,打包, 执行npm run build之后生成dist文件夹 2. 在…
直接在打包后的mainifst.json的文件夹中加入标注部分,我是这样解决了的…
第一步: 安卓生成自有证书:到JRE的bin目录下,运行keytool命令:cd C:\Program Files\Java\jre1.8.0_91\binkeytool -genkey -alias myappname -keyalg RSA -validity 10000 -keystore C:\myappname.keystore 然后查看签名信息:查看签名信息:keytool -list -v -keystore C:\myappname.keystore可以看到MD5信息:Certi…
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <style> html,body…
1.打开app项目的manifest.json的文件,选择模块权限配置,将Share(分享)模块添加至已选模块中 2.选择SDK配置,在plus.share·分享中,勾选□ 微信消息及朋友圈,配置好appid和appsecret值(appid/appsecret可以在微信开发者平台创建应用获取) 3.项目JS文件中的微信支付代码如下(基于angular开发): $scope.inviteFrendShareFn = function() { //分享方法 if($scope.userLoginF…