Remax 中使用微信组件的坑

周大胖子 · 发表于 2021-3-2 16:38:18

本帖最后由周大胖子于 2021-3-2 16:45 编辑

先上个官方文档链接：https://remaxjs.org/guide/basic/custom-component [我就是照着这个做的然后满世界报错]
好了先谈成功方法：
1.在项目中安装微信组件的包：
npm install --save weui-miniprogram

2.引入且使用【可以照着上方的链接里面复制，也可以复制我下面的】

import * as React from 'react';
import { View , Button } from 'remax/one';
import Cells from "weui-miniprogram/miniprogram_dist/cells/cells";
import Cell from 'weui-miniprogram/miniprogram_dist/cell/cell';
import 'weui-miniprogram/miniprogram_dist/weui-wxss/dist/style/weui.wxss';
import Dialog from 'weui-miniprogram/miniprogram_dist/dialog/dialog';
class Trademark extends React.Component{
constructor(props) {
super(props);
this.tapDialogButton = this.tapDialogButton.bind(this);
this.doDialog = this.doDialog.bind(this);
this.state={
dialogShow: false,
showOneButtonDialog: false,
buttons: [{text: '取消'}, {text: '确定'}],
}
}
tapDialogButton(e)
{
console.log(e)
this.setState({
dialogShow: false
})
}
doDialog(){
console.log('进来了')
this.setState({
dialogShow: true
})
}
// 坑爹官方文件复制粘贴过来后凉了，且各种实验都不行除非删了重新解压缩
render(){
return(
<View className="textH3">
商标
<Button className="tmListBtn"> 商标注册1</Button>
<Button className="tmListBtn"> 商标注册2</Button>
<Button className="tmListBtn"> 商标注册3</Button>
<View>
<Cells title="带说明的列表项">
<Cell value="标题文字" footer="说明文字"></Cell>
<Cell>
<View>标题文字（使用slot）</View>
<View slot="footer">说明文字</View>
</Cell>
</Cells>
</View>
<Button className="tmListBtn" onTap={this.doDialog} > 弹出框测试 </Button>
<Dialog title="test" show={this.state.dialogShow} bindbuttontap={this.tapDialogButton} buttons={this.state.buttons}>
<View> 弹出框 </View>
</Dialog>
</View>
);
}
}
export default Trademark;

复制代码

3.关掉cmd, 把dist 文件夹删了[嗯没错删掉] ，然后重新打包 npm run dev wechat

4. 进微信开发者工具里面看效果：

没报错很好结束，如果报错：

[] ENOENT: no such file or directory, open 'E:\phpstudy_pro\remax\here\dist\wechat\project.config.json'
Error: ENOENT: no such file or directory, open 'E:\phpstudy_pro\remax\here\dist\wechat\project.config.json'

出现这个解决方法：
在 dist/wecaht 文件夹内新建一个【 project.config.json 】就这个文件，里面内容可以复制下面的：

{
"description": "项目配置文件",
"packOptions": {
"ignore": []
},
"setting": {
"urlCheck": false,
"es6": true,
"enhance": false,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": false,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": false,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"enableEngineNative": false,
"bundle": false,
"useIsolateContext": true,
"useCompilerModule": true,
"userConfirmedUseCompilerModuleSwitch": false,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true
},
"compileType": "miniprogram",
"libVersion": "2.15.0",
"appid": "wx9f6afd0fc5e708d4",
"projectname": "eee",
"cloudfunctionTemplateRoot": "",
"watchOptions": {
"ignore": []
},
"debugOptions": {
"hidedInDevtools": []
},
"scripts": {},
"condition": {
"plugin": {
"list": []
},
"game": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": []
}
}
}

复制代码

完工；重新打开下微信开发者工具，就行了；

周大胖子 · 发表于 2021-3-2 16:43:08

本帖最后由周大胖子于 2021-3-2 16:46 编辑

这个坑点：
1. 说找不到路径，我以为是引入路径问题，谁知道是没有这个文件；
2. 这个文件我最后也不知道怎么出的，就这么莫名奇妙出来了，然后再次打包失败又报错了，幸好我之前存了成功的，一对比果然少个文件，复制粘贴就可以用了；
3. 很多时候，这个报错是消不掉的，就算不引入组件，如果之前报错，这里也跑不动，必须删除dist 整个文件夹，然后不引入组件重新打包，才能继续跑；
4. 官方给的某个github 上示例，居然是引入 componts中加入这些，我照着搬了没用，结果发现它居然把版本 1.几的，拿来当2.几的示例，操误导我一天；5. 我花了很长的时间，照着原生的小程序引入，捣鼓config.js 和json 其实没必要，最后就动了一个文件
这个坑爬出来耗费了我整整两天，不容易啊 -.-

Remax 中 使用 微信组件的坑

Remax 中使用微信组件的坑