上一篇我们已经简单开发了一个列表页面,这次来简单开发组件

1111.gif
第一步:在src
右键新建一个名为components
的文件

EDD16251-CEB3-4583-90C9-92B950C670C1.png
第二步:在components
右键新建一个名为service
的文件,同时创建index.jsx
和index.less
文件,不会的可以直接复制page
下面的index.jsx
和index.less
,然后粘贴进去service
,删除一些没用的代码就可以了,这里用来创建联系客服的组件

0CD9F92E-448F-4A1E-A2A2-6B66D68371C8.png

519D62D7-DCFC-4959-A2C4-4461661769AD.png
第三步:开始我们的组件UI

E6A71017-FC47-46CE-AE19-DC2132BE1EC7.png
第四步:在需要的页面导入这个组件

F5A237E3-D968-483D-B9D9-120DA1B13062.png

35D18977-7846-43B7-87C9-DBD72F606519.png
第五步:保存一下,就可以在小程序看到效果了

C463C84E-2DFB-49DD-9AFC-7D049F6595B6.png
网友评论