demo链接
1、样式统一
为了达到共用一套样式，采用px2rem-loader和px2rpx-loader进行代码的打包，细节如下：

  • 由于UI设计图是在蓝湖上标注，宽度750，选择像素 PX
  • 样式中直接写px，在小程序端会转化成rpx，在H5端会转化成rem

2、参数配置
在px2rem-loader中配置如下

1
2
3
 
options: {
  remUnit: 75
}

在px2rpx-loader中配置如下

大专栏  mpvue框架的小程序和H5同时开发gutter"> 
1
2
3
4
 
options: {
  baseDpr: 1,
    rpxUnit: 1
}

3、注意事项
由于在px2rem-loader中，所有px均转化成rem，故在使用1px时会将1转化成一个很小的rem小数，可能会造成样式失效，故可以使用 /* no */ ，表示不进行转化

1
 
border: 1px solid #ca150f; /* no */

mpvue框架的小程序和H5同时开发的更多相关文章

  1. 基于 mpvue 框架的小程序选择控件，支持单列，多列，联动

    最近在学着写mpvue小程序,在做选择控件时候遇到了点问题,按照微信小程序方法picker,很不方便! 在网上搜到一个很好用的组件下面给大家分享: 组件说明文档链接:https://go.ctolib ...

  2. mpvue体验微信小程序开发

    微信小程序 https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18082114 微信小程序是一种全新的连接用 ...

  3. Taro 多端开发的正确姿势：打造三端统一的网易严选（小程序、H5、React Native）

    笔者所在的趣店 FED 早在去年 10 月份就已全面使用 Taro 框架开发小程序(当时版本为 1.1.0-beta.4),至今也上线了 2 个微信小程序.2 个支付宝小程序. 之所以选用 Taro, ...

  4. 用 React 编写的基于Taro + Dva构建的适配不同端（微信小程序、H5、React-Native 等）的时装衣橱

    前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...

  5. 从0到1构建适配不同端（微信小程序、H5、React-Native 等）的taro + dva应用

    从0到1构建适配不同端(微信小程序.H5.React-Native 等)的taro + dva应用 写在前面 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种 ...

  6. 承接微信小程序外包 H5外包就找北京动点软件开发团队

    承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询,索取案例! QQ:372900288 ...

  7. 承接小程序外包 微信小程序外包 H5外包 就找北京动点软件

    承接小程序外包 微信小程序外包 H5外包 就找北京动点软件 长年承接微信小程序.微信公众号开发 全职的H5开发团队,开发过几十款微信小程序公众号案例 欢迎来电咨询 QQ:372900288 微信:li ...

  8. 小程序和H5互调

    小程序跳H5页面 https://blog.csdn.net/mytljp/article/details/81030687(copy) H5页面跳小程序 https://blog.csdn.net/ ...

  9. 小程序与h5的相互跳转

    1, 小程序跳h5 <web-view src="https://zgl.seamo.cn/zglh5/kjzjlist1.html"></web-view> ...

随机推荐

  1. 29. docker swarm 创建 三个节点 swarm 的集群

    1.使用 vagrant 部署 三台 centos/7 的 环境 ###Vagrantfile # -*- mode: ruby -*- # vi: set ft=ruby : Vagrant.req ...

  2. 201503-2 数字排序 Java

    思路: 将出现过的数以及次数放进Map中,转成List,用Comparator就可以排序了.参数中o2-o1,与排序规则相反,为降序 import java.util.ArrayList; impor ...

  3. JavaEE--分布式与集群

    参考:https://www.zhihu.com/question/20004877 集群是个物理形态,分布式是个工作方式. 只要是一堆机器,就可以叫集群,他们是不是一起协作着干活,这个谁也不知道:一 ...

  4. fscanf的用法

    fscanf用于读取字符串数据流,遇到空白字符(空格' '; 制表符'\t'; 新行符'\n')就停止,若要读取完整的一行数据,可以使用格式控制("%[^\n]%*c"),或者使用 ...

  5. no.2淘宝架构背后——零售业务中台架构设计探讨及实践读后感

    2017年8月12日,袋鼠云首席架构师正风在“网易博学实践日:大数据与人工智能技术大会”进行<淘宝架构演进背后——零售业务中台架构设计探讨及实践>演讲分享.传统零售行业如何选择应对新经济模 ...

  6. Python笔记_第一篇_面向过程_第一部分_8.画图工具(小海龟turtle)

    turtle 是一个简单的绘图工具. 提供一个小海龟,可以把它理解为一个机器人,只能听懂有限的命令,且绘图窗口的原点(0,0)在中间,默认海龟的方向是右侧海龟的命令包括三类:运动命令.笔画控制命令.其 ...

  7. mnist数据集下载

    http://yann.lecun.com/exdb/mnist/ THE MNIST DATABASE of handwritten digitsYann LeCun, Courant Instit ...

  8. 爬虫加入数据post请求

    formdata = {'...': '...', '......': '......', '......': '......'}HEADERS = { 'User-Agent': 'Mozilla/ ...

  9. React 通过注释自动生成文档

    最近找了一些文档的生成工具,结果发现了这个 React Styleguidist 可以通过注释,自动生成对应的文档,对于 react 库来说十分方便 安装 npm i -D react-stylegu ...

  10. 2019-ECfinal-M题-value

    题目传送门 sol:每个下标都有选和不选两种情况,所以总方案数是$2^{n}$,在$n$最大是$100000$的情况下不符合要求.可以这样想,假设$i^{p}=k$有符合题目要求的解,还有一个整数$j ...