avm如何通过js创建组件

99991111nnn

内容绑定只能被识别为字符串，如何通过js里创建组件？并输出展示

99991111nnn

avm.define('api-test', class extends Component {
    render() {
        return (
            <view>
                <text>Hello APP</text>
            </view>
        );
    }
});

这个组件化如何定义？demo？示例不知道该放哪里执行，都是报错。

技术咨询-F

看下git 上的示例集合

99991111nnn

具体哪个案例有～～都没有找到。。。很急～

杨永安

99991111nnn 发表于 2021-1-8 19:18
具体哪个案例有～～都没有找到。。。很急～

你是需要创建业务逻辑组件还是UI框架组件呢？
如果是业务逻辑组件，推荐使用stml的sfc单文件模式创建。

下面通过《堂食点餐》模板中 “加购动作条”的组件来说：讲解文档：https://**.**/apicloudcom/o ... 9D%A1--goods_action

1.先看“动作条”组件的使用效果：
组件内部很简单，是一个容器，包含了两个按钮。
其中容器还具备底部安全区域的判断（safe-area），
两个按钮分别绑定各自的逻辑：加购和打开结算页。


2.组件内部实现
源代码地址：https://**.**/apicloudcom/o ... s/goods-action.stml



在 components 目录定义组件goods_action.stml 内部逻辑。
使用方法大致和Vue的sfc组件相同。详细文档：https://docs.apicloud.com/apiclo ... ?index=5&subIndex=1
在组件内部实现模板、组件样式和内部逻辑。

3.组件的使用
在整个项目中有两个页面使用到了该组件：商品详情页和菜品加购页面。
上面的截图效果来自于商品加购页，源代码地址：https://**.**/apicloudcom/o ... _add/goods_add.stml

组件的使用简单，1引用，2使用。
使用import 引入组件后，就类似于Vue中定义了一个全局组件。在页面中，就可以使用自定义组件的标签，当编译解析到自定义组件的时候，才会认识这个组件，并且知道怎么去渲染。





由于篇幅原因，业务逻辑组件的简单使用方式到此结束，总结起来就是“先定义，再引入，再使用。”。如果够用了，先暂时按照源码进行开发。如果需要纯js的类似React的模式定义组件，欢迎追问。

99991111nnn

我的问题是要动态创建view,text,比如，聊天界面里的表情要转换成<image></image>，文字转换成<text></text>...
循环组合好需要的代码后，插入绑定到某个节点里展示。

技术咨询-F

先写好页面模板，js代码里面更新data，页面就更新了。
参考listView的例子
https://docs.apicloud.com/apiclo ... index=4&subIndex=22

99991111nnn

饿，不确定 内容不固定，
有可能是 : <image src="face_path"><image><text>aaa</text>，
也有可能是<text>cccccc</text>，
也有可能是<image src="face_path"><image><text>bbbbb</text><image src="face_path"><image><image src="face_path"><image>,不固定到内容，怎么排版，怎么展示？

杨永安

99991111nnn 发表于 2021-1-11 03:48
饿，不确定 内容不固定，
有可能是 : aaa，
也有可能是cccccc，

你提到内容不固定，通过列举看起来似乎是有图文混排的需求。

你能指出他们不固定的参照依据吗？（也就是说什么情况下是第一种，什么情况下是第二种……）还是说来自于一个不固定的数据段？可以辅助代码和实际案例说明。

99991111nnn

这个项目就是计划做个聊天项目，所谓到不确定到排版就是 文字和表情的展示，用户什么时候输入表情和文字，我们无法控制的呢。