如何使用微信的第三方插件呢？比如：微信同声传译。

Preact v10.0.0 已经正式发布了，kbone 可以支持 preact x 了吗？

<div style="width: 50px;box-sizing: border-box;border: 1px red solid;font-size: 16px;height: 26px;padding: 4px 4px;line-height: 1">123</div>

真机样式和开发者工具/web 样式不一样

突然发现，和 fard 是类似的思路
同样为了递归，使用了自定义组件，以下是 fard 遇到的问题：

1. 自定义组件递归，每个组件都是shadow-dom，导致 css 穿透困难，更有 flex 等很多对层级有要求的很多用法无法很好的生效
2. 控制台调试非常丑
3. 每个 dom 节点上的事件等，都和组件挂钩，不方便也不科学

而且我们经过性能测试，比微信原生甚至 template 差

我提了一个需求给微信小程序社区，如果他们支持 template 的递归，就可以不使用自定义组件了
然而现在看来，应该是被无视掉了，唉

楼主怎么看，反正目前来说，自定义组件的递归可以说是不那么容易接受的

vue-router可以支持多页面吗？

preact+typescript，使用小程序内置组件时报错。

用法：

<wx-switch />
<wx-component behavior="picker" mode="region">选择城市</wx-component>

报错：

VM1845:1 thirdScriptError
Cannot set property behavior of #<WxComponent> which has only a getter;at "pages/index/index" page lifeCycleMethod onLoad function
TypeError: Cannot set property behavior of #<WxComponent> which has only a getter

VM271:1 Error: Component is not found in path "pages/home/miniprogram-element" (using by "pages/home/index")
    at K (WAService.js:1)
    at K (WAService.js:1)
    at WAService.js:1
    at Module.Fe (WAService.js:1)
    at Function.value (WAService.js:1)
    at Et (WAService.js:1)
    at o (WAService.js:1)
    at WAService.js:1
    at WAService.js:1
    at WAService.js:1

1. 使用脚手架进行初始化 kbone init my-app(vue) && yarn && npm run mp
2. 遇到 #4 里面的问题，通过安装 cd dist/mp && npm install --save miniprogram-render 模块 && 构建 npm && 编译 解决
3. 但是会出现上面的问题，通过 Google 进行了搜索，没有找到合适的回答，所以想麻烦作者，帮忙看下，非常感谢。

附上截图，再次感谢

你好，我们项目编译之后允行报错。

vendorshome.js:2 Uncaught (in promise) ReferenceError: Event is not defined
at new s (vendorshome.js:2)
at Function.s.attach (vendorshome.js:2)
at home.js:1
at c (vendorshome.js:2)
at Generator._invoke (vendorshome.js:2)
at Generator.forEach.t. [as next] (vendorshome.js:2)
at c (vendorshome.js:2)
at e (vendorshome.js:2)
at vendors~home.js:2
at new Promise ()

<canvas class="progress" canvas-id="canvasProgress"></canvas>

 const ctx =  wx.createCanvasContext('canvasProgress');
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()

你好，你在研究vue+kbone中是如何做手机微信H5和小程序适配的？我之前采用的是微信H5用flexible+px转rem适配的，小程序是750rpx做的。现在有什么方法vue+kbone构建H5和小程序中，两者样式都能够正常显示？

一般来说，开发小程序，肯定希望一次写码，简单处理之后，就可以编译到多端去用，这应该也是商家的一个期望，不知道 kbone 是否支持微信之外的其他小程序平台？

现在使用自定义组件必须通过 webpack 配置来完成：

wxCustomComponent: {
	root: path.join(__dirname, '../src/custom-components'),
	usingComponents: {
		'comp-a': {
			path: 'comp-a',
			props: ['prefix', 'suffix'],
			events: ['someevent'],
		},
		'comp-b': {
			path: 'comp-b/index',
			props: ['prefix'],
		},
		'comp-c': 'comp-c',
	},
},

这样引用第三方小程序 UI 库太费劲了。

能不能支持自动收集组件的 props 和 events, 只声明组件的的名称和路径？
或者更友好地直接作为 Vue 或 React 组件引用， 而无需申明 useComponents：

import CustomizedComp from 'thirdparty/weapp-ui/comp'; 

在 optimization.minimizer 中使用 TerserJSPlugin OptimizeCSSAssetsPlugin 进行压缩，common 文件夹下面的 main.js 等都进行了压缩，但是插件生成的 app.js pages/index.wxss 这些都没有压缩，请问应该怎么处理？

<div id="test"/>

window.addEventListener('wxload', (query: any) => {
window.$$createSelectorQuery()
.select('#test')
.fields({
node: true
})
.exec((res)=>{
// res == [null]
})
});

目前做过的项目来说，都是强依赖小程序的api，或者需要一些『黑科技』。
没有什么地方可以进行多端开发或者需要多端开发

大家有什么项目是会用到多端开发的？

hey,

firstly this is a great framework!

I'd like to query about i18n support. eg. can vue-i18n be used then auto converted to miniprogram-i18n compatible? what's the road map? or what's the recommended way?

thanks in advance!

在 React + Kbone 模板中引入 Material-UI 的组件后，小程序端报了以下错误。这还有救吗？

Cannot read property 'appendChild' of null;at "pages/index/index" page lifeCycleMethod onLoad function
TypeError: Cannot read property 'appendChild' of null
    at insertStyle (http://127.0.0.1:64232/appservice/common/vendors~index.js:2206:12)
    at DomRenderer.attach (http://127.0.0.1:64232/appservice/common/vendors~index.js:2291:5)
    at StyleSheet.attach (http://127.0.0.1:64232/appservice/common/vendors~index.js:1563:38)
    at attach (http://127.0.0.1:64232/appservice/common/vendors~index.js:4491:19)
    at http://127.0.0.1:64232/appservice/common/vendors~index.js:4625:7
    at useSynchronousEffect (http://127.0.0.1:64232/appservice/common/vendors~index.js:4578:14)
    at http://127.0.0.1:64232/appservice/common/vendors~index.js:4617:5
    at WithStyles (http://127.0.0.1:64232/appservice/common/vendors~index.js:4709:21)
    at Ih (http://127.0.0.1:64232/appservice/common/vendors~index~log.js:339:98)
    at ni (http://127.0.0.1:64232/appservice/common/vendors~index~log.js:357:192)

查看 vendors~index.js 发现：

/**
 * Gets the `head` element upon the first call and caches it.
 * We assume it can't be null.
 */
var getHead = memoize(function () {
  // 这里返回的是 null， 从而导致 insertStyle 的时候 getHead().appendChild(style) 报错
  return document.querySelector('head');  
});

另外， 开发者工具显示以下 Warning：

VM151:1 window.getComputedStyle is not supported, please use window.$$getComputedStyle instead of it

将window.getComputedStyle更改为window.$$getComputedStyle后，报错：

window.js:215 Uncaught (in promise) TypeError: _this3.$$createSelectorQuery is not a function
    at window.js:215
    at new Promise (<anonymous>)
    at Window.$$getComputedStyle (window.js:211)
    at Object.<anonymous> (vendors~index.js:3948)
    at __webpack_require__ (index.js:81)
    at Module.21 (index.js:188)
    at __webpack_require__ (index.js:81)
    at checkDeferredModules (index.js:47)
    at index.js:154
    at module.exports (index.js:157)

在浏览器中e.touches返回的是一个类数组对象，始终有length属性。
由于miniprogram-render中Event类进行了如下处理：

this.$_touches = null
...
if (options.touches && options.touches.length) {

        this.$_touches = options.touches.map(touch => ({...touch, target: options.target}))

        this.$$checkTargetTouches()
}

很明显当touches长度为0时 this.$_touches 不会被处理成一个空数组。
changedTouches、 targetTouches可能也有类似情况，希望可以做出相关修改，避免冲突。

发现一个性能问题，在使用 translate 和 scale 配合 window.requestAnimationFrame 开发动画的过程中， CPU 占用高达 90%

1. 模拟器 CPU 占用高达 90%，但效果尚可接受
2. iOS 有严重掉帧
3. Android 卡顿非常严重，不可用

复现

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Counter from './components/counter'
import Anmie from './anmie';
export default function createApp() {
  const container = document.createElement('div')
  container.id = 'app'
  document.body.appendChild(container)

  ReactDOM.render(<div style={{ position: "relative" }}>
    <Anmie step={20} />
    <Anmie step={20} />
    <Anmie step={20} />
    <Anmie step={20} />
    <Anmie step={20} />
    <Anmie step={20} />
    <Anmie step={20} />
    <Anmie step={20} />
    <Anmie step={20} />


  </div>, container)
}

"undefined" != typeof wx && wx.getSystemInfoSync || createApp()

anmie.js

import React from 'react'
import ReactDOM from 'react-dom'
import { number } from 'prop-types'
export default class Anmie extends React.Component {
    constructor(props) {
        super(props);
        this.max = 300;
        this.index = 0;
        this.asc = true;
        this.state = {
            x: 0,
            y: 0
        }
    }

    componentDidMount() {
        window.requestAnimationFrame(this.anmie.bind(this));
        // window.setTimeout(this.anmie.bind(this), 100);
    }

    anmie() {
        if (this.index === this.max) {
            this.asc = false;
        }
        if (this.index === 0) {
            this.asc = true;
        }
        if (this.asc) {

            this.index = this.index + this.props.step;
        } else {
            this.index = this.index - this.props.step;
        }
        this.setState({
            x: this.index,
            y: this.index - 5,
        })
        // window.setTimeout(this.anmie.bind(this), 100);
        window.requestAnimationFrame(this.anmie.bind(this));
    }

    render() {
        return <div style={{ transform: `translate(${this.state.x}px, ${this.state.y}px)`, position: "absolute", width: `100px`, height: `100px`, backgroundColor: "black" }}></div>
    }
}

综合了一下demo1和demo4 运行正常，然后我在项目中封装了个axios，小程序端构建npm后报这个错，请问怎么修改？还是我哪里用的有问题，，，

比如vant本身有小程序和web端的版本，能否兼容小程序直接去找vant的小程序版本， web端找vant的web版本？

miniprogram-element、miniprogram-render 已经随着 miniprogram_npm 目录一起放到了dist/mp 目录下，node_modules 应该就不需要放进去了（我测试了一下，直接删除 dist/mp/node_modules 目录，运行正常）。

这个是否可以删除？感觉挺影响性能的。

可以自定义配置文件路径吗？

不是很理解问题，是使用 vue-router 搭一个 spa 么？如果是的话是支持的，可以参考这个demo：https://github.com/wechat-miniprogram/kbone/tree/develop/examples/demo1

Originally posted by @JuneAndGreen in #13 (comment)

原生的tabBar在vue-cli-plugin-kbone怎么使用

试了一些传统的ui库,都不能用,而且调试难度不是一般大.

利用 https://github.com/wechat-miniprogram/kbone-template-react 模板
把修改以下代码就可以复现，捕获不了 onChange 事件

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'

function onChange() {
  console.log('onChange')
}

export default function createApp() {
  const container = document.createElement('div')
  container.id = 'app'
  document.body.appendChild(container)

  ReactDOM.render(<label>
    <input
      type="checkbox"
      onChange={onChange}
    />
    这是 checkbox 组件
  </label>, container)
}

!process.env.isMiniprogram && createApp()

假如用kbone开发小程序，当我有支付之类的业务逻辑该怎处理？在vue中调h5支付还是直接调小程序支付？

示例代码

      window.$$createSelectorQuery().select('.h5-body').boundingClientRect((rect) => {
        // 可以
      }).exec()

      window.$$createSelectorQuery().select('#app').boundingClientRect((rect) => {
        // rect 是null
      }).exec()

wxml结构

不管是用wx.createSelectorQuery 还是 window.$$createSelectorQuery 结果都是一样

开始使用的时候，觉得内置组件写起来很不舒服。
目前我在开发小程序，每次我在写html/wxml标签的时候，我都会在想，我写的这个标签会不会被转化为其他标签？比如我写span，会不会被渲染为text组件。我写img，会不会被渲染为image。这个时候我就得查一下开发指南看一遍。
既然不确定，那我就统一写wx-component吧。
可是又没有类型提示。我不知道behavior有哪些选项。填了behavior后，能传的属性值、方法名也没有代码提示。写起来就很难受。
想看下这里有没有什么比较好的解决方案？

您好，请教一个问题，我的场景略微有些特殊，容我描述一下：

1. 本地有两个项目：kbone-template-vue(kbone提供的vue 小程序模板) 和 本地的 vue-cli3 生成的项目abc-repo（jsx 语法）

2. 我想让 vue-cli3 构建一个 library ，叫 abc-lib（本地构建为abc-lib.umd.js）

需求介绍

如果想在 kbone的项目（小程序）中通过 import abc from 'abc-lib的entry 的绝对路径的形式引入（一般为 main.js）'， 在 home 页面中将其引入，并作为一个组件使用（引入本地路径的原因是，我想本地开发没有问题之后，再发布 npm 包）

我的尝试

1. 我尝试了下，如果入口是 abc-lib-main.vue, 在 jbone的模板项目中的 home.vue 通过

import AbcLib from '/Users/lambert/Documents/Code/abc-repo/src/abc-lib-main.vue

内容是可以正常渲染的，没有问题的，abc-lib-main.vue 内容如下：

<template>
  <div>
    render engine for app
  </div>
</template>

<script>
export default {

}
</script>

2. 但是，如果我把上面的内容改一下，入口由 abc-lib-main.vue 改为 abc-lib-main.js, 在 kbone的模板项目中的 home.vue 通过

import AbcLib from '/Users/lambert/Documents/Code/abc-repo/src/abc-lib-main.js

就会报错了，其中 abc-lib-main.js 内容如下

<template>
  <div>
    render engine for app
  </div>
</template>

<script>
export default {

}
</script>

报错信息

94% after seal

 ERROR  Failed to compile with 1 errors                                                    1:16:28 PM

 error  in /Users/lambert/Documents/Code/abc-repo/src/abc-lib-main.js

Syntax Error: SyntaxError: Unexpected token (9:11)

   7 |   },
   8 |   render (h) {
>  9 |     return <div>render engine for app</div>
     |            ^
  10 |   }
  11 | }
  12 |



 @ ./node_modules/babel-loader/lib!./node_modules/thread-loader/dist/cjs.js!./node_modules/vue-loader/lib??vue-loader-options!./src/home/Index.vue?vue&type=script&lang=js& 39:0-109 48:12-18
 @ ./src/home/Index.vue?vue&type=script&lang=js&
 @ ./src/home/Index.vue
 @ ./src/router/index.js
 @ ./src/main.js

为何采用 jsx 的写法，而不是vue 写法：
是因为 abc-lib 采用jsx 语法已经开发比较成熟了，改起来成本略高

我尝试了改了 webpack 的js的loader 对应的配置，但仍然无法生效，还想请作者指点一下，非常感谢。

我看 .babelrc 的配置中已经包含了 babel-plugin-transform-vue-jsx 了

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

webpack.mp.config.js

// js
      {
        test: /\.js$/,
        use: [
          'thread-loader',
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            }
          }
        ],
        exclude: /node_modules/
      },

<canvas canvas-id="source" id="source"></canvas>

            document.querySelector('#source').$$getNodesRef().then(nodesRef => {
                nodesRef.node(res => {
                   console.log(res.node);  // 这里res.node == null
                }).exec()
            })

kbone $parent is null

可以给 Element加一个这个方法，现在没有这个方法报错。

在对现有vue项目转小程序时，小程序开发者工具报这个错误。
8!==r(i+"08")

VM6292:1 thirdScriptError
r is not a function;at "pages/main/index" page lifeCycleMethod onLoad function
TypeError: r is not a function
at Object. (http://127.0.0.1:53467/appservice/common/vendors~main.js:14:11304)
at a (http://127.0.0.1:53467/appservice/common/main.js:1:1213)
at Object. (http://127.0.0.1:53467/appservice/common/vendors~main.js:27:20297)
at a (http://127.0.0.1:53467/appservice/common/main.js:1:1213)
at Object. (http://127.0.0.1:53467/appservice/common/vendors~main.js:27:13632)
at a (http://127.0.0.1:53467/appservice/common/main.js:1:1213)
at Object. (http://127.0.0.1:53467/appservice/common/vendors~main.js:27:13370)
at a (http://127.0.0.1:53467/appservice/common/main.js:1:1213)
at Object. (http://127.0.0.1:53467/appservice/common/vendors~main.js:27:12873)
at a (http://127.0.0.1:53467/appservice/common/main.js:1:1213)

报错Cannot read property 'toLowerCase' of undefined;at "pages/index/index" page lifeCycleMethod onLoad function

背景

已用自制简易脚手架做了多款小程序，从简单到复杂都有。
而由于工作性质，H5到小程序切来切去开发，感觉不是很智能，希望可以同一开发方式

所以，打算体验一下kbone能否解决需求

首先，已经排除掉其他什么静态编译的脚手架，毕竟坑多还不如原生，没必要。而kbone的方法，我的理解是模拟一些小程序不支持的模块来实现可以运行在小程序上

刚刚，体验了一下手动webpack和Demo1 & Demo5，感觉脑海里有一些疑问，想先来讨论一下。

第一个情况：全局数据共享？

由于一般我们是用单页开发H5，所以全局数据共享很简单。
但是小程序是多页开发，该怎么办？

这点现在有点头疼，按照以前的实现方式就是保存页面实例然后刷新，但是这个方法只试用于小程序，不适用于H5。

也想不到更好的方案，更不能不用，因为现在小程序越做越复杂，没有全局数据共享不太科学

第二个情况：什么情况下使用单页？

感觉这点有点鸡肋，什么小程序下在一个页面里是单页应用？如果真的单页为什么不直接上webview？
更不用说什么vuex、router完全用不上

大部分情况下，大家都想要的是app的体验效果，即点击左滑进入的效果

而且，如果是多页的，感觉失去了使用的意义，因为所有东西还是分离的，纯粹只是换种写法写一个页面而已，而不是写一个应用

第三个情况：每个页面加载一次vue？

和上面两个问题一样，按照现在的方式，进入一个页面就要加载一次vue及其他依赖，可能应该列表页都要，也不是很科学

写到现在，感觉自己的问题在于「如何能够在小程序端实现单页的开发模式」，这一点确实也和kbone没啥关系...

不知道大家是怎么使用的？和如何解决全局数据共享问题

Uncaught Error: module "pages/index/miniprogram-render.js" is not defined
    at require (VM956 WAService.js:19)
    at VM956 WAService.js:19
    at index.js:1
    at require (VM956 WAService.js:19)
    at <anonymous>:11:7
    at HTMLScriptElement.scriptLoaded (appservice?t=1564448406408:2221)
    at HTMLScriptElement.script.onload (appservice?t=1564448406408:2233)

编译运行时出现了这个错误

<cover-view class="auth-user-dialog" v-if="isShowDialog">
    <cover-view class="dialog-content">
        <cover-view class="dialog-center">
            <cover-view class="dialog-title">登录提醒</cover-view>
            <cover-view class="dialog-desc">登录后才可以正常使用功能</cover-view>
        </cover-view>
        <cover-view class="dialog-btns">
            <button class="dialog-btn dialog-cancel" @click="cancelLogin">暂不登录</button>
            <button class="dialog-btn dialog-confirm" open-type="getUserInfo" @getuserinfo="onGotUserInfoBeforeBind" @error="onAuthError">立即登录</button>
        </cover-view>
    </cover-view>
</cover-view>

.auth-user-dialog {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .3);

    .dialog-content {
        position: absolute;
        width: 80%;
        top: 30%;
        left: 10%;
        background: #FFF;
        border-radius: 4px;
    }
    .dialog-btns {
        display: block;
        border-top: 1px solid #e5e5e5;
        position: relative;
        z-index: 999999;
    }
    .dialog-btn {
        width: 50%;
        display: inline-block;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        position: relative;
        z-index: 999999;
    }
}

在模拟器上

在真机上

可以看到，button其实是把内容撑开了，但是按钮文案并没有显示

另外：因为是从mpvue的项目迁移过来的，相同的代码在使用mpvue的时候并没有问题，猜测大概率还是因为kbone在渲染每一个内置的组件时都会包一个element引起的