Detailed explanation of simple examples of small program development

This article mainly introduces the relevant information about the simple example application of WeChat applet (application account). Friends in need can refer to

Demo preview

Demo video (traffic warning 2.64MB)

GitHub Repo address

Warehouse address: github.com/ zce/weapp-demo

Use steps

to clone the repository locally:

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

Open the WeChat Web opener tool (note: must be 0.9.092300 Version)

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

does not require so-called cracking. The so-called cracking on the Internet is only for the previous 0.9. Version 092100, the new official version does not need to be cracked, does not need to be cracked, does not need to be cracked!

Download link (official version, feel free to 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 the add item and fill in or select the corresponding information

AppID: Click No AppID in the lower right corner (I am not qualified, it is said that the 200 places this time were hand-picked by Xiaolong)

Project name: Fill it in casually, because it does not involve deployment, so it doesn’t matter
Project Directory: Select the folder you just cloned
Click to add the project

Happy New Year and Gong Xi Fa Cai

You can choose to code in the WeChat Web Opener Tool (you can also choose your favorite

editor)

1. Use the restart

button in the lower left corner to refresh the preview after encoding

2. Bash users can quickly create the files required for new components by executing the following command in the project directory:

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

The rest can be used freely

Basic tutorial on WeChat applet (continuous

update)

Create a project folder and create the basic required files

app.js

项目主入口文件（用于创建应用程序对象）

// App函数是一个全局函数，用于创建应用程序对象
App({
 // ========== 全局数据对象（整个应用程序共享） ==========
 globalData: { ... },

 // ========== 应用程序全局方法 ==========
 method1 (p1, p2) { ... },
 method2 (p1, p2) { ... },

 // ========== 生命周期方法 ==========
 // 应用程序启动时触发一次
 onLaunch () { ... },

 // 当应用程序进入前台显示状态时触发
 onShow () { ... },

 // 当应用程序进入后台状态时触发
 onHide () { ... }
})

app.json

Project configuration declaration file (specify some information of the project, such as

NavigationBar style color, etc.)

{
 // 当前程序是由哪些页面组成的（第一项默认为初始页面）
 // 所有使用到的组件或页面都必须在此体现
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
 "pages": [ ... ],
 // 应用程序窗口设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
 "window": { ... },
 // 应用导航栏设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
 "tabBar": { ... },
 // 网络超时设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
 "networkTimeout": {},
 // 是否在控制台输出调试信息
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
 "debug": true
}

app.wxss

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

Create page components

Each page component also It is divided into four files:

1. page-name.js

2. Page logic file, used to handle page life cycle control and data processing

3. To be continued...

4. page-name.json

5. Set the current page Some configurations at work

6. Here you can override the window settings in app.json

7. That is to say, you can only set the settings in the window Familiar

8. To be continued...

9. page-name.wxml

10. wxml refers to is Wei Xin Markup Language

12. used to define the structure of elements in the page. The syntax follows XML syntax. Note that it is XML syntax, not HTML. Syntax, not HTML syntax, not HTML syntax

13. To be continued...

14. page-name.wxss

15. wxml refers to Wei Xin Style Sheet

17. # syntax used to define page styles follows CSS syntax and extends Understand the basic usage and length units of CSS (mainly rpx responsive pixels)

[Related recommendations]

1.

WeChat applet complete source code download

2.

WeChat applet demo: imitating NetEase Cloud Music

The above is the detailed content of Detailed explanation of simple examples of small program development. For more information, please follow other related articles on the PHP Chinese website!