We all know that WeChat mini-programs have been popular for a long time, but it should be said that now is the most popular time. After all, a long time ago, if you wanted to write a mini-program Hello World and let others see it, you need a company Identity registration (also available for individual industrial and commercial households) has many restrictions, which discourage many individuals.
Today (the specific date is no longer elegant), you can register yourself, so let's write our own Hello World.
Step 1: Register
On the home page of the official website of the WeChat public platform, click Register. (Relevant documents can be found, and I will not repeat them here, I hope you forgive me.)
The interface after the WeChat applet is successfully registered
Step 2: Editor, Development Tools
We assume that you have already applied for registration of the WeChat applet, and we have selected an editor for code development.
Here, I recommend: Sublime Text or Visual Studio Code.
Then download the WeChat developer tool (current latest version: 0.17.172600) The interface is as follows:
Schematic diagram of WeChat developer tools
If you often use Chrome, is it very similar? Open the debugging tool (F12) in Chrome, switch to mobile phone mode, and adjust the direction of the debugging tool to the right side.
Step 3: Write the code
We open an empty directory with Sublime Text, and then create three new files: app.js, app.json, app.wxss.
These three files are required, the names are fixed, and the app represents the entire applet, so we can see their importance from the names.
As for the file extension, let me explain it first: .wxss means css, .wxml means html, and .json means configuration information. In this way, you will know that the three files (html, css, js) we usually develop a web page are It is stipulated otherwise, you just have to remember it, this is the rule.
1、app.js
WeChat applet app.js
Here, we only write an empty App ({}), which is the prescribed syntax. You can also go to the WeChat applet development documentation for detailed instructions.
2、app.json
WeChat applet app.json
Most of this is fixed, you only need to change the configuration information, for this article, you need to specify hello.js (without extension).
3、app.wxss
WeChat applet app.wxss
这是全局的css样式定义，和你之前定义的main.css，让整个网站都用的公共样式一样。
4、hello.js
我们新建一个pages文件夹，让所有的页面都在此管理，接着新建hello.js文件，如下：
微信小程序hello.js文件
Page({})这是固定的格式， data也是固定的，表示静态数据用的，这里，我们定义message变量。
5、hello.wxml
微信小程序hello.wxml文件
这里的view是一个容器，类似我们经常写的div。然后模板引用数据{{变量}}，上个文件，我们定义的变量在这里使用。
6、hello.wxss
微信小程序hello.wxss文件
定义了2个css类样式，供上一个文件的标签class属性使用。
第四步：调试预览，上传
把之前安装的微信开发者工具，打开，创建项目，指定我们的代码目录，就可以预览（需要微信验证登录）。这一部分，不细说了，官方的开发文档上有详细的说明。
调试预览的效果，就如上边编辑器的图片那样的。
关于上传的，微信开发者工具，就可以上传， 但是，因为本文太简单，即便上传了，也不太会审核通过的。