精华内容
下载资源
问答
  • 在本篇内容里小编给大家整理了关于vue写h5页面的方法以及注意点分析,有需要的朋友们跟着学习下吧。
  • vue 写h5页面-摇一摇

    2018-05-16 14:32:00
    vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发。你的页面现在需要模拟微信的摇一摇动作。  项目环境: vue-cli 完成的一个项目  准备插件(包):依赖的第三方的插件...

      vue配合其他ui框架除了开发一个完整的web项目外,也有不少的项目做一些h5的活动页面开发。你的页面现在需要模拟微信的摇一摇动作。

      项目环境: vue-cli 完成的一个项目

      准备插件(包):依赖的第三方的插件(后续会完成如何写vue插件的方法)shake.js ,github地址: https://github.com/alexgibson/shake.js  我使用的github 项目要点赞(现在要养成习惯)

      使用:在vue的一个组件里使用这个 插件。

      接下来我们看这个插件提供的api,灵不灵照书行。

      shake.js 到是没有提供一个完成的 vue 使用的demo api ,现在要尝试使用这个

      安装包: npm install shake.js --save

      使用包

      

      基本上是按照api 文档上来搬的代码。我们在摇一摇的时候,处理发出声音并振动。

      查看我们的摇一摇的结果:

      因为在pc 上无法完成我们的摇一摇,所以要在手机上查看。在一个局域网下,发送可以访问自己电脑的ip给你的 小 phone,然后就是使劲的要吧。 顺便提供一个摇一摇的声音下载地址: http://sc.chinaz.com/yinxiao/

      附件:本vue组件的完成内容

      

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>Essential Links</h2>
        <span @click="toastDemo"> 123</span>
        <h4>手机摇一摇的功能</h4>
        <div>
          <audio src="../../static/5018.wav"  ref="shakeAudio">
            您的浏览器不支持 audio 标签。
          </audio>
        </div>
      </div>
    </template>
    
    <script>
    // var Shake = require('shake.js'); // commonjs 的方式引入
    import Shake from 'shake.js'; // es6的方式导入
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      created () {
      },
      mounted () {
        let myShakeEvent = new Shake({
            threshold: 12, // optional shake strength threshold
            timeout: 500 // optional, determines the frequency of event generation
        });
        myShakeEvent.start();
        window.addEventListener('shake', this.shakeEventDidOccur, false);
      },
      methods: {
        toastDemo () {
          // toastPlugin('你好,npm package')
        },
        shakeEventDidOccur () {
          // alert("it's shake!")
          // myShakeEvent.stop();
          let audio = this.$refs.shakeAudio;
          if (window.navigator.vibrate) {
            navigator.vibrate(500);
          }
          audio.play()
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

     

    麻烦点:

    在微信里面,ios内置的浏览器是没有声音的,这时候需要,引入微信的api,通过他触发声音的播放

    地址:

    https://res.wx.qq.com/open/js/jweixin-1.0.0.js

    引用:
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    (这个js写的好像有点问题,在vue 单个组件里面进行引用的时候,无法使用,还没找出原因,我是直接在index.html 中 script 引用的)
     
    使用:
      <audio id="shakeAudio" :src="/5218.mp3" preload ref="shakeAudio"></audio>
    methods: {
      palyAudio () {
      window.wx.config({    debug:
    false,    appId: '',   timestamp: 1,   nonceStr: '',   signature: '',   jsApiList: []   });   window.wx.ready(function () { document.getElementById('shakeAudio').play();   });
    }
    }

    给window的全局对象增加一个方法,然后我们对这个方法进行配置调用。

    如果不引用线上的地址,想下载到本地来,在index.html里面应该怎么引入呢?
     
    因为这个是vue-cli的打包工具使用的,可以利用这个webpack的环境变量 来帮助我们找到这个相对路径。因为我们知道,这个项目部署上线的时候,是需要npm run build 的,打包后,会把开发文件打包成一个index.html 文件和一个static的静态文件夹,我们开发需要的css,js文件等都会打包到这static文件夹,所以,当我们把目标js文件放进开发时候的static文件,要打包下。废话那么多,只有一行可用的代码:
    <script src="<%= htmlWebpackPlugin.files.publicPath %>static/js/jweixin.js"></script>
    查看下目标js文件是否打包成功:
    执行 npm run build   
    .... (打包中)
    查看打包后的文件夹下面的index.html ,格式化代码如下
    <!DOCTYPE html>
    <html>
         
        <head>
            <meta http-equiv=Content-Type charset=UTF-8>
            <meta http-equiv=Cache-Control content=no-cache>
            <title></title>
            <meta name=apple-mobile-web-app-capable content=yes>
            <meta name=apple-mobile-web-app-status-bar-style content=black>
            <meta name=format-detection content="telephone=no">
            <meta name=format-detection content="email=no">
            <meta name=keywords content="">
            <meta name=description content="">
            <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no,minimum-scale=1,maximum-scale=1">
            <script src=http://***ip***/app_4.5/static/js/jweixin.js></script>    //look, 打包过来了
            <link href=http://****ip***/app_4.5/static/css/app.177c68abba2e90f66c73548a7aaaaa1d.css rel=stylesheet>
        </head>
         
        <body>
            <div id=app>
                <router-view></router-view>
            </div>
            <script type=text/javascript src=http://*****ip**/app_4.5/static/js/manifest.7baf77e3b1560c6272e5.js></script>
            <script type=text/javascript src=http://*****ip*****/app_4.5/static/js/vendor.5ec5b947fd6c3ef44af7.js></script>
            <script type=text/javascript src=http://*****ip****/app_4.5/static/js/app.fc7bdc24d6e737613193.js></script>
        </body>
     
    </html>

    (打包后相关的ip地址已经隐藏)

     
     
     
    展开全文
  • vue 写h5页面-摇一摇

    2019-09-25 21:58:42
    msg: 'Welcome to Your Vue.js App' } }, created () { }, mounted () { let myShakeEvent = new Shake({ threshold: 12, // optional shake strength threshold timeout: 500 // optional, determines the...

    依赖的第三方的插件 shake.js 

    github地址: https://github.com/alexgibson/shake.js  

    提供一个摇一摇音效下载地址:http://aspx.sc.chinaz.com/query.aspx?keyword=%E6%91%87%E4%B8%80%E6%91%87&classID=14

    安装包shake.js:

       npm install shake.js --save

     

    vue组件内容:

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>Essential Links</h2>
        <span @click="toastDemo"> 123</span>
        <h4>手机摇一摇的功能</h4>
        <div>
          <audio src="../../static/5018.wav"  ref="shakeAudio">
            您的浏览器不支持 audio 标签。
          </audio>
        </div>
      </div>
    </template>
    
    <script>
    // var Shake = require('shake.js'); // commonjs 的方式引入
    import Shake from 'shake.js'; // es6的方式导入
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      },
      created () {
      },
      mounted () {
        let myShakeEvent = new Shake({
            threshold: 12, // optional shake strength threshold
            timeout: 500 // optional, determines the frequency of event generation
        });
        myShakeEvent.start();
        window.addEventListener('shake', this.shakeEventDidOccur, false);
      },
      methods: {
        toastDemo () {
          // toastPlugin('你好,npm package')
        },
        shakeEventDidOccur () {
          // alert("it's shake!")
          // myShakeEvent.stop();
          let audio = this.$refs.shakeAudio;
          if (window.navigator.vibrate) {
            navigator.vibrate(500);
          }
          audio.play()
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

    需要注意的是在微信里面,ios内置的浏览器是没有声音的,这时候需要,引入微信的api,通过他触发声音的播放。

     npm install weixin-js-sdk --save
    import wx from 'weixin-js-sdk';
     
    使用方法:
    <audio id="shakeAudio" :src="/5218.mp3" preload ref="shakeAudio"></audio>
     
    methods: {
      palyAudio () {
      window.wx.config({    debug: false,    appId: '',   timestamp: 1,   nonceStr: '',   signature: '',   jsApiList: []   });   window.wx.ready(function () { document.getElementById('shakeAudio').play();   });
    }
    }

    转载于:https://www.cnblogs.com/luobiao/p/10552216.html

    展开全文
  • 下面介绍一下VueH5页面如何使用支付宝支付。其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,好支付接口)。 触发支付宝支付调用后台接口,后台会返回支付宝提供的form表单,我们只要在...
  • VueH5页面唤起支付宝支付

    千次阅读 2019-04-17 17:51:37
    下面介绍一下VueH5页面如何使用支付宝支付。其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,好支付接口)。 触发支付宝支付调用后台接口,后台会返回支付宝提供的form表单,我们只要在...

    目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口)。

    触发支付宝支付调用后台接口,后台会返回支付宝提供的form表单,我们只要在vue里面创建新节点,将返回的form表单append进去,并提交就可以唤起支付宝支付。另在此说一下这个returnUrl, 它是支付后支付宝回调的页面。具体可以根据自身业务,后台写死或者由前端控制。

    methods () {
      /**
       * 支付宝支付
       */
      goAlipay () {
        this.$loading.show()
        const data = {
          /* 自身接口所需的一些参数 */
          ...
          amount: this.price,
          /* 支付后支付宝return的url */
          // returnUrl: 'www.baidu.com'
          returnUrl: window.location.origin + window.location.pathname + '?userParams=' + this.userParams
        }
        this.$http(
          this.$apiSetting.alipay,
          data
        ).then(res => {
          this.$loading.hide()
          if (res.data.statusCode === '000000') {
            const div = document.createElement('div')
            /* 此处form就是后台返回接收到的数据 */
            div.innerHTML = res.data.data.alipayInfo
            document.body.appendChild(div)
            document.forms[0].submit()
          }
        }, error => {
          this.$loading.hide()
          console.log(error)
        })
      }
    }
    
    展开全文
  • 有时候我们为了前端页面可以匹配不同分辨率的屏幕,会使用rem来对页面进行布局,无论基础px值设置得多么好计算,在rem数值的时候,都需要对设计图原始的px值进行一番换算。 当当当当,来介绍一下两个好朋友,**...

    有时候我们为了前端页面可以匹配不同分辨率的屏幕,会使用rem来对页面进行布局,无论基础px值设置得多么好计算,在写rem数值的时候,都需要对设计图原始的px值进行一番换算。

    当当当当,来介绍一下两个好朋友,postcss-pxtoremlib-flexible ,安装配置这两个依赖,我们就可以实现我们想要的功能啦。

    1、首先,我们先来安装包:

    npm install amfe-flexible --save-dev
    npm install postcss-pxtorem --save-dev
    

    2、在main.js中引入lib-flexible

    import 'amfe-flexible';
    

    3、配置postcss-pxtorem
    首先找到.postcssrc.js文件,增加以下内容:

    "postcss-pxtorem": {
       rootValue: 75, // 根据设计图尺寸写,设计图是750,就写75
       propList: ['*'], // 需要被转换的属性
       selectorBlackList: [] // 不进行px转换的选择器
     }
    

    在这里插入图片描述完成以上配置就可以实现px转rem了,需要注意的是我这里是在cli2版本去修改的配置,cli3的配置方式是:在根路径下新增postcss.config.js文件(如果有,就不新增),配置的内容与上相同

    展开全文
  • 问题背景 由于我们公司做移动端用的是...很不符合移动端的操作,因此需要优化,自己动手了一个下拉刷新的但是不好用,而且bug多,因此找了很长时间才发现了dropload这个框架,比较的容易上手,简单,但是文档...
  • 这篇文章之前我刚刚自己完成了一个H5落地页的project,没做过的我只能搜索百度看前辈们的做法,接下来我就会把我做的步骤给大家列下来(也是参考了其他前辈们的写法)文末我会把前辈们的连接留下 我只是做也一些...
  • 需要页面刚开始加载的时候获取到元素,一般都是在mounted中获取页面元素,this.$refs.dom的时候打印的值是undefined,但是打印this.$refs的时候就会有dom元素的值显示,我试着加了一个定时器,等页面加载完之后再...
  • 在前面刚入门前端的时候过很多的微信H5页面,时隔多年感觉应该是手到擒来,不曾想竟很是费了一些功夫。现在把本次开发过程中遇到的问题以及我是如何解决的,做个记录。防止自己以后再去解决解决过的问题。github...
  • 本文主要介绍移动端。...这里介绍一下,如何在H5中运vue,嵌套到用到app中。首先引入vue CDN ,记得去扒一个vue.js. 下载下来,不要用htpp,这样可以避免有些模块因为网卡导致,页面加载错乱。...
  • vue echarts h5.rar

    2019-08-14 10:55:11
    h5页面写的一个echarts页面,采用的vue语法,js引入都在压缩包里面
  • vue+mintUI h5页面demo

    2019-08-08 15:29:04
    本项目采用vue+mintui构建的移动端h5页面,完整的项目拿来就可以新项目
  • 刚入门前端的时候过很多的微信H5页面,时隔多年感觉应该是手到擒来,不曾想竟很是费了一些功夫。现在把本次开发过程中遇到的问题以及我是如何解决的,做个记录。防止自己以后再去解决解决过的问题。 github:...
  • Vue开发微信H5页面总结

    千次阅读 2018-12-05 13:53:59
    刚入门前端的时候过很多的微信H5页面,时隔多年感觉应该是手到擒来,不曾想竟很是费了一些功夫。现在把本次开发过程中遇到的问题以及我是如何解决的,做个记录。防止自己以后再去解决解决过的问题。 一、微信网页...
  • 由于项目需要,一个H5页面,用了Vue.js,在页面中用到了时间插件,发现最新版的rolldate时间插件还不错,就用上了。 问题 因为页面涉及Tabs切换,所以我用来v-if来控制代码块的显示与隐藏,那么,问题来了,页面...
  • vue 实现H5跳转小程序

    2020-12-28 14:46:36
    这里自定义目录标题vue实现H5跳转小程序 vue实现H5跳转小程序 公司需求实现h5跳转小程序,看了很多文档发现对于小白不太容易理解,记录下,以备查阅。 适用环境 微信版本要求为:7.0.12及以上。 系统版本要求为:...
  • 1、在微信授权方面,这是个不得不吐槽的点,不能本地调试,必须每次打包...而且授权完成后最好把code这参数从URL上去掉,是为了避免不必要的麻烦,而且这个最好全局路由导航守卫中,这样能保证每个页面授权,就...
  • 调研基于 vueh5、后台换肤方案 调研结果 经过一些调研和以前的经验,大体分为两种方式: 方式一:内置几种主题样式,通过更换类名来实现动态改变小程序页面的元素色值。 优点:方便、改动少、适合主题样式变动...
  • 做题目页面H5页面Vue开发)

    千次阅读 2018-12-08 23:57:41
    做题目页面H5页面Vue开发) 最近公司需要,要一个可以做题目的H5小页面,需求是挺简单的(目前来说),就是可以上一题下一题的,另外不存在什么输入,全是选择题;我仔细想想觉得也不复杂,就打算用前些时候学的...
  • 工作中经常遇到一些奇怪的东西,我有个这样的需求,就是我vue项目被嵌套在别的h5项目页面下,so进入我的页面前需要判断他的h5页面有没有登录,这时候就需要我的客户端页面调用h5页面的登录方法。客户端页面(ios...
  • 以前过一篇文章,用来在微信浏览器中个性化分享页面 https://blog.csdn.net/youyudexiaowangzi/article/details/81983974 现在有如下问题: vue项目在微信浏览器中点击分享,只会分享进入到第一个页面的url,...
  • 目前发现本地运行项目都是默认的hash模式,如果发布的话最好使用...最近一个月没Android 一直在搞Vue的后台管理系统,uni-app,H5 等, 这种视图数据绑定的模式简直爽的不要,写页面处理数据太快太快了,太轻了 ...
  • vue微信H5长按无法弹出识别二维码

    千次阅读 2019-08-29 09:18:53
    使用vue写了一个H5项目,然后在IOS微信公众号里可以长按识别二维码,以便用户关注,但是发现在微信公众号无法弹出识别。 vue的路由是默认的:hash。 二、查找原因 网上搜索了很多方案,修改样式、尺寸大小、甚至...
  • 在编写的H5页面在手机app中出现一个问题,运行微信支付之后会发一个结果回调通知给H5页面,往往我们在组件内部好的方法是无法响应的。 例如以下情况: ———————————————————— 在组件内部的...
  • vue 开发微信公众号h5页面遇到的坑

    千次阅读 2019-03-09 11:43:00
    1、在微信授权方面,这是个不得不吐槽的点,不能本地调试,必须每次打包...而且授权完成后最好把code这参数从URL上去掉,是为了避免不必要的麻烦,而且这个最好全局路由导航守卫中,这样能保证每个页面授权,就...
  • 在公司使用 vue h5 已经一年多了,想着总结下期间的一些心得,可能会有更好的做法,也欢迎各位大佬指正。 第一篇主要如何动态缓存 h5 页面。 为了让 h5 体验足够好,一个最好的方式就是充分利用缓存,而不是...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 340
精华内容 136
关键字:

vue写h5页面

vue 订阅