WeChat mini-app (app number) simple example application and instance details, mini-app details

Simple instance application and instance details for applets (application numbers)

Demo Preview

Demo Video (Traffic Warning 2.64 MB)

GitHub Repo address

Repository address: https://github.com/zce/weapp-demo

Procedure

Clone the repository to a local machine:

Bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban -- depth 1 $ cd weapp-douban

Open the Web opener tool (Note: It must be 0.9.092300)

It must be version 0.9.092300. The previous version cannot guarantee normal operation.

No such cracking is required. The so-called cracking on the Internet is only for the previous version 0.9.092100. The new official version does not need to be cracked. No such cracking is required!

Download link (official version, rest assured download): https://pan.baidu.com/s/1qYld6Vi

Wechat_web_devtools_0.9.092300_x64.exe (Windows 64-bit)
Wechat_web_devtools_0.9.092300_ia32.exe (Windows 32-bit)
Wechat_web_devtools_0.9.092300.dmg (macOS)

1. Select Add project, enter or select the corresponding information

AppID: click "No AppID" in the lower right corner. (I am not qualified either. It is said that the 200 places are selected by Xiao Long)
Project name: Enter the project name as required. It does not matter because deployment is not involved.
Project Directory: select the cloned folder
Click Add Project

Happy New Year and fortune

You can select encoding in Web openers (or your favorite editor)

1. Click the restart button in the lower left corner to refresh the preview After encoding.

2. Bash users can execute the following command in the project directory to quickly create the files required for the new component:

Bash $./generate page <new-page-name> # or $./generate component <new-component-name>

The rest can be used freely.

Basic mini-program tutorial (continuous update)

Create a project folder and create basic files

App. js

The main project portal file (used to create an Application Object) // The App function is a global function, used to create an Application Object App ({// =========== global data object (shared by the entire application) =========== globalData :{...}, // ============ global method of the application ========== method1 (p1, p2 ){...}, method2 (p1, p2 ){...}, // ============= life cycle method ================/// onLaunch () triggered once when the application starts () {...}, // when the application enters the front-end display status, onShow () {...} is triggered (){...}, // onHide () {...} is triggered when the application enters the background state (){...}})

App. json

Project configuration declaration file (specify the project information, such as the navigation bar style color)

{// The page on which the current program is composed (the first default is the initial Page) // all components or pages used must be presented here // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages "pages ": [...], // application window settings // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window "window ":{...}, // apply navigation bar settings // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar "tabBar ":{...}, // network timeout settings // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout "networkTimeout": {}, // whether to output debugging information in the console // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug "debug": true}

App. wxss

[! Optional.] The global style file of the project follows the CSS standard syntax.

Create page Components

Each page component consists of four files:

1. Page-name.js
2. Page logical file, used to process page lifecycle Control and Data Processing
3. To be continued...
4. Page-name.json
5. Configure the current page
6. The window settings in app. json can be overwritten here.
7. That is to say, you can only set the familiarity set in the window.
8. To be continued...
9. Page-name.wxml
10. Wxml refers to Wei Xin Markup Language
11. Used to define the element structure in the page
12. The syntax follows the XML syntax. Note that it is an XML syntax, not an HTML syntax, not an HTML syntax.
13. To be continued...
14. Page-name.wxss
15. Wxml refers to Wei Xin Style Sheet
16. Used to define the Page Style
17. The syntax follows the CSS syntax and extends the basic CSS usage and length units (mainly rpx response pixels)

Through this article, we hope to help you learn how to develop small programs. Thank you for your support for this site!