Taro转H5的注意事项

网站首页 » » Taro转H5的注意事项

January 29, 2022

Taro小程序是单页面应用，如果转生成H5页面应该是多页面。打包需要调整配置
const buildType = process.env.BUILD_TYPE || 'weapp';
const isDev = process.env.NODE_ENV === 'development';

const h5Domain = isDev ? 'localhost:10086' : '';

import { search, shopsearch } from './const';

const changeH5PublicPath = (type) => {

return isDev
    ? `//${h5Domain}`
    : `${type}`

};

const changeFilePreFixFolderPath = (type, path) => {

return isDev ? `${type}/${path}` : path

};

const changePartConfig = (type) => {

const jsonpTypeName = type.replace(/-/g, '');
return {
    publicPath: changeH5PublicPath(type),
    output: {
        filename: changeFilePreFixFolderPath(type, 'js/[name].js'),
        chunkFilename: changeFilePreFixFolderPath(
            type,
            'js/[name].[chunkhash:8].js',
        ),
        jsonpFunction: `taro${jsonpTypeName}WebpackJsonp`, // 多个项目webpackJsonp要冲突
    },
}

};

const webConfig = {

[search]: {
    ...changePartConfig(search),
    router: {
        mode: 'browser',
        basename: '',
        customRoutes: {
            '/pages/index/index': '/index',
        },
    },
    pages: ['pages/index/index'],
},
[shopsearch]: {
    ...changePartConfig(shopsearch),
    router: {
        mode: 'browser',
        basename: '',
        customRoutes: {
            '/pages/shop/index': '/shopsearch',
        },
    },
    pages: ['pages/shop/index'],
}

}

const nowWebConfig = webConfig[buildType] || { pages: [] };

export default nowWebConfig;
export { webConfig };

针对H5的配置，把引入包的Taro转换也加上： esnextModules: ['@self-ui'],
官方静态HTML入口页面挂载的js代码千万别删。
设备比例配置根据设计稿调整。
designWidth: 750,
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2
}
index.js打包配置
import path from 'path'
import nowWebConfig, { webConfig } from './h5Config'
const webOutputType = Object.keys(webConfig)
const buildType = process.env.BUILD_TYPE || 'weapp'
const config = {
projectName: 'sproject',
date: '2021-7-21',
designWidth: 750,
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2
},
sourceRoot: 'src',
outputRoot: dist/${process.env.TARO_ENV}${process.env.TARO_ENV === 'h5' ? webOutputType.includes(buildType) ? '/' + buildType : '' : ''},
plugins: [],
defineConstants: {
},
copy: {
patterns: [
],
options: {
}
},
framework: 'react',
mini: {
postcss: {
pxtransform: {
```
 enable: true,
 config: {

 }
```
},
url: {
```
 enable: true,
 config: {
   limit: 1024 // 设定转换尺寸上限
 }
```
},
cssModules: {
```
 enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
 config: {
   namingPattern: 'module', // 转换模式，取值为 global/module
   generateScopedName: '[name]__[local]___[hash:base64:5]'
 }
```
}
},
lessLoaderOption: {
lessOptions: {
```
 modifyVars: {
   "@--icon-url-prefix-": '"http://st.jdxpoc.com/mobile"',
   "@--icon-version-": '"v1.0.0"',
 },
 javascriptEnabled: true,
```
},
},
webpackChain(chain, webpack) {
chain.merge({
```
 module: {
   rule: []
 }
```
})
}
},
h5: {
staticDirectory: 'static',
esnextModules: ['@ui'],
postcss: {
autoprefixer: {
```
 enable: true,
 config: {
 }
```
},
pxtransform: {
```
 enable: true,
 config: {
   selectorBlackList: ['body']
 }
```
},
cssModules: {
```
 enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
 config: {
   namingPattern: 'module', // 转换模式，取值为 global/module
   generateScopedName: '[name]__[local]___[hash:base64:5]'
 }
```
}
},
miniCssExtractPluginOption: {
filename: 'css/[name].css',
chunkFilename: 'css/[name].[chunkhash:8].css',
},
lessLoaderOption: {
lessOptions: {
```
 modifyVars: {
   "@--icon-url-prefix-": '',
   "@--icon-version-": '',
 },
 javascriptEnabled: true,
```
},
},
...nowWebConfig,
webpackChain(chain, webpack) {
chain.merge({
```
 module: {
   rule: [
   ],
 },
 //代码压缩
 optimization: {
   minimize: false
 },
```
})
}
}
}

module.exports = function (merge) {
if (process.env.NODE_ENV === 'development') {

return merge({}, config, require('./dev'))

}
return merge({}, config, require('./prod'))
}

Taro不支持多页面应用
http://taro-club.jd.com/category/5/h5 社区
React兼容性组件库 3.2.4
taro convert 转Taro代码
使用taro每个页面都有一个?config配置，配置参考自微信小程序的页面配置。组件不能有config
在taro中可以通过任何一个生命周期或函数通过this.$router.params来访问当前页面的路径和query
小程序中的一些专属方法
方法作用
onPullDownRefresh 页面相关事件处理函数–监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角转发
onPageScroll 页面滚动触发事件的处理函数
onTabItemTap 当前是 tab 页时，点击 tab 时触发
componentWillPreload 预加载，只在微信小程序中可用
组件可以统一放到 src/components 目录下，与页面解构一样，每一个组件包含一个js文件和样式文件。组件没有config，只有页面才有，组件多一个componentWillReceiveProps生命周期函数。
taro中字符串统一用单引号
taro中的jsx不能使用html标签
taro中数据请求尽量写在componentWillMount
不能在componentWillUpdate/componentDidUpdate/render 中调用 this.setState
组件最好定义 defaultProps
在map映射中尽量使用?三元表达式，避免if语句
taro页面跳转，路径必须和入口app.js中配置的一致。
页面尺寸单位写px或百分比，就是量多少写多少。taro会自动转成rpx或rem。taro默认转换750。如果切换在config>index.js designWidth处修改配偶。还支持640、828.
taro中阻止事件冒泡使用stopPropagation
任何组件的事件传递都要以 on 开头
https://nervjs.github.io/taro/docs/best-practice Taro组件一些支持情况
getCurrentPages: 获取当前页面信息所用，这个H5是不支持的。H5 暂不支持 MovableArea 组件！（注意）

标签: none

Taro转H5的注意事项

您可能还喜欢这些文章：