微信小程序搜索功能如何实现

在微信小程序功能中，搜索功能必不可少。无论什么样的小程序，都会有一些搜索的需求。我们来看看如何用小编实现微信小程序的搜索功能。

因为只是一个搜索页面，主页裁剪不合适。原谅我。主页是这样的：

节目已经在github上托管了：https://github.com/yangzhedi/myblog-wxapp,你可以自己，然后就可以开始了~

页面上的黄色输入跳转到真正的搜索页面：pages/components/component 2/search/search . wxml。

搜索页面上还有一个输入搜索框，旁边有一个小十字，可以清除输入中的单词。

搜索页面的逻辑：其实很简单。

输入绑定的搜索绑定输入功能，[javascript]查看普通副本打印？

bindinput:function(e){

this.setdata({

inputvalue:e.detail.value

})

console . log(' bind input ' this . data . input value)

},

bindinput:function(e){

this.setdata({

inputvalue:e.detail.value

})

console . log(' bind input ' this . data . input value)

},

在inputvalue中保存inputvalue，并用bindtap将setsearchstorage函数绑定到搜索按钮

[javascript]查看普通副本打印？

setsearchstorage:function{

让数据；

让localstoragevale=[]；

if(this.data.inputvalue！=''){

//调用api从本地缓存获取数据

var search data=wx . getstoragesync(' search data ')| | |[]

search data . push(this . data . input value)

wx.setstoragesync('searchdata '，searchdata)

wx.navigateto({

url: './result/result '

})

}else{

console.log('搜索一个空的蛋！')

}

//this . onl oad；

},

setsearchstorage:function{

让数据；

让localstoragevale=[]；

if(this.data.inputvalue！=''){

//调用api从本地缓存获取数据

var search data=wx . getstoragesync(' search data ')| | |[]

search data . push(this . data . input value)

wx.setstoragesync('searchdata '，searchdata)

wx.navigateto({

url: './result/result '

})

}else{

console.log('搜索一个空的蛋！')

}

//this . onl oad；

},

该函数主要判断输入值是否不为空，然后通过getstoragesync获取关键字为searchdata的localstorage。

如果您没有第一次设置这个键，您可以获取[]，然后将您想要搜索的值存储在用户的inputvalue中，然后跳转到结果页面。我这里只放了一个案例页。

在真实的生产环境中，这个函数可以通过wx.request向服务器发送一个请求，然后将数据放入结果页面，实现真实的搜索功能。

删除inputvalue的按钮功能实现也很简单，setdata可以将inputvalue设置为空字符串。

当您单击结果页面左上角的返回时，您会发现您的搜索结果已被放入搜索页面。

当您想要删除缓存的数据时，您可以单击清除浏览记录按钮，将弹出一个对话框：

单击“确定”删除，页面将自动刷新(重定向到此页面)，关键字为searchdata的localstorage将重置为空数组。

[javascript]查看普通副本打印？

modalchangeconfirm : function {

wx.setstoragesync('searchdata '，[])

this.setdata({

modalhidden:true

})

wx.redirectto({

url: './search/search '

})

},

modalchangeconfirm : function {

wx.setstoragesync('searchdata '，[])

this.setdata({

modalhidden:true

})

wx.redirectto({

url: './search/search '

})

},

这里的clear没有被wx.clearstorage删除，因为clearstorage会删除所有localstorage，所以要谨慎使用！

这是题目的开头。微信小程序第三方框架怎么开发？标题到此结束

小程序开发涉及很多方面，微信小程序商店提供了很多教程。小编将为大家补充微信小程序搭建第三方框架的教程，希望对大家有所帮助。

值得重复的是，微信小程序的内容部分是混合模式，不是原生的，所以性能不好，绑定tap事件有明显延迟。

由边框包围的每个部分都是具有比较小粒度的本地视图

如上图所示，框架包围的每个部分都是粒度比较小的原生视图。可见整个微信小程序的内容部分是原生视图。

一个完整的微信小程序由一个app实例和多个页面实例组成，其中app实例代表小程序应用，多个页面代表小程序的多个页面。

另外，微信没有提供小程序定制组件的方式，使得微信小程序很难开发出更复杂的应用。

微信小程序本身很简单，几乎和模板语言一样难。可以从翻教程开始做。

我也建议你先动起来，再细细咀嚼公文。由于微信的文档仍在大幅更新，所以查看比较新的文档很重要。

微信小程序的基础知识主要分为以下几个部分：

？两个配置文件的两个核心功能

？wxml模板语法，页面呈现

？在页面间跳转

？互动事件

？组件和api

后面将简要介绍每个部分.

两个配置文件的两个核心功能

app.json应用程序的全局配置文件

app.json是微信小程序的全局配置，主要包括以下配置：

？pages:一个页面路径数组，代表applet要加载的所有页面，数组中的第一项代表applet的初始页面。

？窗口：微信是原生功能，定制性不强。您可以设置小程序的状态栏、导航栏、标题和窗口背景颜色。

？tabbar:微信是原生功能，定制性不强。适用于一般tab应用，tab列可以放置在顶部或底部；tabbar是一个数组，只支持2-5个制表符。

？网络超时：配置小程序网络请求的超时。

？调试：微信小程序调试模式切换。建议在开发模式下开启。正式发布的时候别忘了关掉。

app.json配置的主要领域

page.json页面的小程序全局配置文件

除了上面提到的全局配置，每个页面还可以配置page.json，它覆盖了app.json中的配置，只对当前页面生效。

page.json只能为window配置，有两个有用的配置项：

？启用下拉刷新：是否打开下拉刷新

？disablescroll:只能在page.json上配置，禁止上下翻页。猜测它可以实现完美的屏幕滑动(未经验证)

应用小程序注册条目，唯*

app是用来注册一个小程序的，但是只有一个全局程序，全局数据也可以放进去操作。

//注册微信小程序，只有一个全局

让appconfig={

//小程序生命周期的每个阶段

onlaunch:函数{}，onshow:函数{}，onhide:函数{}，onerror:函数{}，//自定义函数或属性

.

};

app(app config)；

//您可以在其他地方获得这个全局唯*的小程序实例

const app=getapp

小程序没有提供销毁的方法，所以只有进入后台一定时间或者系统资源过高才会被销毁。

页面页面注册条目

页面用于注册页面并维护其生命周期和数据。

//注册微信小程序，只有一个全局

让pageconfig={

data: {}，//页面生命周期的每个阶段

onload:函数{}，onshow:函数{}，onready:函数{}，onhide:函数{}，onunload:函数{}，onpulldownrefresh:函数{}，onreachbottom:函数{}，onshareappmessage:函数{}，//自定义函数或属性

.

};

页面(page config)；

//获取页面栈，表示历史上访问过的页面，比较后一个元素是当前页面

const page=getcurrentpages

关于每个生命周期的细节和过程，请参考下图品味：

粘贴图像. png

app.json和page.json维护应用程序和页面的配置属性。应用和页面维护应用和页面的生命周期和数据。

微信小程序第三方框架的建立，对小程序的成功开发也很有帮助。看了以上资料，有没有学到具体的开发方法？有些事你不明白。请留言并与小编讨论。

这是第一段的结尾。以下是结局。微信小程序第三方框架怎么开发？目前已经获得了998网友的青睐！正文到此结束