nervjs/taro-sample-weapp

与小程序原生融合的示例

taro-sample-weapp

说明

Taro 与小程序原生融合的示例项目，包括：

• wxParse 示例
• echarts-for-weixin 示例
• 混写原生页面示例

安装与运行

首先需要全局安装 cli 开发工具 @tarojs/cli

$ npm i -g @tarojs/cli
$ yarn global add @tarojs/cli

然后执行如下命令，运行完后打开微信开发者工具，选择项目根目录进行预览

$ taro build --type weapp --watch

taro-sample-weapp's Issues

运行报错Expect FLOW_CREATE_NODE but get another

webviewScriptError
Expect FLOW_CREATE_NODE but get another
Error: Expect FLOW_CREATE_NODE but get another
at e.value (http://127.0.0.1:58513/__pageframe__/__dev__/WAWebview.js:23:18730)
at http://127.0.0.1:58513/__pageframe__/__dev__/WAWebview.js:23:19067
at Array.forEach ()
at e.value (http://127.0.0.1:58513/__pageframe__/__dev__/WAWebview.js:23:19039)
at http://127.0.0.1:58513/__pageframe__/__dev__/WAWebview.js:23:19067
at Array.forEach ()
at e.value (http://127.0.0.1:58513/__pageframe__/__dev__/WAWebview.js:23:19039)
at http://127.0.0.1:58513/__pageframe__/__dev__/WAWebview.js:23:19067
at Array.forEach ()
at e.value (http://127.0.0.1:58513/__pageframe__/__dev__/WAWebview.js:23:19039)

taro v3.0.0-beta.3 运行失败

taro build --type weapp --watch编译成功后，微信小程序编辑器控制台报错，taro doctor有很多错误，小程序控制到报错如下：
thirdScriptError
_taroWeapp2.default.RefsArray is not a constructor
TypeError: _taroWeapp2.default.RefsArray is not a constructor
at Index._constructor (http://127.0.0.1:21089/appservice/pages/index/index.js:81:21)
at Object.createComponent (http://127.0.0.1:21089/appservice/taro.js:1955:55)
at Object.3 (http://127.0.0.1:21089/appservice/pages/index/index.js:158:42)
at webpack_require (http://127.0.0.1:21089/appservice/runtime.js:80:30)
at Module.10 (http://127.0.0.1:21089/appservice/pages/index/index.js:8:172)
at webpack_require (http://127.0.0.1:21089/appservice/runtime.js:80:30)
at Module.32 (http://127.0.0.1:21089/appservice/pages/index/index.js:168:96)
at webpack_require (http://127.0.0.1:21089/appservice/runtime.js:80:30)
at checkDeferredModules (http://127.0.0.1:21089/appservice/runtime.js:46:23)
at Array.webpackJsonpCallback [as push] (http://127.0.0.1:21089/appservice/runtime.js:33:19)

Page "pages/index/index" has not been registered yet.

clone最新代码echarts-for-wx页面运行不起来，控制台里有报错

Taro版本: v1.0.0-beta.28

复现操作：
1、npm install
2、npm run dev:weapp
3、点击echarts-for-weixin示例按钮，页面为空白，且控制有报错

控制台报错：

无法运行

TypeError: (0 , _index.genCompid) is not a function

这个打包到其他平台能实现么

是否可以实现其他平台的兼容

导入echarts包后提示[BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB"

代码和示例是一样的，增加了

编译时报错

如果使用antv-f2图形库，使用方法是否同echart一样？

我仿照echart的写法，出现这样的问题。
组件需绑定 opts 变量，例：
<ff-canvas` id="mychart-dom-bar" canvas-id="mychart-bar" opts="{{ opts }}">

state = { opts : { onInit: initChart } } render () { return ( <View className='container'> <ff-canvas id="bar-dom" canvas-id="bar" opts="{{ this.state.opts }}" /> </View> ) }

文档少了一步，要先执行npm install

文档说直接cd到目录里面就能运行，但是应该先执行npm install 或者 cnpm install安装依赖，，，对新手来说可能不太友好

执行编译命令时出错

开发者工具编译出错 Component is not found in path "pages/index/C: aro-sample-weappsrc

jsEnginScriptError
Component is not found in path "pages/index/C:	aro-sample-weappsrc
pm	aro-uidistweappcomponents�uttonindex" (using by "pages/index/index");onAppRoute
Error: Component is not found in path "pages/index/C:	aro-sample-weappsrc
pm	aro-uidistweappcomponents�uttonindex" (using by "pages/index/index")

开发者工具编译出错

动态pages配置

当前的需求是同一个app先混编历史微信小程序代码和新写的taro代码
这样的话就需要在不同的目标平台中有不同的pages配置
目前app.json中的pages是通过ast静态分析app.js中的config得到的，不支持这样的目的。
建议：
app.js中支持多平台特定配置，可以和默认配置做merge

怎么从native页面跳转到index页面

taro传给原生组件的属性值在原生组件里都去不到了

这行传了 canvas-id 给 ec-canvas组件，在ec-canvas组件里
properties: {
canvasId: {
type: String,
value: 'ec-canvas'
},

最终渲染出来是

运行后echarts图没有画出来

VM7002:1 TypeError: _this.data.ec.onInit is not a function
at t. (http://127.0.0.1:61504/appservice/components/ec-canvas/ec-canvas.js:68:39)
at http://127.0.0.1:61504/appservice/__dev__/WAService.js:10:5997
at Array.forEach ()
at http://127.0.0.1:61504/appservice/__dev__/WAService.js:10:5945
at http://127.0.0.1:61504/appservice/__dev__/WAService.js:10:4023
at e.(anonymous function) (http://127.0.0.1:61504/appservice/__dev__/WAService.js:4:5071)
at e (http://127.0.0.1:61504/appservice/appservice?t=1537178738885:4835:19952)
at r.registerCallback.t (http://127.0.0.1:61504/appservice/appservice?t=1537178738885:4835:20137)
at l.forEach.t (http://127.0.0.1:61504/appservice/appservice?t=1537178738885:4835:1538)
at Array.forEach ()
console.error @ VM7002:1
l.forEach.t @ appservice?t=1537178738885:4835
(anonymous) @ appservice?t=1537178738885:4835
i.onmessage @ appservice?t=1537178738885:4835

如何动态加载数据？

bug无法引用本地图片

本地运行示例后echarts页面是空白的，控制台也没有内容输出

启动项目，控制台报错，按钮无法点击

1、npm i
依赖安装完成
2、taro build --type weapp --watch

微信开发工具启动dist文件夹 报错

如何把组件树(componentsTree)中的某children组件设置为根组件，从而渲染在大纲树顶端和画布最外部容器。。。

步骤：
1、打开宜搭表单设计器，随便拖入表单元素
2、打开隐藏的schema面板查看schema 数据结构
3、发现用户设计的真实数据是包裹在 Page -> RootContent -> FormContainer -> children中
4、得出结论：大纲树中的顶端组件和画布最外层容器都是 FormContainer 组件 ，而低代码引擎demo中渲染的根节点是Page组件
期望：
1、基于低代码引擎和demo，实现如宜搭的表单设计器结构。即：可以将children中的组件渲染在大纲树顶端，成为画布最外层容器

在app.tsx设置usingComponents，一直报错Component is not found in path

把loading动画的效果，做成了一个公共组件，因为每个页面都会用，所以想要全局引入。
在app.tsx设置usingComponents，一直报错Component is not found in path "component/loadingcom"

代码如下：
usingComponents:{
"loadingcom":"../../component/loadingcom"
}
下面两种都试过了，都不行
"loadingcom":"/component/loadingcom"
"loadingcom":"component/loadingcom"
请教正确的写法是什么？

注：不是小程序原生组件，就是Taro的写法，写了一个显示和隐藏loading图片的组件，在src下面的component文件夹下，和pages文件夹是同级

引入第三方插件，第三方组件的写法改成on的形式，编译过后就会变成bindon，而不是bind

有这么一个问题，引入第三方插件引入的组件的时候
https://user-images.githubusercontent.com/33850010/104287026-d22d4b00-54f0-11eb-9ab5-a54243c4c3bc.png

我已经把bind:改成了on
image

image

但是编译完了以后方法名前面多了一个on
image

导致触发不了这个方法

头条小程序未自动生成project.config.json

npm run dev:tt ,project.config.json没有自动生成，执行npm run dev:weapp正常

如果我选择使用antv-f2，那么它的使用方法同示例上的一样吗？

无法加载wxParse.wxss文件

只要我使用第三方文件，所有第三方的标签全都报错 版本1.0.0-beta.26

而且你这个demo我运行不起来

原生页面调用 taro 组件的方式，在taro组件里会执行声明周期，但是不会传值和执行方法

@luckyadam 老哥，我这里有一个demo处理了一下原生组件调用 taro 组件的形式，在 taro 的这个组件里声明周期被正常执行，而里面从父组件传的值和绑定在 dom 上的事件都不会被执行。。我提交了一个 pull request （https://github.com/NervJS/taro-sample-weapp/pull/25/files），你可以实际运行帮忙看一下，谢谢

在tsx类型中使用小程序原生第三方组件和插件，报错，类型“JSX.IntrinsicElements”上不存在属性“calendar”。

根据官网的使用方式，进行引入使用。能正常使用，但是这边使用的是index.tsx 格式的文件进行书写。就报类型“JSX.IntrinsicElements”上不存在属性“calendar”。 这个问题

未找到 Taro.Component 的类定义

生成 工具配置 dist/project.config.json
编译 入口文件 src/app.js
Error: 未找到 Taro.Component 的类定义

npm run dev:rn 报错: [BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB".

缺少npm包babel-plugin-transform-jsx-to-stylesheet，开始安装...
(node:26065) UnhandledPromiseRejectionWarning: RangeError: Maximum call stack size exceeded
    at write (console.js:165:9)
    at Console.log (console.js:197:3)
    at resolveNpmSync (/usr/local/lib/node_modules/@tarojs/cli/src/util/npm.js:41:15)
    at resolveNpmSync (/usr/local/lib/node_modules/@tarojs/cli/src/util/npm.js:47:14)
    at resolveNpmSync (/usr/local/lib/node_modules/@tarojs/cli/src/util/npm.js:47:14)
    at resolveNpmSync (/usr/local/lib/node_modules/@tarojs/cli/src/util/npm.js:47:14)
    at resolveNpmSync (/usr/local/lib/node_modules/@tarojs/cli/src/util/npm.js:47:14)
    at resolveNpmSync (/usr/local/lib/node_modules/@tarojs/cli/src/util/npm.js:47:14)
    at resolveNpmSync (/usr/local/lib/node_modules/@tarojs/cli/src/util/npm.js:47:14)
    at resolveNpmSync (/usr/local/lib/node_modules/@tarojs/cli/src/util/npm.js:47:14)
(node:26065) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:26065) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

我把babel-plugin-transform-jsx-to-stylesheet加到安装后, 就报这个错误:

开始编译项目 taro-sample-weapp
编译  JS        /Users/apple/Downloads/taro-sample-weapp-master/src/app.js
编译  SCSS      /Users/apple/Downloads/taro-sample-weapp-master/src/app.scss
编译  JS        /Users/apple/Downloads/taro-sample-weapp-master/src/utils/util.js
编译  JS        /Users/apple/Downloads/taro-sample-weapp-master/src/components/ec-canvas/ec-canvas.js
编译  JS        /Users/apple/Downloads/taro-sample-weapp-master/src/components/ec-canvas/echarts.js
[BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB".
(node:26311) UnhandledPromiseRejectionWarning: TypeError: Property consequent of ConditionalExpression expected node to be of a type ["Expression"] but instead got null
    at Object.validate (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-types/lib/definitions/index.js:109:13)
    at Object.validate (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-types/lib/index.js:505:9)
    at NodePath._replaceWith (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/path/replacement.js:176:7)
    at NodePath._remove (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/path/removal.js:58:10)
    at NodePath.remove (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/path/removal.js:30:8)
    at CallExpression (/usr/local/lib/node_modules/@tarojs/cli/src/rn.js:388:25)
    at NodePath._call (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/usr/local/lib/node_modules/@tarojs/cli/node_modules/babel-traverse/lib/context.js:150:16)
(node:26311) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:26311) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

WXMLRT_$gwx:./components/wxParse/wxParse.wxml:template:955:22: Template `wxParse12` not found.

在 wxParse.wxml文件中 wxParse12 这个模板缺失了，有完整的吗？

taro weapp 编写

这里的 Index 必须是 react 写法的吗？

Taro3 首页点击按钮跳转到 echarts 示例出错

首页能正常展示，可一旦跳转到echarts 示例就出错

VM100 WAService.js:2 TypeError: t.addEventListener is not a function at ui (VM107 common.js:15) at xi.<anonymous> (VM107 common.js:15) at Array.forEach (<anonymous>) at d (VM107 common.js:15) at e (VM107 common.js:15) at new xi (VM107 common.js:15) at new xw (VM107 common.js:15) at _i (VM107 common.js:15) at new Vr (VM107 common.js:15) at Object.t.init (VM107 common.js:15)(env: Windows,mp,1.05.2109131; lib: 2.20.2)

compile fail

Taro Version 2.2.4
errorInfo: 找不到项目配置文件config/index，请确定当前目录是 Taro 项目根目录!
but directory is OK

taro-sample-weapp中富文本组件，只适用于微信小程序，使用编译命令打包其他小程序，富文本组件也会打包过去这样导致其他小程序整体包过大的问题，官方有解决的方案嘛？

taro 3.0.17版本使用wxParse 无法显示

在这里我根据规则将this.$scope改为getCurrentInstance().page运行不报错，但是无法显示内容

taro小程序自定义组件的时候跟data在ready的时候应该跟properties保持一致

上图是小程序文档说明

上图是taro编译成小程序应用的时候。

上图是用wxml实现的时候的截图
....
项目背景
我把原来的小程序wxml项目编译成taro，在taro下run dev:weapp 的时候出现的差异

输入命令编译失败

D:\taro-sample-weapp>taro build --type weapp --watch
� Taro v1.3.30

开始编译项目 taro-sample-weapp
(node:11276) UnhandledPromiseRejectionWarning: RangeError: Maximum call stack size exceeded
at Object.normalize (path.js:279:32)
at Object.join (path.js:483:18)
at readPackageJSON (C:\Users\hr\AppData\Roaming\npm\node_modules@tarojs\cli\node_modules\find-yarn-workspace-root\index.js:48:21)
at findWorkspaceRoot (C:\Users\hr\AppData\Roaming\npm\node_modules@tarojs\cli\node_modules\find-yarn-workspace-root\index.js:23:22)
at recursiveFindNodeModules (C:\Users\hr\AppData\Roaming\npm\node_modules@tarojs\cli\dist\util\index.js:456:27)
at recursiveFindNodeModules (C:\Users\hr\AppData\Roaming\npm\node_modules@tarojs\cli\dist\util\index.js:461:12)
at recursiveFindNodeModules (C:\Users\hr\AppData\Roaming\npm\node_modules@tarojs\cli\dist\util\index.js:461:12)
at recursiveFindNodeModules (C:\Users\hr\AppData\Roaming\npm\node_modules@tarojs\cli\dist\util\index.js:461:12)
at recursiveFindNodeModules (C:\Users\hr\AppData\Roaming\npm\node_modules@tarojs\cli\dist\util\index.js:461:12)
at recursiveFindNodeModules (C:\Users\hr\AppData\Roaming\npm\node_modules@tarojs\cli\dist\util\index.js:461:12)
(node:11276) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (re
jection id: 1)
(node:11276) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

依赖版本过旧时, 可能导致编译时候报错 ' (0 , _index.genCompid) is not a function'

编译候出错, 去看了一下大概是这个引起的

var _index = require("../../npm/@tarojs/taro-weapp/index.js"); 1.2.12 的版本中会导致这个报错
1.2.12 中该值是 undefined.

将依赖升级后, 正常编译.

我本地 @tarojs/cli 版本是 1.3.4

页面出现 多个 仪表图，初次渲染页面出现 错乱，但是 swichTab 切换后 就回复正常了？

简单描述问题：

页面出现 多个 仪表图，初次渲染页面出现 错乱，但是 swichTab 切换后 就回复正常了？

预期效果：

实际效果：

？？？
（如有需要请提供截图）

复现环境：

• 在android 上 出现频繁 存在该问题