wsSearchView：一个简单方便的微信小程序搜索框页面组件

该搜索框组件基于开源项目wxSearch进行了改进，主要有以下几个修改点：

1.增加了注释，修改了一些bug，项目可以跑起来。

2.为了解决搜索框和输入法界面重叠的问题，将搜索组件作为一个独立的页面。

3.修改了界面样式，更加美观。

4.减少了暴露接口，复杂性更低。

小程序演示：

项目地址：  前往github项目

<!--pages/search/search.wxml-->

<van-search

  value="{{ value }}"

  placeholder="请输入搜索关键词"

  show-action

  input-align="center"

  bind:search="onSearch"

  bind:cancel="onCancel"

  bind:change="onChange"

    background="#4fc08d"

/>

<ListItem itemList="{{itemList}}" />

<view wx:if="{{kong}}" style="padding: 20pxtext-align: center">无更多数据</view>

<van-toast id="van-toast" />

{

  "usingComponents": {

    "van-search": "@vant/weapp/search/index",

    "ListItem":"/components/ListItem/ListItem",

    "van-toast": "@vant/weapp/toast/index"

  },

  "navigationBarTitleText": "搜索",

  "enablePullDownRefresh": true,

  "onReachBottomDistance": 0

}

const { goodsHttp } = require('../../http/api')

import Toast from '../../miniprogram_npm/@vant/weapp/toast/toast.js'

Page({

    data: {

        value: '',

        itemList:[],

        page:1,

        kong:false,

        isloding:true

    },

    onLoad(){

        this.init()

        if(this.data.isloding)return this.init()

    },

    async init(){

        try{

            this.setData({

                isloding:false

            })

            wx.showLoading({

              title: '别急哦~',

            })

            let {goods:{data}} = await goodsHttp({title:this.data.value,

            page:this.data.page})

            data.forEach(r=>r.description='书籍是人类进步的电梯书籍是人类进步的电梯书籍是人类进步的电梯')

            if(this.data.page==1){

                this.data.itemList = []

            }

            this.setData({itemList:[...this.data.itemList,...data]})

            if(!data.length){

                this.setData({

                    kong:true

                })

            }

            else{

             this.setData({

                 kong:false

             })

            }

            Toast.clear()

            wx.hideLoading()

            this.setData({

                isloding:true

            })

        }catch(err){

            console.log(err)

        }

    },

    onReachBottom(){

        this.data.page++

        this.init()

    },

    onChange(e) {

        this.setData({

            value: e.detail,

        })

    },

    onSearch() {

        this.data.page = 1

        this.init(this.data.value)

        console.log('搜索' + this.data.value)

    },

    onCancel() {

        /* encodeURIComponent('微信小程序') 转码 

        decodeURIComponent("%E4%BD%A0%E6%98%AF%E5%82%BB%E9%80%BC") 解码

        */

        this.data.value = ''

        this.init()

        this.data.page = 1

        console.log('取消' + this.data.value)

    },

    onPullDownRefresh: function () {

                this.data.page=1

                this.init()

            },

})

<!--components/ListItem/ListItem.wxml-->

<block wx:for="{{itemList}}" wx:key="index">

    <view class="flex item" bindtap="go" data-url="{{item.cover_url}}">

        <image class="img1" src="{{item.cover_url}}"></image>

        <view class="row">

            <view class="title">

                {{item.title}}

            </view>

            <view class="dec {{item.price?'van-multi-ellipsis--l2':'van-multi-ellipsis--l3'}}">

                {{item.description}}

            </view>

            <view class="common-sty" wx:if="{{item.price}}">

                <text>价格：{{item.price}}</text>

                <text>销量：{{item.sales}}</text>

                <text>收藏人数：{{item.collects_count}}</text>

            </view>

        </view>

    </view>

</block>

/* components/ListItem/ListItem.wxss */

/* @import '@vant/weapp/common/index.wxss' */

@import '/miniprogram_npm/@vant/weapp/common/index.wxss'

.flex{

    display: flex

  }

.item{

    padding:5px

}

.img1{

    width: 120px

    height: 120px

    display: block

    border-radius: 5px

}

.row{

    flex:1

    height: 120px

}

.title{

    padding:10px

    text-overflow: ellipsis

    display: -webkit-box

    -webkit-line-clamp: 1

    word-break: break-all

    -webkit-box-orient: vertical

    height:14px

    overflow: hidden

}

.dec{

    padding: 0 10px

    margin-top: 10px

}

.common-sty{

    font-size: 12px

    padding:10px

    color:rgb(66, 64, 64)

}

.common-sty text{

    margin-right: 10px

}

{

    "component": true,

    "usingComponents": {}

}

// components/ListItem/ListItem.js

Component({

    /**

     * 组件的属性列表

     */

    properties: {

        itemList:{

            type:Array,

            value:[{

                cover_url:"https://oss.shop.eduwork.cn/product/2020-0820-5f3e15bc69891.png",

                title:"人类的书籍",

                description:"人类进步的阶梯人类进步的阶梯"

            }]

        },

    },

    /**

     * 组件的初始数据

     */

    data: {

    },

    /**

     * 组件的方法列表

     */

    methods: {

        go(e){

            let url = e.currentTarget.dataset.url

            wx.navigateTo({

              url: '/pages/web/web?url='+url,

            })

        }

    }

})

导入之后项目根目录下的project.config.json文件被修改为：

{

“description”: “项目配置文件”,

“packOptions”: {

“ignore”: []

},

“setting”: {

“bundle”: false,

“userConfirmedBundleSwitch”: false,

“urlCheck”: true,

“scopeDataCheck”: false,

“coverView”: true,

“es6”: true,

“postcss”: true,

“compileHotReLoad”: false,

“preloadBackgroundData”: false,

“minified”: true,

“autoAudits”: false,

“newFeature”: false,

“uglifyFileName”: false,

“uploadWithSourceMap”: true,

“useIsolateContext”: true,

“nodeModules”: false,

“enhance”: false,

“useCompilerModule”: true,

“userConfirmedUseCompilerModuleSwitch”: false,

“useMultiFrameRuntime”: true,

“useApiHook”: true,

“useApiHostProcess”: true,

“showShadowRootInWxmlPanel”: true,

“packNpmManually”: false,

“enableEngineNative”: false,

“packNpmRelationList”: [],

“minifyWXSS”: true

},

“compileType”: “miniprogram”,

“libVersion”: “2.15.0”,

“appid”: “wxbd5104f84c90a9f6”,

“projectname”: “sys-teaching”,

“debugOptions”: {

“hidedInDevtools”: []

},

“scripts”: {},

“isGameTourist”: false,

“condition”: {

“search”: {

“list”: []

},

“conversation”: {

“list”: []

},

“game”: {

“list”: []

},

“plugin”: {

“list”: []

},

“gamePlugin”: {

“list”: []

},

“miniprogram”: {

“list”: []

}

}

}

---