Foreword
this article is based on Api12
in fact, in the first three articles, we have already realized all the functions to be realized. Whether it is list display, data editing, style modification, skin changing, etc., we have reached a deliverable state. Of course, the current small project has also been put on the application store of Hongmeng System. The name is "Follow Your Heart". Everyone can experience it while doing the project. This article, I will realize the search function of the last point, and summarize the knowledge points used in this small project.
We can simply look at the results that have been completed so far.
On the first page of the memo, the color of the item is linked with the skin.
Content editing page, you can set the style and skin.
Search function implementation
at present, the search function is bound to the list page. First, it shares components to reduce pages and codes. Second, its function is not complicated and it is more intuitive to merge into one page.
Click the search box, enter the content to search, filter out the data matching the search content for display, click the cross on the right side of the search box, and restore all the data.
For the previous list data loading, we only need to modify it, add key search terms, pass them during search, and do not pass them during other calls, and use the filter function to filter and search for matching data.
doData(keyWord?: string) {
try {
this.doContentEmpty()
this.mListContentBean = []
DataPreferences.getInstance().getAllSync().allKeys?.forEach((key) => {
let content = DataPreferences.getInstance().getSync<string>(key)
let bean = JSON.parse(content) as ListContentBean
this.mListContentBean.push(bean)
if (DataPreferences.getInstance().getAllSync().allKeys?.length == this.mListContentBean.length) {
this.mListContentBean.sort((a, b) => b.timeValue! - a.timeValue!)
if (keyWord != undefined) {
this.mListContentBean = this.mListContentBean.filter(item => item.title?.indexOf(keyWord) != -1);
}
}
})
} catch (e) {
}
}
UI components
Search({ placeholder: "search……" })
.margin({ left: 10, right: 10, top: 10 })
.onSubmit((value) => {
//search
this.doData(value)
})
.onChange((value: string, _?: PreviewText) => {
if (value == "") {
//clear
this.doData()
}
})
memorandum of Knowledge
This memo project does not contain many knowledge points. There are two aspects of knowledge points that can be practiced. The first aspect is UI component-related, such as the use of List component, Search component, and rich text component RichEditor. In addition to these typical components, there are also many basic components.
The second aspect is the function. We can practice the addition, deletion, modification and check of user preference DataPreferences data, the avoidance between input box and soft keyboard, and the saving of page data and the echo of page data.
Related Summary
there are many restrictive factors in the development of meta-services, such as package size restrictions and related API restrictions. Therefore, when we actually develop, we still need to check whether the specific Api can be used in official website. At present, we have summarized several minor problems for the current small project, which can be used as a reference in the development process.
How to realize the bottom button, after the soft keyboard pops up, it is displayed on the soft keyboard?
Answer: Get the height of the soft keyboard, and dynamically set the components that need to be changed according to the pop-up and hiding of the soft keyboard.
Meta-service, using user preferences DataPreferences for data storage, how to store in the form of a list?
Answer: You only need to set different keys. When obtaining, you can traverse all keys and obtain the corresponding data with keys.
How should RichEditor echo data correctly?
A: After RichEditor initialization is complete , for example, in the onReady method.
Top comments (0)