微信小程序--搜索关键词高亮

代码地址如下:
http://www.demodashi.com/demo/14249.html

一、前期准备工作

软件环境:微信开发者工具

官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

1、基本需求。
  • 实现搜索关键词高亮
2、案例目录结构

二、程序实现具体步骤

1.index.wxml代码
<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">
      {{userInfo.nickName}}\n
      点击头像开始搜索
    </text>
  </view>
</view>
2.index.wxss代码
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: red;
  text-align: center;
}

.usermotto {
  margin-top: 200px;
}
3.search.wxml代码

<!--search.wxml-->
<view>
  <view>您输入的关键词:{{inputs}}</view>
  <view class="input-wrap">
    <input bindinput="bindSearchInput" placeholder="点击此处开始输入...." value="极客小寨" class="search-input" auto-focus/>
    <button bindtap="bindSearchTap" class="search-button">搜索</button>
  </view>
  <view class="search-result-list">
    <block wx:for="{{result}}" wx:for-index="idx" wx:for-item="key_item" wx:key="">
      <view data-idx="{{idx}}" class="list-item">
        <block wx:for="{{key_item}}" wx:for-item="key_obj" wx:key="">
          <text wx:if="{{key_obj.key == true}}" style="color:red;">{{key_obj.str}}</text>
          <text wx:else>{{key_obj.str}}</text>
        </block>
      </view>
    </block>
  </view>
</view>
4.弹框index.js逻辑代码

a.部分的功能实现

search_databse: function () {
    let hilight_word = function (key, word) {
        let idx = word.indexOf(key);
        let t = [];
        if (idx > -1) {
            if (idx == 0) {
                t = hilight_word(key, word.substr(key.length));
                t.unshift({key:true,str:key});
                return t;
            }
            if (idx > 0) {
                t = hilight_word(key, word.substr(idx));
                t.unshift({key:false,str:word.substring(0, idx)});
                return t;
            }
        }
        return [{key:false,str:word}];
    };

    let database= [
      ‘极客小寨小程序开发_百度百科‘,
      ‘极客小寨微信小程序正式上线‘,
      ‘极客小寨微信小程序有哪些?关注极客小寨微信公众号获取微信小程序最全汇总?‘,
      ‘公众号出售-公众号价格-公众号买卖-A5公众号交易平台‘,
      ‘如何运营出一个有吸引力的微信公众号? - 微信公众平台号 - 知乎‘
    ];
    let searched = [];
    let inputs = this.data.inputs;
    for (let i = 0; i < database.length; i++) {
      var current_word = database[i];
      if (current_word.indexOf(inputs) > -1) {
        searched.push(hilight_word(inputs, current_word))
      }
    }
    // console.log(searched);
    this.data.result=searched;
    console.log(‘this data‘,this.data);
    this.setData(this.data);
  },

三、案例运行效果图

四、总结与备注

暂无微信小程序--搜索关键词高亮

代码地址如下:
http://www.demodashi.com/demo/14249.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

原文地址:https://www.cnblogs.com/demodashi/p/9802023.html

时间: 2024-11-05 00:41:57

微信小程序--搜索关键词高亮的相关文章

微信小程序搜索排名怎么优化

微信小程序搜索排名怎么优化?小程序的发展,让众多在PC互联网时代转型受阻的企业看到了希望.大家都想利用小程序来发展线上渠道,但是小程序是如何进行搜索排名的呢?可能大家都不太了解,现在小程序开发公司多享科技为大家讲述一下. 1.小程序排名的名字(标题) 不少对网站排名seo有一定了解的都应该知道,网页排名中国有一个很重要的因素就是网页标题怎么书写.同理,小出现排名中标题的书写同样很重要.并且小程序标题在同一个平台(微信.支付宝)中具有唯一性,先注册先得哦. 2.小程序的关键词 小程序关键词设置需要

微信小程序 —搜索框

wxSearch优雅的微信小程序搜索框 一.功能 支持自定义热门key 支持搜索历史 支持搜索建议 支持搜索历史(记录)缓存 二.使用 1.将wxSearch文件夹整个拷贝到根目录下 2.引入 // wxml中引入模板 <import src="/wxSearch/wxSearch.wxml"/> <template is="wxSearch" data="{{wxSearchData}}"/> // wxss中引入 @i

微信小程序搜索框代码组件

search.wxml <view class="header"> <view class="search"> <icon type="search" size="18" color=""> </icon> <input type="text" confirm-type="search" bindconfirm=&

资讯 | 2018年1月15日微信公开课解读!微信小程序开发资源

引言:2018年1月15日 微信公开课PRO开课了,本次课时内容将涉及:小程序.智慧零售.企业微信.小游戏  (附学习参考资料) 为了快速理解「2018 微信公开课 PRO 版」上张小龙的一小时演讲内容,结合下午微信公开课课室A_B_C的课时安排,这里为大家提前整理了相应的小程序学习参考资料: 微信公开课pro_A课室(14:00-17:50) 主题:小程序产品能力.开发.应用及规则 一.如何开发一个优秀的微信小程序/小游戏 微信小程序官方工具  https://mp.weixin.qq.com

小程序开发运营必看:微信小程序平台运营规范

一.原则及相关说明 ? 微信最核心的价值,就是连接——提供一对一.一对多和多对多的连接方式,从而实现人与人.人与智能终端.人与社交化娱乐.人与硬件设备的连接,同时连接服务.资讯.商业. ? 微信团队一直致力于将微信打造成一个强大的.全方位的服务工具.在此基础上,我们推出了微信小程序这个产品,提供给微信小程序的开发者在微信内搭建和实现特定服务.功能的平台.通过全面开放的能力,我们将更多连接的可能给予企业和服务提供者,并为微信小程序提供基础的接入能力.运营环境和规则体系,进而帮助更多的企业和服务提供

两天快速开发一个自己的微信小程序

一.写在前面 1.为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速.开发成本低.用户流量巨大等特点,也就成了前端开发工程师必会的一个技能. 2.先放上我做的小程序 可以在微信小程序搜索"悬笔e绝",或者用微信扫描下面的二维码哦 (1)欢迎页:这个logo是当年念大学给社团做的logo,苦学了整整一周的PS啊... (2)首页:轮播头图,天气,豆瓣电影正在热映 (3)全国城市切换页 (4)天气详情页 (5)地图周边服务 (6)豆瓣电影 (7)热点新闻 (8)更多页面 3

【转】两天快速开发一个自己的微信小程序 悬笔e绝 www.xuanbiyijue.com

文章出处:https://www.cnblogs.com/xuanbiyijue/p/7980010.html 作者: 悬笔e绝 www.xuanbiyijue.com 两天快速开发一个自己的微信小程序 一.写在前面 1.为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速.开发成本低.用户流量巨大等特点,也就成了前端开发工程师必会的一个技能. 2.先放上我做的小程序 可以在微信小程序搜索“悬笔e绝”,或者用微信扫描下面的二维码哦 (1)欢迎页:这个logo是当年念大学给社团做的l

微信小程序的HTML和Markdown格式的富文本渲染组件html2wxml,支持代码高亮

之前微信小程序的富文本渲染组件用的wxParse,对普通富文本确实可以,但是对于代码格式pre标签则无法使用. 下面这个html2wxml很不错,可以支持代码高亮. 详细文档:https://github.com/qwqoffice/html2wxml 原文地址:https://www.cnblogs.com/goloving/p/10558503.html

微信小程序豆瓣电影项目的改造过程经验分享

在学习微信小程序开发过程中,一部分的难点是前端逻辑的处理,也就是对前端JS的代码编辑:一部分的难点是前端界面的设计展示:本篇随笔基于一个豆瓣电影接口的小程序开源项目进行重新调整,把其中遇到的相关难点和改进的地方进行讨论介绍,希望给大家提供一个参考的思路,本篇随笔是基于前人小程序的项目基础上进行的改进,因此在开篇之前首先对原作者的辛劳致敬及感谢. 1.豆瓣电影接口的小程序项目情况 豆瓣电影接口提供了很多相关的接口给我们使用,豆瓣电影接口的API地址如下所示:https://developers.d