Extra! Extra! Cooking free online!! Scan the code below to experience, if you are satisfied, please click the three points in the upper right corner, and then click the head of cooking without worry to enter the small program information page and click like, thank you!

features

  • Can recommend recipes based on the current time period;
  • Recipe categories can add navigation;
  • Offline access to the details page;
  • Can forward details page;
  • Support dark mode;
  • Use free cloud services (Serverless);
  • Clean interface, no ads

Cooking without worry is my recently developed cookbook personal small program, sparrow is small, five viscera complete, also have its value. The key is ad-free and free.

What? Naked advertising? No, No, No, No, No, No, No, No, No.

Home page

Below is the home page.

The default navigation bar is breakfast, lunch and other time, according to the common sense to do the recommendation, for example, the user between 11 am to 3 PM into the small program, will automatically recommend lunch recipes. In addition, the parameters selected by the classification page will be rotated to the end of the navigation bar. If it happens to be a time period parameter, it will be directly selected.

The code is as follows:

let item = navs[4]
  // Based on the time period
  const hour = new Date().getHours()
  if (10 <= hour && hour < 15) {
    item = navs[1]}else if (15 <= hour && hour < 18) {
    item = navs[2]}else if (18 <= hour && hour < 20) {
    item = navs[3]}else if (6 <= hour && hour < 10) {
    item = navs[0]}Copy the code

The classification list of the home page mainly uses scroll view to realize scrolling down to load data rendering. Because of the small amount of data, I didn’t optimize it very much. The performance is definitely not as good as recycl-View, which is a long list extension. If you are interested, you can try it. There is a baselist component in the categorization and search list pages. We must pay attention to the reuse of components and the encapsulation of public methods and logic when doing projects.

Details page

Below is the detail page.

Since the cloud service already returns the details of each recipe when sorting and searching, there is no need to request the details interface. Although the list loads slowly, there are fewer requests, which saves bandwidth. It is worth mentioning that I also made a collection page, the use of small program data cache, can offline access to the details of the page.

In real development, the data returned by the cloud service is somewhat unreasonable. For example, the majority of the procedure description will not appear carriage return newline symbol, no numeric sequence number, but the minimal part of the return. The front and back end data is not unified, we must have encountered in the development of it, the principle is to negotiate again, try not to change both sides. This can only be done front-end, using regular expressions. But do you loop after the interface returns the list, or do you filter with WXS functions when binding templates? Obviously the latter is faster and more reasonable.

In fact, this order is added when a friend clicks the forward link to visit the detail page. This access is straightforward, but there is no way to retrieve cached data passed by other pages, so the page must be rendered with data returned by the interface in this scenario.

I don’t know if you’ve noticed, but this page has a lot of content, so better typography and layout is especially important, depending on your CSS skills. As for the picture, originally intended to do a lazy loading, did not expect the cloud service speed is very good, do not need at all. Jingdong cloud students a little “do not speak martial virtue”, here to give them a thumbs-up!!

Category pages

Below is the category page.

Categorization uses additional navigation in that TAB components and TAB content containers can work in both directions. It’s kind of like Android’s section-list.

This was a bit of a technical challenge, but I used vTabs, the official vertical TAB extension. However, this component is buggy. For example, sometimes when you click on a TAB, the current option will be misplaced. Some students in wechat open community have reported this problem, but I require that there is no continuous interval between the content, so the method of setting the fixed height of the option content is a bit far-fetched, right?

I followed the code, and the TAB component’s BindTabClick event handler mistakenly triggered the handleContentScroll event handler. Not only does this affect performance, the last thing you should do is evaluate the current option index differently between the two functions.

Another problem is that setting the initial value of active-tab doesn’t work. I didn’t modify it because it didn’t affect my requirements.

Obtaining Cloud Services

Background use jingdong Vientiane > API > life services > Recipe daquan cloud services, before running jingdong cloud to apply for an account. The cloud service is free, 1,000 times a day, and with the offline support described earlier, that’s enough. Of course, 2000, 3000 times a day is also a way, give me a thumbs-up I will tell you privately, ha ha ~~

Reference source

Cooking without worry business is relatively simple, without using WePY, MPvue and other small program framework, and without using UniApp, Taro and other multi-terminal tools to generate. These techniques are not too difficult, the key depends on how you choose. On the other hand, I was engaged in both product development and operation and maintenance in this project. Although it was hard work, I also gained a lot.

Want to further understand the small program code, you can refer to my Github source. Happy coding!