Vodacom/VodaPay Mini Program - Part 3: Hello World
The aim of this post is to provide a step-by-step guide for anyone who is interested in MiniPrograms and wants to get a quick start.
In this post, we get started with a simple "Hello World" application to get a bit more familiar with MiniProgram application development. To start, you will need to download and install the MiniProgram IDE from the VodaPay Portal Resources.
Once installed, launch it. You will see a screen similar to the one below.
Click on + to start a new project.
If for some reason, you don't see VodaPay as an option and can't click the Next button on the wizard, try closing the IDE and re-opening. I had that problem on my first load.
Now, click on Blank and then Next.
Give your project a name - note that it creates a folder on your local machine. Hit Next.
You should now see a screen similar to the following:
If this looks familiar, it is! Appears that the MiniProgram IDE uses Visual Studio Code. From using VS Code for the last few years now, this is a great and reliable editor.
Simply, an Application consists of Pages - as shown in the following diagram:
So, lets understand the files following in a bit more detail. Lets discuss the files required at an Application level.
| File | Description |
|---|---|
| \app.js | Code you will write at an Application/Global level. There are some great events which can be attached to to initialise/configure your App. |
| \app.json | This is used to hold configuration information - such as loading other components/libraries. |
| \app.acss | This is used to style how elements in the view are displayed. |
Lets review the files at a Page level. Note, there will be folders and files for each page you create.
| File | Description |
|---|---|
| \index | This is the folder which contains the resources for a page |
| \index\index.axml | This is the view for your app. Think of it like HTML or what the user will see. |
| \index\index.js | Where you write the code that will handle events/requests from the view. |
| \index\index.json | This is used to hold configuration information - such as loading other components/libraries. |
If you click around, you'll see that the index.js file already has some code in. Don't worry - if it looks like Chinese to you, it is!
Now, click on index.axml. You will note that the text
this is a blank page
appears in the Simulator on the right. A cool feature is that any updates you make to the view reflect (almost) immediately. As you will note from the image below, I've added in hello world and it shows up in the Simulator.
Congratulations! You've achieved quite a bit:
- Got the MiniProgram IDE up and running
- Started a new project
- Have an understanding of the components - Application and Pages
- Hopefully have a slightly better understanding of what the files do
- Got Hello world on the screen
Let me know if this helps. In the next tutorial, we will work on adding in a button and code to handle it.
