h5转uniapp项目技术总结

h5项目转uniapp项目总结

why

先说一下为什么要用uniapp，主要是因为之前我们刚做完云闪付小程序(webview页面)，老板又让我们做抖音小程序（后面还会做各种小程序），于是我们就想到了uniapp，之前也没做过想想也挺激动的

项目目录

条件编译

/** #ifdef 平台名称 **/ 

你的css或者js代码 

/** #endif **/

样式

scoped 样式穿透
/deep/ 选择器 {}

// vue.config 配置less全局变量引入
let path = require('path');
module.exports = {
  // 全局使用less变量
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        path.resolve(__dirname, 'src/assets/theme.less') // 我的主题变量文件地址
      ]
    }
  }
}

插件

符合easycom命名规范可以省略引入组件的步骤

vuex

store数据改变页面未更新，我使用了一个mixin来解决，大概思路是混入需要更新的属性，在onShow钩子函数中执行
// mixin
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    getUserInfo() {  
      this.userInfo = this.$store.getters.userInfo
    }
  }
}

// 页面 重新赋值
onShow() {
    this.getUserInfo()
  }
  

路由

• Vue的路由全写在pages里面
• 路由跳转使用uniapp api
• 页面title设置参考uniapp API

原生组件层级过高

页面的textarea层级过高盖住了popup弹窗

• 使用cover-view提高popup组件层级（头条小程序不支持cover-view）
• 使用hidden属性动态显示隐藏原生组件，popup组件弹出隐藏原生组件，反之亦然

最后

一开始写是愉悦的，改样式bug是痛苦的，结局是还算是好的。