微信小程序组件化开发

微信小程序的组件和Vue的组件非常相似。

在微信小程序中有很多内置组件，比如button view input image等，有时候我们要自定义组件。和Vue的组件似的。

如何创建自定义组件：

新建一个components目录，在里边创建自定义组件

组件的组成：

使用组件：

一个简单的示例：

创建comp，代表页面；创建components/xxxx，代表组件。

创建组件：

使用组件：

注意：json文件中不能写注释啥的。这里的注释是为了解释清楚，在开发中不能写注释。

组件的注意事项：

组件的样式细节：

如何控制页面和组件的样式相互影响：

组件和页面相互通信

this.triggerEvent(事件名，参数对象，{})，最后是options，额外的一些选项

预留一个设备，以有利于对以后进行扩展。

好处：

例子：

在移动端，导航栏，nav-bar，分为左中右三部分。不把这三部分的内容写死。就用插槽，为了封装性更好。

单个插槽的使用很简单：

多个插槽的使用稍微复杂，要设置几个东西：

component构造器中可以写哪些东西，如下

现在很多小程序都能实现聊天功能了，一种是基于微信小程序提供的组件开发实现，另外是直接接入第三方IM SDK来实现这个功能的。如果需要快速实现微信小程序聊天室功能，那么建议你可以接入即构IM SDK，可以节省90%开发时间。在线人数无上限，支持亿量级消息并发，满足任何消息通信需求。

在微信小程序里，webviewH5向miniProgram通讯只能通过 postMessage 函数

然而这个函数却很鸡肋，小程序官方文档是这样描述的： 向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件

而且小程序官方文档里没有提到miniProgram如何向webviewH5通讯

在这个demo中, 展示了我是如何让webviewH5和miniProgram互相通讯

其实原理很简单:

success

failure

cancel

https://github.com/abu3389/wx_app_webview

附加: Uniapp与webview通信用法

在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯

https://ask.dcloud.net.cn/article/id-35083__page-9

---