vue 使用外部JS与调用原生API操作示例

2024-12-21 09:48:41

本文实例讲述了vue 使用外部JS与调用原生API操作。分享给大家供大家参考，具体如下：

vue 使用外部JS

概要

在开发时我们会经常需要使用到外部的JS,这样我们需要引入外部js，然后进行使用。

实现方法

我们在开发的过程中需要使用到 sha256 将用户的密码进行加密传输。

我们对js进行一点点改造。

function sha256_digest(data) {
  sha256_init();
  sha256_update(data, data.length);
  sha256_final();
    return sha256_encode_hex();
}
export {sha256_digest}

像这个代码，我们需要加一行代码，将这个js方法导出。

export {sha256_digest}

在使用的时候我们引入JS.

import { sha256_digest } from "@/assets/sha256.js"

我们可以导入一个或者多个方法，这里导入了一个方法。

这样在代码中使用就好了

sha256_digest(this.user.password)

调用原生API

概要

我们在开发手机端程序的时候了，我们经常需要使用到拍照，二维码的功能.数字天堂公司提供了大量的原生API支持。

http://www.html5plus.org/doc/

实现

1.在hbuilder 选择需要使用的模块

2.在组件代码中调用相应的API接口。

比如拍照：

takePhoto(){
      var _self=this;
      var cmr = plus.camera.getCamera();
      var fmt = cmr.supportedImageFormats[0];
      cmr.captureImage( function( path ){
        plus.io.resolveLocalFileSystemURL(path, function(entry) {
            var tmpPath= entry.toLocalURL();
            var fileAry=[];
            fileAry.push(tmpPath);
            _self.compressImg(fileAry);
        })
       },
       function( error ) {},
       {format:fmt});
     }

plus 就是H5+ 的接口调用。

注意事项

我们在使用这些接口的时候，需要将系统打包成app，否则plus 不能使用。

希望本文所述对大家vue.js程序设计有所帮助。

webpack+vue-cli项目中引入外部非模块格式js的方法

在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v
详解vue项目中调用百度地图API使用方法

步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"
vue.js引入外部CSS样式和外部JS文件的方法

学习Vue.js动画时,需要引入一个animate.css,如何全局引入外部文件呢? 一.引入外部CSS样式文件 1. 在app.vue中<style>下直接引入对应的路径使用@import引入外部css,作用域是全局的,也可在相应的单vue组件引入,import并不是引入代码到<style></style>里面,而是发起新的请求获得样式资源,并且没有加scoped. <style scoped> @import "../static/font/
vue项目中在外部js文件中直接调用vue实例的方法比如说this

一般我们都是在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from 'vue'),这样很麻烦.在目前项目中我使用的方法是mian.js导出vue实例,然后在需要使用的js中引入. 步骤一:main.js导出vue实例 var vue = new Vue({ el: '#app
vue项目中api接口管理总结

默认vue项目中已经使用vue-cli生成,安装axios,基于element-ui开发,axiosconfig目录和api目录是同级,主要记录配置的相关. 1. 在axiosconfig目录下的axiosConfig.js import Vue from 'vue' import axios from 'axios' import qs from 'qs' import { Message, Loading } from 'element-ui' // 响应时间 axios.defaults.
Vue项目中引入外部文件的方法（css、js、less）

这两天学习了Vue.js ,正好了解了如何引入外部文件的方法,而且很重要,所以,今天添加一点小笔记. 例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步骤二:在src/assets下面新建css.js.less.fonts文件夹,并放入对应文件. 将bootstrap.css放入css目录下,bootstrap.min.js放入js文件下,font
深入理解Vue官方文档梳理之全局API

Vue.extend 配置项data必须为function,否则配置无效.data的合并规则(可以看<Vue官方文档梳理-全局配置>)源码如下: 传入非function类型的data(上图中data配置为{a:1}),在合并options时,如果data不是function类型,开发版会发出警告,然后直接返回了parentVal,这意味着extend传入的data选项被无视了. 我们知道实例化Vue的时候,data可以是对象,这里的合并规则不是通用的吗?注意上面有个if(!vm)的判断,实例化
vue实现的请求服务器端API接口示例

本文实例讲述了vue实现的请求服务器端API接口.分享给大家供大家参考,具体如下: import axios from 'axios' import router from '@/router' axios.defaults.timeout = 3000 axios.defaults.baseURL = '' axios.interceptors.request.use( config => { // const token = getCookie('名称') config.data = con
Vue 2.x教程之基础API

本文主要介绍的是关于Vue 2.x之基础API的相关内容,主要内容如下模板语法(文本插值.属性绑定.JS表达式.过滤器.指令) Vue实例(viewModal(属性+函数).生命周期) 计算属性和监听器 (computed(get,set) 与 watch) 样式绑定(对象绑定.数组绑定.内联绑定) 条件绑定(v-if v-show) 列表渲染 (v-for.:key.数组监测.过滤/排序) 事件处理 (监听.修饰符.key修饰符) 表单输入绑定(text.checkbox.radio.sel
详解Vue2 SSR 缓存 Api 数据

本文介绍了Vue2 SSR 缓存 Api 数据,分享给大家,具体如下: 1. 安装缓存依赖: lru-cache npm install lru-cache --dev 2. api 配置文件 config-server.js var LRU = require('lru-cache') let api if (process.__API__) { api = process.__API__ } else { api = process.__API__ = { api: 'http://loca
vue.js父组件使用外部对象的方法示例

最近在碰到有同学问我,vue父组件怎么使用外部对象,具体例子如下: 有组件a: <div @click="onClick">component a</div> // componet a ... methods: { onClick(evt) { // doSomething 这里只能拿到 mouseEvent this.outsideClickHandler(evt); // 调用外部处理函数 } } ... 有组件B,引用组件a,并传入outsideClic

vue 使用外部JS与调用原生API操作示例

相关推荐

随机推荐