小程序自定义组件Component

由于新建组件不会自动新建文件夹存放组件的4个文件，所以现在在pages页面下新建文件夹，如myServiceComponent。

在myServiceComponent文件夹下新建Component，并命名为myServiceComponent，如下图所示：

开发工具自动新建4个文件，如下图所示：

新建的组件文档中3个和页面的文档类似，ts文档实际上也是js文档，只是其内部函数写法与js不同，所以改为ts以示区别。

在ts文档中加入lifetimes，如下列代码：

lifetimes中的attached方法相当也index.js中的onLoad方法。

myserviceComponent.json中的代码不变，如下代码：

在pages目录下新建service1文件夹，新建service1.wxml和其它2个文档，如下图：

其中代码如下：

myserviceComponent：声明调用组件，组件名为myserviceComponent。

service1.json代码如下：

usingComponents：意为使用组件。

myserviceComponent：定义组件的代用名，其后面是组件的路径。

这样，跳转到页面service1.wxml后，效果如下：

组件的视图就被搬到调用页面来了。

service1.wxml以下代码：

当然也可以由service1.js赋值

如下面2块代码组合赋值传值：

上面代码的冒号和“个”是固定文字。

效果如下图：

注意：调用页面的参数名和组件中的参数名（productName、total）必须相同，不然获不到传值。

在首页写入以下代码：

service1文件夹代码：

service1.wxml：

service1.js：

myserviceComponent.ts：

正常能获得主页跳转过来的参数detail的值design。lifetimes里的ready事件如果改为attched则获取不到。

在service1目录下新建目录files，里面是一些js文件，用于描述服务内容。如下图：

其中design.js代码为：

design1///我们使用的设计软件有CorelDRAW、Photoshop、Excel、Word、Powerpoint、AI、AE等，能兼容大多数的文件格式，实现文件格式之间的转换。提供常见的P图、抠图、字体、图文排版、文件转换、办公文件处理的专项服务。///

design2///我们服务行业多年，经过多年的实践和积累，现已能为客户提供快速高效的设计服务和解决方案。经客户体验，我们的设计排版速度比常规块数倍，设计排版，我们熟练专业，绝对让物超所值。///

design3///为了解决设计的效率问题，我们自行开发了Coreldraw、Excel、Word的插件，在很多场合都能实现程序化智能化排版，排版处理速度更快、效率更高，开始向客户提供文字扫描识别、程序化排版、大量数据和图片处理的业务，欢迎体验。'; export const productStr=productText;

在service1目录下新建目录images，存放需要用的图片。如下图：

重新改写service1的代码：

service1.wxml

service1.js

require js：所要请求的js文档必须在service1的目录下面，不然会出现请求的js模块未定义，或被依赖忽略而无法引入。并且似乎必须在发起调用的js引用。

改写myserviceComponet的代码：

myserviceComponet.wxml

myserviceComponent.ts

引用自定义组件Component构造页面成功。

这样，可以添加如service2、service3……等的文件夹，结构同service1的，wxml文档和js文件也相同，描述产品的js文件和图片文件不同。为下一步的分包做好准备。