美文网首页Vue移动端
vue 移动端 实战积累

vue 移动端 实战积累

作者: 郭先森啊 | 来源:发表于2020-04-24 10:27 被阅读0次

    1、关于hbuilder打包app点击手机返回键直接退出app的解决\

    https://blog.csdn.net/xuefeng11111/article/details/86501992

    下面是解决方案

    ( 1 )、首先我们新建一个appback.js文件,名字随便起,然后将下面的内容复制进去

    /**

    * 解决hbuilder打包app之后点击手机返回键直接退出app的

    */

    document.addEventListener('plusready', function () {

      var webview = plus.webview.currentWebview()

      plus.key.addEventListener('backbutton', function () {

        webview.canBack(function (e) {

          if (e.canBack) {

            webview.back()

          } else {

            // webview.close() //hide,quit

            // plus.runtime.quit()

            // 首页返回键处理

            // 处理逻辑:1秒内,连续两次按返回键,则退出应用;

            var first = null

            plus.key.addEventListener(

              'backbutton',

              function () {

                // 首次按键,提示‘再按一次退出应用’

                if (!first) {

                  first = new Date().getTime()

                  console.log('再按一次退出应用') // 此处可以用自定义提示

                  setTimeout(function () {

                    first = null

                  }, 1000)

                } else {

                  if (new Date().getTime() - first < 1500) {

                    plus.runtime.quit()

                  }

                }

              },

              false

            )

          }

        })

      })

    })

    ( 2 )、然后在main.js中将该文件引入进去即可

    import './utils/appback.js'

    2、Android Studio 环境配置 && 教程 

    Android Studio 相关文件

    3、Vue.js踩坑记录:vue-cli 3.0 项目打包后页面空白 

    ①:Vue.js踩坑记录1 

    ②:Vue.js踩坑记录2

    3、hbuilder打包报错:java.lang.IllegalStateException: Expected BEGIN_OBJECT but was BEGIN_ARRAY at line 7 column 15 path $.icons

    一个棘手的问题,在网上找几乎没有出现这样的案例,个别也只有翻译没有解决方式,,,,,自己研究一番发现这实际上都不算是个问题

    这句话翻译:这个位置应该是个对象而不是数组,解决方法:

    在manifest.json文件中找到7行15列,将:

    "icons" :[{

    "src" : "./img/icons/android-chrome-512x512.png",

    "sizes" : "512x512",

    "type" : "image/png"}

    {

    "src" : "./img/icons/android-chrome-512x512.png",

    "sizes" : "512x512",

    "type" : "image/png"}]

    替换为:

    "icons" :{

    "src" : "./img/icons/android-chrome-512x512.png",

    "sizes" : "512x512",

    "type" : "image/png"},

    之后显示了个问题,version->name没有该节点,那就自己加一个呗:

    在与上边的同级位置加:

    "version":{

    "name" : "dongqiudi"

    },

    值自己编一个

    4、 vue如何显示图片是后台传过来的图片地址

    来源:https://q.cnblogs.com/q/126654/

    方法1、如果你用的 vue-cli 3.0 ,可以使用 环境变量。具体的自己去看文档。

    方法2、简单办法就是:

    后端肯定是有个具体的域名地址给你的 http://xxxx.com/

    let host = "后端的地址"

    getImageList() {

    getImageList().then(response => {

    // 这里 data ,你遍历一下。

    response.data = response.data.map((item,index)=>{

    item.src = host + item.src

    return item

    })

    this.imageList=response.data;

    });

    },


    相关文章

      网友评论

        本文标题:vue 移动端 实战积累

        本文链接:https://www.haomeiwen.com/subject/fvyxwhtx.html