HBuilderX 开发工具中实现自定义生成代码块的功能

红太狼 2023-01-20 05:59 57阅读 0赞

如何在HBuilderX开发工具中实现自定义生成代码块的功能

因为uListMedia不是内置组件，所以在你敲ulistmedia时看不到uListMedia的提示信息

在学习uni-app官网视频教程中，可能作者是因录播时间有限，没时间展开说明uListMedia

代码块是如何自定义的，这给所有入门的学习uni-app开发的人带来了困扰，特写此文，

希望在你刚入门的这一刻能帮到你。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neml6aGk_size_16_color_FFFFFF_t_70][]

自定义uListMedia代码块如下：

"uListMedia": {
    	"body": [
    		"<view class=\"uni-list\">",
    			 "\t<view class=\"uni-list-cell\" hover-class=\"uni-list-cell-hover\" v-for=\"(item,index) in list\" :key=\"index\">",
    				  "\t\t<view class=\"uni-media-list\">",
    					  "\t\t\t<image class=\"uni-media-list-logo\" :src=\"item.img\"></image>",
    					  "\t\t\t<view class=\"uni-media-list-body\">",
    						  "\t\t\t\t<view class=\"uni-media-list-text-top\">{
       {item.title}}</view>",
    						  "\t\t\t\t<view class=\"uni-media-list-text-bottom uni-ellipsis\">{
       {item.content}}</view>",
    					  "\t\t\t</view>",
    				  "\t\t</view>",
    			 "\t</view>",
    		 "</view>"
    	],
    	"prefix": "ulistmedia",
    	"project": "uni-app",
    	"scope": "source.vue.html"
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neml6aGk_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neml6aGk_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neml6aGk_size_16_color_FFFFFF_t_70 3][]

到此 HBuilderX 开发工具中实现自定义生成代码块的功能介绍完成。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neml6aGk_size_16_color_FFFFFF_t_70]: /images/20221021/b2e0c67d550e4d4ca4d73c19d3fef240.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neml6aGk_size_16_color_FFFFFF_t_70 1]: /images/20221021/b21fa508688b46d59ec44f6f956966e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neml6aGk_size_16_color_FFFFFF_t_70 2]: /images/20221021/97f9e36023e74c36beaff8bb85d62ba0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poZW5neml6aGk_size_16_color_FFFFFF_t_70 3]: /images/20221021/5e95b79cc9594cd99cb5bd249532c72a.png