首页 > 移动平台 > 详细

Framework7-vue + cordova,从创建项目到发布程序(Android、Web)

时间:2019-12-25 15:45:39      阅读:184      评论:0      收藏:0      [点我收藏+]

环境:NodeJs、Android SDK 、Adb Driver

安装:npm install -g cordova

   npm i framework7-cli cordova -g

 

代码编辑器:Vs Code(建议Version:1.42,否则Cordova调试麻烦)

 

过程:

  1、创建一个项目:

  技术分享图片

  2、在项目根路径下打开编辑器,再把项目根路径下的Cordova目录添加到WorkSpace

  技术分享图片   技术分享图片

  3、下载Cordova Tools组件,方便调试

  技术分享图片

  4、设置DEBUG AND RUN(调试工具)

  注:vs code版本需要1.42,才能选择WorkSpace(见 https://github.com/microsoft/vscode/issues/87237

  技术分享图片

   选择Cordova WorkSpace,再选择Cordova

   技术分享图片

   5、调试

    5.1、安卓真机测试【Adb 需要安装】:

    代码编译:

      技术分享图片

    打开手机开发者模式:

      技术分享图片

    运行 Run Android on device:

      技术分享图片

    5.2、浏览器测试

      技术分享图片

 

请求服务端HTTP接口:

  1、H5(存在跨域):

      技术分享图片

   2、APP(可以直接请求HTTP接口,不存在跨域):

      注:如需兼容H5方式,请求时替换url

      技术分享图片

 

添加Cordova的组件(plugin):

  framework7 cordova plugin add cordova-plugin-media

    技术分享图片

 

发布程序:

  1、H5:

  技术分享图片

   2、Android:

  技术分享图片

 

 参考:

  Framework-vue API:https://framework7.io/vue/

  Framework-vue Github:https://github.com/framework7io/framework7/

  Cordova API:https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-battery-status/index.html

  Cordova Media Plugin:https://m.imooc.com/article/details?article_id=70086

Framework7-vue + cordova,从创建项目到发布程序(Android、Web)

原文:https://www.cnblogs.com/saint-zhang/p/12096636.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!