在开发微信小程序或者微信网页H5的时候,有时我们利用外部组件可能不兼容这两者,需要区分开来,可以在对应的mainjs中配置如下

let platform;
try{
if(wx){
platform='minprogram';
}
}catch(){
platform='H5'
}
Vue.prototype.platform = platform

代码解释: 在微信小程序中 wx作为全局变量能够在任何界面中使用,而在chrome中,wx则为undefined,然后给Vue这个构造函数的原型增加一个属性,每个页面都能够使用

例如:

<van-action-sheet v-if="platform=='minprogram'" :show="showChoose" :actions="actions" @close="onClose" @select="onSelect" />
<van-action-sheet v-if="platform=='H5'" v-model="showChoose" :actions="actions" @close="onClose" @select="onSelect"></van-action-sheet>

mpvue中的平台状态判断(H5网页 or 小程序)的更多相关文章

  1. 判断h5页面是小程序环境还是微信环境

    1.话不多说直接上代码,已使用有效 <script type="text/javascript" src="https://res.wx.qq.com/open/j ...

  2. Android原生同步登录状态到H5网页避免二次登录

    本文解决的问题是目前流行的 Android/IOS 原生应用内嵌 WebView 网页时,原生与H5页面登录状态的同步. 大多数混合开发应用的登录都是在原生页面中,这就牵扯到一个问题,如何把登录状态传 ...

  3. Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序)

    Java生鲜电商平台-电商中"再来一单"功能架构与详细设计(APP/小程序) 说明:在实际的业务场景中(无论是TO B还是TO C)不管是休闲食品.餐饮.水果.日用百货.母婴等高频 ...

  4. 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结

    前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...

  5. 试玩mpvue,用vue的开发模式开发微信小程序

    mpvue,美团开源的vue文件转换成小程序的文件格式,今天玩了一下练练手 mpvue文档地址: http://mpvue.com/mpvue/#_1 暂时有几个点需要注意的: 1.新增页面需要重新启 ...

  6. 今天记录一下h5跳转小程序,可以通过短信推广小程序

    今天记录一下h5跳转小程序最简单的方法,首先准备条件,是一个已经上线的小程序 根据URL Schame进行跳转,在微信公众平台登录自己的小程序,然后生成RL Schame,如下图 其次按照步骤进行小程 ...

  7. H5 页面与小程序之间 传递数据

    H5 页面与小程序之间 传递数据 小程序里面的 H5页面与小程序之间怎么传递数据 webview与小程序之间的实时通信 webview主动发消息给小程序 webview可以利用jssdk提供的 wx. ...

  8. 沐雪多用户微信公众平台开发源码,商城小程序源码(2018年最新的asp.net C# 微信源码,小程序源码)

    现售价5400元,就可以搭建自己的微信平台啦 购买地址:https://item.taobao.com/item.htm?id=539102325336 该系统是由[上海沐雪网络]独家授权销售,其他地 ...

  9. 使用Mpvue配合Weui开发面试题题库微信小程序,并且发布到正式环境

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_116 之前的一篇文章详细阐述了微信小程序开发的准备和入门以及环境搭建,这一次我们介绍如何将微信小程序如何上线,同时配合weui美化 ...

随机推荐

  1. k8s+jenkins

    1 server 的port , targetport, nodeport的区别 targetport为容器的暴露端口,为最后端的端口 port可以理解为pod的端口,pod是容器的外层,该端口可以在 ...

  2. 24.mongodb可视化工具部署——2019年12月19日

    2019年10月09日17:05:54 教程链接:https://blog.csdn.net/qq_32340877/article/details/79142129 项目名:adminMongo g ...

  3. 配置 Kibana

    Products Cloud Services Customers Learn downloads EN Docs Kibana 用户手册 » 搭建 » 配置 Kibana «  在 Windows ...

  4. 【leetcode】1051. Height Checker

    题目如下: Students are asked to stand in non-decreasing order of heights for an annual photo. Return the ...

  5. git cherry-pick的使用

    [Git] Git整理(五) git cherry-pick的使用 2018年07月13日 23:49:16 FightFightFight 阅读数:31649    版权声明:本文为博主原创文章,未 ...

  6. Intellij IDEA中如何给main方法赋args

    Intellij IDEA中如何给main方法赋args 程序: package com.otherExample; /** * Created by 谭雪娇 on 2017/3/29. */publ ...

  7. IntelliJ IDEA最新版配置Tomcat(完整版教程)

    查找该问题的童鞋我相信IntelliJ IDEA,Tomcat的下载,JDK等其他的配置都应该完成了,那我直接进入正题了. 1.新建一个项目 2.由于这里我们仅仅为了展示如何成功部署Tomcat,以及 ...

  8. 区间查询异或最大值——cf1100F,hdu6579(线性基)

    hdu6579 题意初始时有n个数,现在有q次操作: 查询[l,r]内选择一些数使得异或和最大:在末尾加入一个数.题目强制在线. 思路对于i我们记录[1,i]每个基底最靠近i的位置和这个位置的值,然后 ...

  9. 【OPCAutomation】 使用OPCAutomation实现对OPC数据的访问

    折腾了一段时间研究OPC,理清了下位机.OPCServer 和OPCClient的关系和通信模型,终于能够来写一篇相关的博客了. 我们使用西门子的 S7 200 SMART作为下位机端,通过3G路由器 ...

  10. spring4.1.8扩展实战之四:感知spring容器变化(SmartLifecycle接口)

    本章是<spring4.1.8扩展实战>的第四篇,如果业务上需要在spring容器启动和关闭的时候做一些操作,可以自定义SmartLifecycle接口的实现类来扩展,本章我们通过先分析再 ...