zoukankan      html  css  js  c++  java
  • vue项目向小程序迁移调研

    概述

    今天调研了一下vue项目怎么向小程序迁移,有些心得,记录下来,供以后开发时参考,相信对其他人也有用。

    基本上vue项目向小程序迁移不外乎2种方法,一种是用小程序的web-view组件,另一种是用mpvue重新开发一个。第二种成本太高,所以我这里调研的基本上是第一种方法。

    解决方案

    对于一般项目来说,直接在小程序中给web-view组件的src填入vue项目的地址即可。但是web-view组件有如下限制:

    1.web-view组件的src不能动态变化。这个限制基本可以无视,因为我们是单页面,不需要经常改变web-view的src。但是有些特殊情况需要考虑这个限制,比如我们使用setData方法通过判断url的参数来加载web-view的src是行不通的。

    2.小程序的page中只能存在一个web-view。这个限制也可以无视,因为我们只需要一个web-view就行了。

    3.web-view里面的项目,不能用window.open(xx, '_blank'),但是可以用window.open(xx, '_self')。

    我们项目中有用到window.open(xx, '_blank'),所以我们需要判断是不是小程序环境,是的话就把window.open(xx, '_blank')改成window.open(xx, '_self')。判断方法有如下2种:

    // 方法1(推荐)——要求:微信版本>=7.0.0
    // 通过判断userAgent中包含miniProgram字样来判断小程序web-view环境。
    export function isMiniProgram() {
      return !!navigator.userAgent.match(/miniProgram/i);
    }
    
    // 方法2——无要求
    // 引入微信sdk,然后用微信sdk判断
    npm install weixin-js-sdk --save
    
    wx.miniProgram.getEnv(function(res) {
      console.log(res.miniprogram); //true
    });
    

    基本上按照上面的方法就可以使用web-view迁移vue项目到小程序中了。

    其它

    在调研过程中我还踩了一个其它的坑,这里也记录下来。

    1.使用微信sdk的postMessage传的值必须是字符串,所以对于对象来说需要先用JSON.stringify处理一下。

    wx.miniProgram.postMessage({ data: JSON.stringify(navigator.userAgent) });
    

    2.web-view的bindmessage属性可以接受postMessage传递过来的值,但是它只会在特定时机(小程序后退、组件销毁、分享)才触发。所以不能期望,马上传完值,web-view就能马上接收到并做出响应。

    3.官方文档对于navigateTo的描述有误。传递的值并不在options.query里面,而是就在options里面

    wx.navigateTo({
      url: 'test?id=1'
    })
    
    // test.js
    Page({
      onLoad(options) {
        console.log(options.id)
      }
    })
    
  • 相关阅读:
    Java代码是怎么运行的
    Java单例模式
    redis分布式锁实现
    zuul2.0
    配置ssh免密钥登陆多台从机
    Nifi-install-config
    Configure Access to Multiple Clusters
    kubernetes集群搭建(kubeadm,kubelet)
    shell 编程
    系统管理
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/10517176.html
Copyright © 2011-2022 走看看