新版编辑器-搜索组件2.0教程
<p><span style="overflow-wrap: break-word; margin: 0px; padding: 0px; font-weight: 700; color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"><span style="font-size:24px">一、搜素组件功能介绍</span></span><span style=""> </span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="">搜索组件可绑定页面中的列表，从而通过输入框输入关键字对列表进行内容筛选；也可绑定相应的种类（如商品、资讯），实现自定义全局搜索。</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="overflow-wrap: break-word; margin: 0px; padding: 0px; font-weight: 700; color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"><span style="font-size:24px"><span style="overflow-wrap: break-word; margin: 0px; padding: 0px;"><span style="font-family:微软雅黑">二、搜</span></span>索组件2.0改版说明</span></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="">本</span><span style="">次改版主要的内容包括：</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="">1、丰富搜索组件样式，包括自定义搜索框圆角，搜索图标，背景颜色</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="">2、后台增加关键词搜索统计功能，可统计关键词热搜次数和搜索人数；</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="">3、后台增加关键词管理功能，根据所设的关键词，<a href="http://www.jisuapp.cn/" target="_blank" style="overflow-wrap: break-word; margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(0, 0, 0);">小程序</a>端搜索时进行关键词联想；</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="">4、小程序端的搜索页面可查看历史搜索词和热搜词；</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="">5、搜索组件除了绑定当页列表外，也可自定义绑定种类（商品、资讯、社区）进行搜索。</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="">搜索组件绑定列表的具体操作请查看教程：</span><span style=""><a href="http://bbs.zhichiwangluo.com/thread-11812-1-1.html" target="_blank" style="overflow-wrap: break-word; margin: 0px; padding: 0px; text-decoration-line: none; color: rgb(85, 85, 85);">http://bbs.zhichiwangluo.com/thread-11812-1-1.html</a>，</span><span style="">本教程仅介绍改版功能</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="overflow-wrap: break-word; margin: 0px; padding: 0px; font-weight: 700; color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"><span style="font-size:24px">三、 功能及设置说明</span></span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">1、自定义搜索组件样式设置</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_15982" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162430wyggb974ncnc923c.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">2、搜索词统计与热搜词查看</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">1）在【数据统计】-【关键词搜索统计】处，可对关键词热搜次数排行、关键词搜索用户数排行进行查看。（可查看近30天的排行和之前每月的排行，排行展示前八名） </span><span style="font-family:微软雅黑">点击查看更多，可查看</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">30天内的所有搜索词统计情况。</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_15983" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162431vii9zfw9wisk9vk8.png" class="zoom" width="855"/> <span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><img id="aimg_15984" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162431ng8zd63girrgobbd.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">2）在编辑器端开启热门搜索</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_15985" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162431rtwjjzojtjbweawv.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">3）小程序端搜索时显示热搜词和历史搜索词</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_15986" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162431rbqiiol41zllupiz.png" class="zoom" width="380"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">3、搜索关键词联想设置 </span></p><p><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">1）从【功能模块】-【搜索关键词管理】，进入关键词管理页面 </span><img id="aimg_15987" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162432grvqo5za3v527a5v.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">2）点击“添加关键词分类”，输入合适的名称，添加分类，便于关键词管理（例：添加分类的名称为“牛仔裤”） </span><img id="aimg_15988" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162432hf0ffwbf964z11my.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">3）点击“编辑”，在此分类下添加想要联想出的关键词名称（例：在“牛仔裤”的分类下添加关键词“牛仔裤蓝”“牛仔裤黑”“牛仔裤短款”“牛仔裤长款”...</span><span style="font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">...） </span>注：依照提示，每个关键词用英文的分号进行分隔。</p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_15989" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162432tk69lece8nicjjnc.png" class="zoom" width="855"/> <span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><img id="aimg_15990" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162432swq7it7n50cit0o8.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">4）添加完成后在编辑器端开启“关键词联想” </span><img id="aimg_15991" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162432yju6ej4ekutryr7s.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">5）小程序端输入关键词时会根据所设置的关键词进行相应联想（例：小程序端输入“牛仔”，则会根据后台添加的关键词进行联想，显示“牛仔裤蓝”“牛仔裤黑”等关键词） </span><img id="aimg_15992" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162433jp9kupy09djzjjjn.png" class="zoom" width="378"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">4、自定义绑定类别进行搜索 </span></p><p><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">1）编辑器端添加搜索组件后，关联设置选择“全局绑定”，之后点击“相关设置”进行绑定种类的选择，默认绑定基础商品。 </span><img id="aimg_15993" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162433pgbcasewtgta0tba.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">2）点击“全局绑定”后出现弹窗，选择需要绑定的类别，目前可绑定的类别有“商品”、“社区”和“资讯”，“商品”中包含基础、到店、秒杀（秒杀仅支持搜索单品秒杀）等子类别。只有绑定两个或以上的类别，才能开启“综合”类。 弹窗左侧为浏览区域，展示搜索结果页面。会根据右侧绑定的不同类别显示差异。 </span><img id="aimg_15994" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162433njjebtd83cqm5mfk.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span>注：第一次选择类别，以及之后再添加绑定类别，都需要重新打包小程序使用<span style="font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span></p><p><span style="font-family:微软雅黑">（</span><span style="font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">3）小程序端进行搜索，会根据该组件所绑定的类别展示出对应的搜索结果。</span></p><p><span style="font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_15995" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162433fj6n6v5ljvu76p37.png" class="zoom" width="656"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="font-family:微软雅黑">（</span><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">4）点击事件设置搜索 点击事件设置搜索时，也可自定义绑定搜索类别，操作跟上述相同。 </span><img id="aimg_15996" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162434iossf1q1o6oqoq14.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);">5、页面上滑搜索栏顶部悬停 编辑器端添加搜索组件后，高级设置处开启页面上滑搜索栏顶部悬停的开关，小程序端页面上滑，搜索栏将在顶部悬停。 </span><img id="aimg_15997" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162434s5v4lw4bu05lvvzw.png" class="zoom" width="855"/> </p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><span style="">小程序端：</span></p><p><span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"> </span><img id="aimg_15998" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162434oaxrxdekizm7u1xe.png" class="zoom" width="549"/> <span style="color: rgb(81, 81, 81); font-family: "Microsoft Yahei", Simsun; font-size: 14px; background-color: rgb(255, 255, 255);"></span><img id="aimg_15999" src="http://bbs.zhichiwangluo.com/data/attachment/forum/201909/20/162434kcgkbvvgvsxgfxbg.png" class="zoom" width="604"/></p>
页:
[1]