It took two weeks to develop my WeChat applet (usually at work, and basically developed in my spare time).
Let's introduce the function and structure of the project.
The technology stack used is vue2+weui+es6; Remember to switch to the dev branch when watching the project;
this is a WeChat applet that helps memorize words. The project calls the Baidu translation api, so that the data of Baidu translation can be obtained.
Let me introduce the project directory first:
build is the relevant configuration;
config is the development-related configuration file;
dist is the packaging file; src is the
js file written: assets are static files; components are components; models are state management (models are not used in this project); pages are the pages written; service and utils are their own tools (used to do this)
Add word page: pages => myIndex
This page can add words. Since there is no backend server, all words are saved to localstorage. Below is the code:
submit(e) {
console.log(e);
if(!e.target.value){
return
}
// wx.removeStorage('words');
let array = PubliceService.getStoreage('words') || [];
let value = e.target.value;
let valueObj = value ? {[value.word]: value.explain}:{};
for (let i = 0; i < array.length; i++) {
if(array[i][value.word]){
PubliceService.openConfirm({title: '单词有重复', content: '您输入的单词已存在列表中,是否替换?'}, () => {
array[i][value.word] = value.explain;
PubliceService.setStoreage('words', PubliceService.transformArrayData(array,false,true));
this.inputValue = '';
this.textareaValue = '';
});
return;
}
} // 判断所提交的单词是否有重复,如果有重复则提醒用户是否替换,有重复的话,直接给更新,然后终止 不继续往下走了;
array.push(valueObj);
this.inputValue = '';
this.textareaValue = '';
this.$forceUpdate();// 强制刷新页面
wx.showToast({
title:'新增成功',
icon:'success',
duation:1500
});
PubliceService.setStoreage('words', PubliceService.transformArrayData(array,false,true)) // 给这个数组对象加一个id
bus.$emit('addHandle');
};
以上是首页的功能;
Personal center page: pages=>my
This is relatively simple, get user information, and then give it a level through the array length in localstorage, the level rule is defined in config;
this method can be defined directly in the mounted function;
initPage(){
let array = PubliceService.getStoreage('words');
console.log(array);
this.wordTotal = array.length;
this.degree = PubliceService.returnDegree(this.wordTotal);
}
Then there is the final word list page, which takes relatively more time, because it involves the functions of deleting, editing and simply modifying data:
word list page: pages=>wordlist
Clicking Edit here will jump to the Edit Word page:
This page is very similar to the home page. It is reasonable to reuse it. I don't have much time to do it. I
simply reuse some components, but the functions are not reused.
The following is the code when I edit the function and save it:
submit(e){
console.log(e);
// wx.removeStorage('words');
let array = PubliceService.getStoreage('words') || [];
let value = e.target.value;
console.log(array,value);
for(let i = 0;i<array.length;i++){
for(let key in array[i]){
if(key === value.word && key !== 'key'){
array[i][value.word] = value.explain;
console.log(array);
wx.showToast({
title:'更新成功',
icon:'success',
duation:1500
});
PubliceService.setStoreage('words',array);
PubliceService.debounceLog(500,()=>{wx.navigateBack({delta:1})});
return
}
}
}
let obj = {[value.word]:value.explain,key:array.length};
array.push(obj);
wx.showToast({
title:'新增成功',
icon:'success',
duation:1500
});
PubliceService.debounceLog(500,()=>{wx.navigateBack({delta:1})});
PubliceService.setStoreage('words',array);
console.log(array)
}Here is the reason for using a double-layer loop, because when I first wrote it, I needed to judge whether there were repeated words in it, and then for the simplicity of the diagram, I directly wrote the data structure like this:
[{test:'Test ',key:0},{word:'word',key:1}], it can only be said that it is much simpler to judge whether there are repetitions, but when I take English words, I have to loop for in, on the list The loop is also like this. It can only be said that there is no time to do it. Since it is written, write it!
The delete function is filtered by the filter of es6. At this time, it was used to add the key value of the word.
Since it is the first time to write something with Vue, many basic knowledge of Vue is not particularly solid. If you see any problems, please help me point it out in time. It is best to give some suggestions and grow with each other.
The following are The github address of this project: https://github.com/kaykie/rem...
If this WeChat applet is helpful to you, please give me a star, I will use vuex for the next personal WeChat applet project Write, I hope to get your support, give me some motivation!
Summary: My natal framework is react, and the company also uses react to develop projects (technical stack is react+redux-sage+antd+rn+react-router), I just started from react to vue for development, there are still some I'm not used to it. Many syntactic sugars are different. I also wrote this small program while exploring, such as the bus used in the project, the communication between different components. I used react before because I used redux, so relatively speaking Novelty. Of course, I have encountered some pits. I also mentioned it on my own blog. This pit is often encountered in the development of react. Later, as I became more and more familiar with Vue, I found that it did not start. It is so difficult to imagine, of course, the filter and director have not been used in the page; I will try to use it in the next project.
In addition, I have to say, thank Meituan for its contribution to the open source community.
Thank you star!