uniapp项目转为html,h5转uniapp项目技术总结

h5项目转uniapp项目总结

why

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

项目目录

├── README.md

├── babel.config.js

├── dist

├── node_modules

├── package-lock.json

├── package.json

├── postcss.config.js

├── public

├── src├── App.vue

├── api

├── assets

├── components

├── config

├── main.js

├── manifest.json

├── mixins

├── pages

├── pages.json

├── pagesub

├── services

├── static

├── store

├── uni.scss

└── utils

├── tsconfig.json

├── vue.config.js

├── yarn-error.log

└── yarn.lock

条件编译/** #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命名规范可以省略引入组件的步骤

vuexstore数据改变页面未更新，我使用了一个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是痛苦的，结局是还算是好的。