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. vue项目准备2

    单文件组件与路由 .vue结尾的文件都是单文件组件 路由就是根据网址的不同返回的页面不同 多页应用与单页应用 多页应用: 每次页面跳转,服务器都会返回一个html. 优点:首次展现页面快.搜索引擎排名 ...

  2. php 查看接口运行时间

    代码如何: <?php $start_time = microtime(true); for ($i=0;$i<100000000;$i++){}; $end_time = microti ...

  3. 201604-2 俄罗斯方块 Java

    大家谁能帮我看看是哪里不对,提交到系统中是0分,在Eclipse中可以得出例子中的结果 思路: 题目中有两个关键点:如何模拟下落的过程,如何判断方块下落在哪里停止. 在数据的存储上,需要保存整个&qu ...

  4. 题解 P2738 【[USACO4.1]篱笆回路Fence Loops】

    这题是我期中测试的一题水题,然而英文题目太长了不想读...后面考完被同学提醒后20分钟切了(心塞) 切完看了波题解,发现貌似我的方法跟大家都不一样呢... 常规做法: \(Floyd\) 这个有三页的 ...

  5. 题解 P1884 【[USACO12FEB]过度种植（银）Overplanting 】

    什么,扫描线需要线段树? 那我第一个不干啊(其实是不会写) 这里介绍一种裸的扫描线: 我们根据x排序,对于相等的 \(x\) ,将 \(y\) 进入和退出分类讨论,然后全部放进set里面.每次 \(x ...

  6. Java 实现 栈

    package Test; import java.util.*; public class Stack_test { public static void main(String[] args) { ...

  7. typescript-学习使用ts-1

    Hello World 新建 greeter.ts 并写入以下内容: function greeter(person) { return "Hello, " + person; } ...

  8. 创建Maven项目时Maven中的GroupID和ArtifactID的意思

    GroupID 是项目组织中唯一的标识符,对应Java包结构,在项目中看到的是main目录里java的目录结构. ArtifactID是项目的唯一的标识符,实际对应项目的名称(就是idea中工程的名字 ...

  9. list循环 字典循环 字符串常用方法

    list = ['xiaoli','xiaohua','huali']user = {'zhang':'123','lin':'321','chen':'222'}#list循环for stu in ...

  10. 发布订阅--DBMS "无法作为数据库主体执行，因为主体“dbo”不存在、无法模拟这种..........”

    解决方案: 新附加的数据库需要设置所有者才能建立数据库关系图.供参考的操作步骤如下: 选择“AdventureWorks2012LT”,右键,选择“属性”,选择“文件”页,点击“所有者”右侧按钮,点击 ...