TooBug/wemark

wemark的taro适配版本

kapeter opened this issue · 35 comments

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

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

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

收到。晚点我加到README中!

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

所以我用taro的语法改写wemark

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

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

@songkeys 我晚点测试下看看,感谢。

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

@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>
        )
	}
}

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

不行的,代码如下:

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的,但没有效果

同上+1

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

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

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

@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
检查一下 dist 文件夹里的 wemark 文件是否齐全。如果不是,按照上面 copy 配置。
文件如果都被编译进去的话,应该是没有问题的。

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

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

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

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

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

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

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

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

@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>
        )
	}
}

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

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

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

好的。谢谢!

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

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

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

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

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

@F-loat 直接开个PR,加到README中?

@TooBug 已提 PR #80

CCZX commented

(28@YN8Z9(`84E5(5@F) 4C
按照配置弄出来后显示这样是为什么呢?

(28@YN8Z9(`84E5(5@F) 4C
按照配置弄出来后显示这样是为什么呢?

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

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

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

@LoveDongdong 感谢。