小程序转uniapp转h5-排错采坑

项目需求：

把已有的小程序转成H5

想到了uniapp，因为vue+uni确实很香，是十分潮流和火爆的技术。

Vue的特点：

• 轻量级(压缩后只有33K)
• 更高的运行效率
  • 从传统的操作DOM节点过度到了虚拟的DOM
• 双向数据绑定（MVVM）
  • 让开发者不用再去操作DOM , 而是把更多精力投入到业务逻辑上
• 生态丰富 , 学习成本低

Vue目录结构:

├── build # 构建相关
├── static # 静态资源
│ │── img # 图片
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
│ │── Tinymce # 富文本
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .gitignore # git 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
└── package.json # package.json

---

前期准备：

（~我还停留在入门水准，此博客可能由于我水平过低会有众多错误，欢迎指正！）

学习Vue（腾讯课堂，官方文档）

课堂地址

Vue学习笔记网盘分享

提取码：链接：https://pan.baidu.com/s/15qyO6MYxmoTALS2jZFP7Cg
提取码：rkzr

学习uniapp（官方文档即可）

小程序转uni

借助大佬的力量：
工具使用教程（第一看）：
https://ask.dcloud.net.cn/article/36037
工具答疑文档（第二看）:

[https://github.com/zhangdaren/articles/blob/master/miniprogram-to-uniapp%E5%B7%A5%E5%85%B7%E7%AD%94%E7%96%91.md](https://github.com/zhangdaren/articles/blob/master/miniprogram-to-uniapp工具答疑.md)
安装命令(直接安装，不需要下载下来！！！)：
npm install miniprogram-to-uniapp -g
升级版本:
npm update miniprogram-to-uniapp -g

1、修复部分转换中的错误（图片路径问题）

转换后会出现少数路径不正确的问题，Ctrl+F搜索改正即可

2、异步加载容错机制

报错信息：

原因：数据是异步加载的，渲染时找不到数据就会报错

解法：加一个容错、v-if=“item.coupon && (item.coupon.length < 1)”

      <view class="s-active-box">
        <view class="s-active" v-if="item.coupon && (item.coupon.length < 1)" v-for="(item, id) in item.coupon" :key="id">
          <text><text style="color:#ff7440">满额送券：</text>消费满{{item.isprice>0 ? item.isprice : 0}}元，送{{item.lose_price>0 ? item.lose_price : 0}}元代金券</text>
        </view>
      </view>

补充（在uniapp中）：

:show、不会每次都去删除和创建DOM元素 , 而是通过dispaly:none将元素隐藏起来、会占位、可能导致样式变化

:if、根据表达式的真假来删除和插入元素

:hidden、和小程序hidden一样，建议替代v-show使用

3、用户登录和支付问题**（接口不兼容）**

~待补充

---

uni转h5
1、配置流程
mainfest.json下基础配置：

h5配置：

publicPath：

配置 publicPath 为 cdn 资源地址前缀，这样编译出来的 html 文件，引用的 js，css 路径会自动变成 cdn 上的地址。

如：publicPath: ‘/’

router

属性	类型	默认值	说明
mode	String	hash	路由跳转模式，支持 hash、history
base	String	/	应用基础路径，例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 “/app/”

devServer

属性	类型	默认值	说明
https	Boolean	false	启用 https 协议
disableHostCheck	Boolean	false	禁用 Host 检查

发行配置：

上传服务器（~~lampp、apache）：


验收访问（https://www.xxx.com/h5/）：

2、解决跨域问题（jsonp、代理、cors）
manifest.json下源码视图，添加代理

若所有请求在同一domain下，则不会触发跨域，如果报错，则需要检查是否是https://
补充：
理解跨域问题
阮一峰老师的讲解