精华内容
下载资源
问答
  • vue与原生混合开发

    万次阅读 2018-07-06 10:09:08
    前段时间,做了一个混合开发的项目,主要是以vue框架开发h5页面,使用cordova作为...1、创建vue项目,具体流程可参考下图(基于mac):2、开发完毕后对vue项目进行编译,编译之前需要对配置进行一些更改,在目录conf...

    前段时间,做了一个混合开发的项目,主要是以vue框架开发h5页面,使用cordova作为中间沟通桥梁,实现了h5与安卓、iOS的混合开发,由于从事iOS开发,h5也是刚接触不久,很多深入原理还不太清楚,只说下我们这个个项目的开发流程,记录过程中遇到的比较大的问题。

    1、创建vue项目,具体流程可参考下图(基于mac):


    2、开发完毕后对vue项目进行编译,编译之前需要对配置进行一些更改,在目录config下,找到index.js文件,把assetsPublicPath:'/',修改为:assetsPublicPath:'./',


    经过测试发现不修改可能会造成资源文件找不到的问题,另外需要注意的是,图片资源不要放到文件static目录下,否则同样会造成资源文件找不到。配置文件之后,执行命令:npm run build,执行结果如下图所示(部分):


    3、编译完成后会生成dist文件,如下图所示:


    4、在原生可通过读取文件dist文件目录下的index.html进行展示h5页面。

    5、需要跳转到某一个单独的h5页面,可使用路由进行单个页面跳转:

    var path = "/detail";
    var url = "/index.html#"+path;

    其中path就是要跳转页面在router中的定义

    这样就完成了原生调用vue编写的h5页面了。

    理解还不太深刻,可能有些地方记录的比较混乱,后期再慢慢修补吧。

    展开全文
  • vue + vue-cli3 + 高德地图 一、AMap.js 项目里的引用文件,css,js链接,都以下列方式引入,重点注意插件的引用 代码如下(示例): // 高德map https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key...


    前言

    vue + vue-cli3 + 高德地图
    本章所讲的是原生的高德地图,而不是vue-amap
    主要因为原生的api更详细,功能更多,而且有例子可供参考


    一、AMap.js

    项目里的引用文件,css,js链接,都以下列方式引入,重点注意插件的引用
    示例代码中引用的link和script,是我项目中实际用到的,具体用到哪些,可以参照高德实例,人家例子里用到什么,你就引入什么

    代码如下(示例):

    // 高德map   https://webapi.amap.com/maps?v=1.4.11&key=你的高德地图的key
    export default function MapLoader() {
      return new Promise((resolve, reject) => {
        if (window.AMap) {
          resolve(window.AMap);
        } else {
          var link = document.createElement("link");
          link.type = "text/css";
          link.rel = "stylesheet";
          link.src = "https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css";
          document.head.appendChild(link);
    
          // 引入,注意链接要用https://
          // 用了2种插件,plugin=AMap.MouseTool,AMap.PolyEditor
          var script = document.createElement("script");
          script.type = "text/javascript";
          script.async = true;
          script.src =
            "https://webapi.amap.com/maps?v=1.4.15&callback=initAMap&key=你的高德地图的key&plugin=AMap.MouseTool,AMap.PolyEditor";
          script.onerror = reject;
          document.head.appendChild(script);
    
          var script1 = document.createElement("script");
          script1.type = "text/javascript";
          script1.async = true;
          script1.src = "https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js";
          script1.onerror = reject;
          document.head.appendChild(script1);
        }
    
        window.initAMap = () => {
          resolve(window.AMap);
        };
      });
    }
    

    二、页面引用

    1. 先写一个map 的 容器 div,要给这容器设置高度,不然地图不显示;
    2. 引入AMap.js
    3.在 mounted 里用 MapLoader() 初始化地图

    代码如下(示例):

    <template>
      <div class="common-containar" >
          <!-- 地图 开始-->
          <div id="container"></div>
          <!-- 地图 结束 -->
      </div>
    </template>
    
    <script>
    import MapLoader from "@/assets/js/AMap.js";
    
    export default {
      data() {
        return {
          map: null,
        };
      },
      mounted() {
        this.$nextTick(function () {
          let that = this;
          MapLoader().then(
            (AMap) => {
              that.map = new AMap.Map("container", {
                zoom: 12,
              });
              console.log("地图加载成功", e);
            },
            (e) => {
              console.log("地图加载失败", e);
            }
          );
        });
      },
    };
    </script>
    
    <style scoped>
    #container {
      height: 100%;
    }
    </style>
    
    

    三、其他

    vue.config.js引入

    说实话上述一二步就能正常运行展示地图,这一步具体啥效果,我还真没研究过,但是加上也没坏处

    externals: {
    	'AMap': 'AMap'
    },
    

    总结

    高德地图引入Vue项目的方式,应该不止这一种,这个是只在需要的页面引入,算是按需加载,简单有效

    展开全文
  • 这篇文章主要是为了再下一次开发中的时候可以使用,写的不是特别好。 addImg(e){ console.log(e) let file = e.target.files[0]; console.log(file) this.uploadImg(file) }, //上传图片 uploadImg(img) { ...

    这篇文章主要是为了再下一次开发中的时候可以使用,写的不是特别好。

    		<input type="file" class="upload" @change="addImg" ref="inputer" accept="image/png,image/jpeg,image/gif,image/jpg"	/>
    addImg(e){
    	console.log(e)
    	let file = e.target.files[0];
    	console.log(file)
    	this.uploadImg(file)
    },
    //上传图片
    uploadImg(img) {
    		var trave = "trave"
    		let config = {
    			headers: {
    				'Content-Type': 'multipart/form-data',
    				'contentType': "application/json"
    			},
    			
    		}
    
    		//我这边的项目中formData中传的东西较多,formData是看后台让传什么东西,你就传什么
    		var formData = new FormData()
    		formData.append('userId','') 用户的id
    		formData.append('projectName','') //项目名
    		formData.append('folderName','imgs/trave') //标识要给他传到那个文件夹中
    		formData.append('waterTypes','0')
    		formData.append('businessType', trave)//这个是我项目中必传的
    		**formData.append('file', img)** //最重要的就是这一步,要给后台传的文件
    		formData.append('expirationDate','0')
    		formData.append('source', 'wx_gr')
    		axios.post('这里写的是路径', formData, config).then(res => {
    			console.log(res)
    		}).catch(err => {
    			console.log(err)
    		})
    	}
    
    展开全文
  • vue项目打包原生app(HBuild)

    千次阅读 2019-03-04 21:23:29
    开发完成的web app项目,npm run dev可以正常预览的项目 1,将项目目录下config文件内index.js中assetsPublicPath修改为assetsPublicPath: './' 如图所示:留意箭头所指的内容(哈哈)。是build对象下的。 2,...

    开发完成的web app项目,npm run dev可以正常预览的项目

    1,将项目目录下config文件内index.js中assetsPublicPath修改为 assetsPublicPath: './' 如图所示:留意箭头所指的内容(哈哈)。是build对象下的。

    2,执行npm run build之后生成dist文件夹;

    3,打开HBuilder,文件->打开目录,如下图

    选择刚才生成的dist目录,输入项目名称,点击完成;

    3,此时会看到HBuilder项目下多了一个W标识(表示web项目)的myApp项目,

     

    右键菜单选择‘转换成移动‘转换成移动App’,然后‘myApp’前面的标识就变成了‘A’,至此就已经转换成移动app了,

    随后就可以利用HBuilder连接真机运行

    或者发行成为原生app

     

    注意:如果真机运行或模拟器运行报如下错误

    Uncaught Error: [vuex] vuex requires a Promise polyfill in this browser

     

    可参考:http://www.jianshu.com/p/3e3b171179f8

    以下为以android apk为例的发行为原生app的步骤

    1,点击发行,这里发布测试apk选择使用DCloud公用证书,点击‘打包’;

    2,正在制作安装包,制作完成,手动下载

     

    3,将下载的apk安装到android的手机看效果;

    展开全文
  • 很久没更新博客了,最近在项目中遇到了这么一个问题,需要在Vue项目中,引入原生的js;也需要在原生的js中调用vue组件的函数。 一、Vue中引入原生未封装js 一般情况下对于已封装的js文件,只需要import该js,然后...
  • vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,这篇文章主要介绍了vue与原生app的对接交互的方法,非常具有实用价值,需要的朋友可以参考下
  • vue项目中使用原生的高德地图API

    千次阅读 2021-02-25 14:39:36
    vue项目中使用高德地图,大家应该会使用vue-amap组件,但vue-amap中的大部分功能还是要使用高德地图原生API,所以我直接使用了高德地图原生API进行开发。 首先附上高德地图原生API文档地址:...
  • vue与原生安卓相互调用

    千次阅读 2020-05-27 22:29:49
    先将vue项目放到一个内网地址或者外网地址中,然后安卓端通过“webView.loadUrl()”将vue项目引入。安卓端将要调用的方法名暴露在window对象中,由vue直接在methods中调用并携带参数。 methods:{
  • vue项目中调用原生的支付宝接口

    千次阅读 2019-08-13 12:06:05
    vue项目中调用支付宝进行支付有两种方式: 一、支付宝H5网页支付,这种方式会从内部的项目跳转到支付宝的外部链接,只需要后台配置即可。 在前端点击支付的按钮的时候,会请求后台的接口,后台会返回一个form表单...
  • 我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件。我们在引用组件之时只需将组件页面引入,再注册即可使用。那么不用脚手架,如何进行组件开发呢,本文先介绍一下...
  • [使用 Weex 和 Vue 开发原生应用] 0 项目介绍和文章目录.pdf
  • Vue项目构建开发入门

    2020-08-03 20:49:28
    开篇:Vue CLI 3 项目构建基础 大家好,当你点进这个标题,开始阅读本章的时候,说明你对 Vue.js 是充满好奇心和求知欲的。我之前写过一篇文章,这样评价 Vue.js,称它是“简单却不失优雅,小巧而不乏大匠”的作品,...
  • vue 可以编写原生应用吗 语言形式 (vue-form) A simple web form app built with Vue. 使用Vue构建的简单Web表单应用程序。 View demo 查看演示 Download Source 下载源 项目设置 (Project setup) yarn install ...
  • 小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下。 0.通过url传输数据:(一般是在入口页面传下app...
  • weex-hackernews 是一个使用 Weex + Vue 开发原生应用项目,可以实现同一份代码在三端中运行。不仅用到了 Weex 和 Vue.js 的各种特性,也用到了 Vuex 和 vue-router ,在 Web 、 Android 、 iOS 上都能正常工作,...
  • 使用vue开发app项目,怎么使用手机的原生功能,以获取手机的相册,调用摄像头为例。 这里使用的是hbuilder打包。 第一步: 定义一个vue组件,代码如下: <template> <div class="mui-content"> ...
  • 今天我在vue.js项目实战开发过程中遇到了实现轮播图效果的问题,因为不想因为一个轮播图而引用整个jquery,而且我还发现自己根本就不清楚移动端的一些事件,所以我就进行了一些资料查找,并最终解决了这个问题,接...
  • Vue项目开发规范

    千次阅读 2019-06-10 18:48:59
    本文档为前端 vue 开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范 规范目的 为提高团队协作效率 便于后台人员添加功能及前端后期优化维护 输出高质量的文档 命名规范 为了让大家书写...
  • vue + 高德原生 API实现地图可视化

    千次阅读 2020-09-03 18:38:12
    由于项目需求,需要使用地图定位,最终决定使用 vue + 高德原生API; 当前项目环境 vue2.0+; 创建项目时,如果安装 eslint ,建议关闭eslint语法限制; 关闭方法: 在build/webpack.base.conf.js文件中,注释或者...
  • 出现报错信息: [Vue warn]: Property “visible” must be accessed with “data.visible"becausepropertiesstartingwith"data.visible" because properties starting with "data.visible...or “_” are not proxied...
  • 项目背景:现有H5项目,要快速完成一个app开发,由于周期紧张只能先用H5套壳完成一版app 一 、什么是webViewjavascripBridge? WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁,用白话来说就是实现java...
  • vue项目开发的目录结构

    千次阅读 2018-03-28 18:55:02
    vue项目开发的目录结构一、通过命令行工具安装vue(npm install webpack vue-project) build -- 项目构建的相关代码config -- 配置目录,包括端口、环境等的配置src -- 开发的主要目录 -- asset : 放置一些...
  • Weex 和 Vue 已经互相支持,这也不是新闻了(如果你觉得是新闻,自行在网上搜相关信息……),Vue.js 也因此具备了开发原生应用的能力。 Vue 官方仓库中包含了适配 Weex 平台的代码,Weex 也引入了 Vue Runtime 并...
  • 原生开发也应该掌握混合开发的能力,毕竟现在多数公司都要求hybrid开发经历.(好好中文不用,非要hybrid) 因为公司项目Vue用的比较成熟, 跟着学习了一波 一 配置必要环境 学习任何一门语言官方资料永远都是最重要,也...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,916
精华内容 8,766
关键字:

vue项目与原生开发

vue 订阅