前言： wepy 是一款开源的小程序组件化开发框架，可以让我们使用类 Vue 的语法来开发小程序，支持多种编译器，除了官方的内置编译器，社区也提供了很多插件，今天给大家介绍的是 wepy-compiler-view 。
wepy-compiler-view 是什么？
wepy-compiler-view 是一款 wepy 编译器插件，主要作用是将使用了<w-view>的组件进行编译，从而可以让我们在开发小程序的时候使用类似 Vue 的语法来开发小程序组件，提高代码复用性，加快开发效率。
wepy-compiler-view 安装
要使用 wepy-compiler-view，首先需要安装 wepy，如果你已经有了 wepy，那么直接在项目根目录下执行以下命令安装 wepy-compiler-view：
npm install wepy-compiler-view --save-dev
wepy-compiler-view 使用教程
在 wepy 中使用 wepy-compiler-view
安装完成后，在 wepy 的配置文件中添加 wepy-compiler-view 插件：
-- -------------------- ---- -------
-- --------------
----- ---- - ---------------
----- ------- - --- -- -------------------- ----- ----
-------------- - -
------- -------
------- -----
---------- -
----------- -
--------- ---------------------
--
------ -
-- ---- ----- -------------- ------------------------------ --- ----- ---
-- --------- ----- -------------------- ----- --- ---- - - --------- --------------------- -
------ -----
--------- ---------------------------------------------
--
----- -
--------- -----------------------------
-
--
-------- ---
---------- ---
------ ---
------ ---
-------- -
------ -
---- --------------
--
----------- ------- ------ -------
--
-------- -----
------ --
-
这样就配置完一份 wepy.config.js 配置文件，下面我们来看一下如何在项目中使用 wepy-compiler-view。
在 wepy-compiler-view 中使用 w-view
创建组件
首先我们需要创建一个使用了<w-view>的组件，如下所示：
-- -------------------- ---- -------
---- ------------------------ ---
----------
--------
------------ -- ---- ----------
---------
-----------
--------
------ ---- ---- ------
------ ------- ----- ------- -------------- -
---- - -
----- -------
-
-
---------
------ ----------- -------
------ -
-------- ------
----------- -----
-------- -----
----------------- --------
-
--------在页面中使用组件
然后我们要在页面中使用刚刚创建的组件，如下所示：
-- -------------------- ---- -------
---- ------------------- ---
----------
---- ------- ---
---------------
-----------
--------
------ ---- ---- ------
------ ----- ---- -------------------- -- -- ------ --
------ ------- ----- ------- --------- -
---------- - - ----- - -- ----
---- - --
-- ---
-
---------
这样我们就可以像使用 Vue 的组件那样使用 wepy 的<w-view>来编写小程序组件了。
与原生语法混合使用
wepy-compiler-view 支持与原生小程序语法混合使用，即在同一个文件中可以同时存在 wepy 语法和原生小程序语法。
-- -------------------- ---- -------
---- ------------------------ ---
----------
--------
------------ -- ---- ----------
---- ------- ---
------- ------------------- -----------
---------
-----------
--------
------ ---- ---- ------
------ ------- ----- ------- -------------- -
---- - -
----- -------
-
------- - -
------- -
------------------
-
-
-
---------
------ ----------- -------
------ -
-------- ------
----------- -----
-------- -----
----------------- --------
-
--------
这样我们就可以在组件中使用 wepy 的语法和小程序原生语法，非常方便。
wepy-compiler-view 源码
最后，我们来看一下 wepy-compiler-view 的源码，了解一下它的实现原理：
-- -------------------- ---- -------
----- -------- - ------------------------------
----- ----------- - -----------------------
----- ------ - ------------------
----- ------- - ---------------------------- -- --
-------------- - -------- --------- -
----- ---- - -
-
---- -------------
----- --------
------ ---
--
-
---- ---------------
---- ---------
-
-
----------------- -- -
------- - ------------------------- - -- -
------ --------- - ------------------------- - ----------
--
--
------ ------------------- -------- --------
-可以看出，wepy-compiler-view 的实现原理是通过正则表达式将所有的<w-view>标签替换成标准的<view>标签，然后再调用 wepy 原有的 Babel 编译器进行编译。这种实现方式非常巧妙，没有修改 wepy 原有的编译器功能，仅仅是在编译前进行了简单的文本替换操作，同时又保持了 wepy 的编译器可扩展性，让我们在开发小程序的过程中能够更加灵活。
结语
wepy-compiler-view 是一款非常实用的 wepy 编译器插件，可以让我们使用类似 Vue 的语法来开发小程序，提高代码复用性，加快开发效率。在项目中使用 wepy-compiler-view 非常简单，只需要安装插件、配置 wepy.config.js 和创建组件即可。希望大家通过本篇文章的介绍，能够更加深入地了解 wepy-compiler-view 的使用和实现原理，对于开发小程序有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671068dd3466f61ffde10