wemark的taro适配版本

[kapeter]

我用taro框架开发小程序，所以做了一个适配版本。链接：taro-wemark

目前，taro框架还不支持第三方组件编译，所以现在是手动引入，后期会改成npm引入。

taro框架：https://github.com/NervJS/taro

[TooBug]

收到。晚点我加到README中！

[TooBug]

试验失败，不知道在taro中如何引入小程序自定义组件。NervJS/taro#288

[kapeter]

所以我用taro的语法改写wemark

[TooBug]

嗯。我问了官方，说还不支持。这个issue先不关，2.0中我放个说明和链接到你的版本。

[Songkeys]

Taro v1.0.0-beta.6 支持直接引入第三方组件了：https://nervjs.github.io/taro/wx-third-party.html

[TooBug]

@Songkeys 我晚点测试下看看，感谢。

[Songkeys]

@TooBug
我已经在项目中集成成功了。使用体验很方便，不需要改动第三方组件的代码。
但是现在 Taro v1.0.0-beta.6 的监听编译还有一点问题。prism.wxss 这个文件是单独的 wxss 后缀，没有被考虑编译进 dist 目录。已经反馈这个 bug 了，等修复之后我会在这个 issue 及时反馈的。

[TooBug]

@Songkeys 谢谢！

[Songkeys]

Taro 已经支持使用微信小程序的第三方组件。

在 src 下引入 wemark 目录后，在页面或者组件里通过配置 usingComponents 指定需要引用的第三方组件即可：

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

export default class Comp extends Component {
	config = {
		usingComponents: {
			wemark: '../static/wemark/wemark'
		}
	}

    state = {
		md: '# heading'
    }

	render() {
		return (
			<View>
				<wemark md={this.state.md} link highlight type="wemark" />
			</View>
        )
	}
}

[TooBug]

感谢，回头我再整理下demo一起放上来。

[joepeak]

不行的，代码如下：

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.css'

export default class Index extends Component {

  config = {
    navigationBarTitleText: '区小白每日一问',
    usingComponents: {
      wemark: '../../wemark/wemark'
    }
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  state = {
    md: '#  P2P建立流程'
  }

  render () {
    return (
      <View className='index'>
        <View>
          <Text>问：</Text><Text>什么是区块链</Text>
        </View>
        <View>
          <wemark md={this.state.md} link highlight type="wemark" />
        </View>
      </View>
    )
  }
}

编译是OK的，但没有效果

[nerocho]

同上+1

[Songkeys]

@joepeak @nerocho
可能编译还是漏了文件，暂时试一下在配置里配置 copy：

  copy: {
    patterns: [
      {
        from: 'src/components/wemark', // wemark 所在位置
        to: 'dist/components/wemark',
      },
    ],
  },

详见：https://nervjs.github.io/taro/docs/config-detail.html#copy

[nerocho]

@joepeak @nerocho
可能编译还是漏了文件，暂时试一下在配置里配置 copy：

  copy: {
    patterns: [
      {
        from: 'src/components/wemark', // wemark 所在位置
        to: 'dist/components/wemark',
      },
    ],
  },

详见：https://nervjs.github.io/taro/docs/config-detail.html#copy

感谢，已解决

[DiamondYuan]

试了一下，没有报错，但是没有任何显示

[Songkeys]

@DiamondYuan
检查一下 dist 文件夹里的 wemark 文件是否齐全。如果不是，按照上面 copy 配置。
文件如果都被编译进去的话，应该是没有问题的。

[alexlees]

不行，查看了dist目录确定全部文件已经编译但就是没有效果

[hyacinthus]

我追踪了一下，是这个版本的remarkable出了问题。
我把它换成最新的版本就好了。

[Songkeys]

如果文件都编译了，但是还是渲染不出来，按照 @hyacinthus 说的，确实是 remarkable 的问题。
看了一下 dist 里编译出来的文件，真正的原因貌似是新版 Taro 即使有 copy 配置，也会在 copy 之后编译文件，导致 remarkable.js 这个文件又被编译了一次，而编译结果貌似有点问题。

目前的暂时做法是再在配置里面加上 remarkable 的排除：

  weapp: {
    compile: {
      exclude: [
        'src/components/third-party/wemark/remarkable.js'
      ]
    }
  },

确实有点绕，我会让官方人员帮忙看下的……

[TooBug]

@hyacinthus 请问最新的remarkable版本是多少？remarkable的Github仓库的dist目录中仍然是1.6.0的版本。

[TooBug]

@Songkeys 请问这个问题有改观吗？编译的问题是因为UMD格式导致的还是什么其他原因？

[Songkeys]

@TooBug

仍没有改观。

Taro （目前 v1.2.12）编译的问题有两个：

1. 集成小程序原生组件时，会漏编译仅在 wxss 中引用的 wxss 文件。本项目中漏编译了 prism.wxss。所以需要 copy 配置把所有文件在编译时全部拷贝过去。（参考：https://nervjs.github.io/taro/docs/config-detail.html#copy）
2. 在编译压缩过的 js 文件时，会再次经过一次编译导致出错，且无视 copy 配置。本项目中是 remarkable 文件编译出错。所以需要 exclude 配置把压缩的 js 文件排除。（参考：https://nervjs.github.io/taro/docs/config-detail.html#weappcompileexclude）

总结，对于本项目（wemark）来说，完整的解决配置示例如下：

  copy: {
    patterns: [
      {
        from: 'src/components/wemark',
        to: 'dist/components/wemark',
      },
    ],
  },
  weapp: {
    compile: {
      exclude: [
        'src/components/wemark/remarkable.js',
      ]
    }
  },

---

之后，通过上面的配置，可以将 wemark 集成在 Taro 中。使用方式是：

在 src 下引入上面对应的 wemark 目录后，在页面或者组件里通过配置 usingComponents 指定需要引用的第三方组件即可：

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'

export default class Comp extends Component {
	config = {
		usingComponents: {
			wemark: '../components/wemark/wemark'
		}
	}

    state = {
		md: '# heading'
    }

	render() {
		return (
			<View>
				<wemark md={this.state.md} link highlight type="wemark" />
			</View>
        )
	}
}

参考：使用微信小程序的第三方组件

[TooBug]

@Songkeys 明白，感谢详细指导。我再确认一下remakeable的版本问题。近期打算发布2.0正式版了。

[Songkeys]

@TooBug
👍 应该和 remarkable 版本没有关系，上面提到真正问题是 Taro 的二次编译。

[TooBug]

好的。谢谢！

[TooBug]

@guozimo 请另开issue，另外附上详细的使用方式说明以便复现。

[guozimo]

var tokens = parser.parse(md, {});
console.log('进入函数mdtokens====',tokens)
这个输出的tokens 是一个空数组是怎么回事啊
为什么输出的是一个空的数组的传递的md 是'## hello, world'
单数打印出来的toknes 是一个空数组
taro 版本使用 跪求

[guozimo]

console.log('parser=====',parser)
var tokens = parser.parse(md, {});
console.log('进入函数mdtokens====',tokens)
空数组返回 错误的

[F-loat]

使用了 typescript 的话，需要在 global.d.ts 中添加以下内容

declare namespace JSX {
  interface IntrinsicElements {
    wemark: any
  }
}

[TooBug]

@F-loat 直接开个PR，加到README中？

[F-loat]

@TooBug 已提 PR #80

[CCZX]

按照配置弄出来后显示这样是为什么呢？

[hw18708118867]

按照配置弄出来后显示这样是为什么呢？

我也和你相同的问题, 我用的最新的Taro2.0 目前没找到解决方案

[LoveDongdong]

taro2.0 以上的需要修改config/index.js里面的配置如图：
，
因为taro2.0 的编译配置做了调整。详见：http://www.yyyweb.com/5350.html
要在文件开始引入path，要使用绝对路径才能真正忽略掉remarkable.js 的编译。

我也是遇到这个问题困扰了好久，然后发现是配置的原因。

[TooBug]

@LoveDongdong 感谢。