WeChat applet (application account) simple application

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: https:// 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: required It is version 0.9.092300)

Must be version 0.9.092300, the previous version cannot guarantee normal operation

No need for so-called cracking, 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, 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. Via the lower left Click the restart button to refresh the preview after coding

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

bash $ ./generate page b9e4be1b57a991cb91d8b77b937d27d5 # or $ ./generate component 2f3eb1b254cd5675086680703ba9a9cc

The rest can be used freely

Basic WeChat applet Tutorial (continuously updated)

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 navigation bar 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!] Project global style file, the content follows CSS standard syntax

Create page components

Each page The component is also 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. Settings Some configurations when the current page is working

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

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

8. To be continued...

9. page-name.wxml

10. wxml refers to Wei Xin Markup Language

12. #The syntax used to define the structure of elements in the page 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. #The syntax used to define the page style follows CSS syntax , expanded the basic usage of CSS and length units (mainly rpx responsive pixels)

The above is the entire content of this article, I hope it will be helpful to everyone's learning, please check for more related content Follow PHP Chinese website!

Related recommendations:

How to use the three-level linkage selector of WeChat Mini Program

WeChat Mini Program LOL Introduction to the development of heroes

The design code of the password input box in the WeChat applet

The above is the detailed content of WeChat applet (application account) simple application. For more information, please follow other related articles on the PHP Chinese website!