Detailed analysis of WeChat mini program introductory tutorial + case

This time I will bring you a detailed analysis of the WeChat Mini Program Getting Started Tutorial case. What are the precautions for getting started with the WeChat Mini Program? The following is a practical case, let’s take a look.

In fact, I think the mini program is to arrange and combine the 20 basic components officially provided by WeChat (there are currently 26), and then add some css styles to provide feedback on the user's operations (adjusting the official components provided by WeChat 60 APIs). 26 basic components and 60 open APIs = it can be done in half a day, right? (Half a day is enough to follow the tutorial below carefully)

How to learn?

1. You must have development tools, right?

Here is the latest version download link (portal)—>The latest version download address of WeChat web developer tools

Currently, WeChat applet development tools no longer require cracking, you just need to Use the mobile phone WeChat scan to log in to the development tool, and select No APPID when creating an application to develop.

2. Do you need development documents?

Many people may think that you need to get used to watching videos (CSDN Academy’s WeChat mini program practical video), but I suggest you don’t watch videos when learning new things. The best way to get started is to read official documents (anyone else) They know their own stuff better than the official themselves!), the following is the official website address:

WeChat Mini Program Official Documentation (Portal)

Of course, it is recommended to read the W3CSchool compilation here The documentation is relatively clear. (Another portal)

3. Now that you’ve learned the basics, let’s do some practical combat

After learning something, the best way is to put it into practice. Now let’s go into practical combat "WeChat" If you can follow the whole process of making the Mini Program: Bai Si Bu Qi Qi Si (Simplified Version), then you have successfully started.

Look at the renderings first

It shows that the IDEA of this project was borrowed from this big brother, thank you for this big brother

Look at it later Look at the screenshots of the project

# I won’t post the specific code here. I package the entire project and download it directly for use (click here to download the DEMO).

The icons I use are all downloaded from Alibaba’s iconfont (if you didn’t know it before, it’s a huge benefit, you’ll know it after you use it).

4. The project is not enough?

If you feel that the above practical exercises are not enough to stimulate your potential, then here are a few IDEAs that I found during my study. I hope they will be helpful to you.

1), Calculator
https://github.com/dunizb/wxapp-sCalc

2), Douban Books
http://www.jianshu.com/p/c35084200470

3), Mobile Mall
https://github.com/liuxuanqiang/wechat-weapp- mall

4), weather
http://swiftcafe.io/2016/10/03/wx-weather-app/

5 ), air quality query
http://blog.csdn.net/yulianlin/article/details/52692066

6), github client
https ://blog.zhengxiaowai.cc/post/weapp-demo.html

7), Zhihu Daily
http://www.apkbus.com/forum.php ?mod=viewthread&tid=268626&extra=page=1&filter=sortid&sortid=12

---

Finally

Thanks to the authors of the demo mentioned above, let’s make progress together...

WeChat Mini program introductory tutorial case demo

Respect the originality, please indicate the source when reprinting: View the original text for more surprises http://blog.csdn.net/qq137722697

---

First of all, put a good posture, - WeChat applet development is just that. All you need is a little bit of css (really just a little bit) basics.

Understand the development of WeChat mini programs

In fact, I think the mini program is to arrange and combine the 20 basic components officially provided by WeChat (currently there are 26), and then add some css style to provide feedback on user operations (adjust 60 APIs officially provided by WeChat). 26 basic components and 60 open APIs = it can be done in half a day, right? (Half a day is enough to follow the tutorial below carefully)

How to learn?

1. You must have development tools, right?

Here is the latest version download link (portal)—>The latest version download address of WeChat web developer tools

Currently, WeChat applet development tools no longer require cracking, you just need to Use the mobile phone WeChat scan to log in to the development tool, and select No APPID when creating an application to develop.

2. Do you need development documents?

Many people may think that you need to get used to watching videos (CSDN Academy’s WeChat mini program practical video), but I suggest you don’t watch videos when learning new things. The best way to get started is to read official documents (anyone else) They know their own stuff better than the official themselves!), the following is the official website address:

WeChat Mini Program Official Documentation (Portal)

Of course, it is recommended to read the W3CSchool compilation here The documentation is relatively clear. (Another portal)

3. Now that you’ve learned the basics, let’s do some practical combat

After learning something, the best way is to put it into practice. Now let’s go into practical combat "WeChat" If you can follow the whole process of making the Mini Program: Bai Si Bu Qi Qi Si (Simplified Version), then you have successfully started.

Look at the renderings first

It shows that the IDEA of this project was borrowed from this big brother, thank you for this big brother

Look at it later Look at the screenshots of the project

# I won’t post the specific code here. I package the entire project and download it directly for use (click here to download the DEMO).

The icons I use are all downloaded from Alibaba’s iconfont (if you didn’t know it before, it’s a huge benefit, you’ll know it after you use it).

4. The project is not enough?

If you feel that the above practical exercises are not enough to stimulate your potential, then here are a few IDEAs that I found during my study. I hope they will be helpful to you.

1), Calculator
https://github.com/dunizb/wxapp-sCalc

2), Douban Books
http://www.jianshu.com/p/c35084200470

3), Mobile Mall
https://github.com/liuxuanqiang/wechat-weapp- mall

4), weather
http://swiftcafe.io/2016/10/03/wx-weather-app/

5 ), air quality query
http://blog.csdn.net/yulianlin/article/details/52692066

6), github client
https ://blog.zhengxiaowai.cc/post/weapp-demo.html

7), Zhihu Daily
http://www.apkbus.com/forum.php ?mod=viewthread&tid=268626&extra=page=1&filter=sortid&sortid=12

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps for MD5 encryption of data through node.js

How to operate Vue to make Amap builds real-time bus application

The above is the detailed content of Detailed analysis of WeChat mini program introductory tutorial + case. For more information, please follow other related articles on the PHP Chinese website!