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. cmake 中的　compile_commands.json　文件

    cmake 是支持多种编译方式的工具,产生多种编译工具可以使用的编译文件,例如常用的gdb. 但是对于clang 编译工具,还需要一个compile_commands.json 这个文件是由cmake ...

  2. fatal error C1189: #error: "You must define TF_LIB_GTL_ALIGNED_CHAR_ARRAY for your compiler."

    使用VS开发tensorflow的C++程序的时候,就可能会遇上这个问题,解决方法是在引入tensoflow的头文件之前添加: #define COMPILER_MSVC #define NOMINM ...

  3. keras中的一些小tips（一）

    写这篇博客的原因主要是为了总结下在深度学习中我们常会遇到的一些问题,以及不知道如何解决,我准备把这个部分作为一个系列,为了让大家少走一些坑,对于本博客有什么错误,欢迎大家指出,下面切入正题吧. 1. ...

  4. ios 真机使用相机闪退问题

    需要增加权限 在info文件增加 主要前面的key 后面的cameraDesciption只是一段描述 随便写就可以

  5. 针对Oracle的一系列操作

    一.有关于数据库导出dmp的语句. 1 将数据库TEST完全导出,用户名system 密码manager 导出到D:\daochu.dmp中exp system/manager@TEST file=d ...

  6. MySql数据库，查询数据导出时会出现重复的记录（数据越多越明显）

    在查询数据时,数据量多的时候,我们会使用分页功能. 每页显示多少数据. 这种情况下,一半看不出什么问题. 而导出数据时,有时就是通过分页的方法,逐步讲数据追加到导出文件中. 当全部数据都导出之后,就有 ...

  7. \_\_doc\_\_

    __doc__ 注释信息 一.doc 返回类的注释信息 class Foo: '我是描述信息' pass print(Foo.__doc__) 我是描述信息 该属性无法被继承 class Foo: ' ...

  8. 基于Flask框架搭建视频网站的学习日志（六）之数据库

    使用Flask-SQLSlchemy管理数据库(1)--初步安装调试 一.介绍: Flask-SQLSlchemy是一个Flask扩展,简化了Flask中对sql的操作,是一个高层的框架,可以避免直接 ...

  9. 四十一、LAMP与LNMP加速与缓存优化进阶实战下部

    一.配置,在nginx和apache所在的服务器中: 1.配置:cd /application/php/lib/php.ini 1)extension_dir="/application/p ...

  10. Oracle数据库添加删除主外键

    (一)添加主键 1.表创建的同时,添加主键约束 语法: create table "表名" ( "列名1" 数据类型及长度 constraint "主 ...