Developing mini program on Alipay

Being the pioneer in introducing mini program in year 2017, WeChat has been very successful in building an ecosystem of online services running within single app. With that being said, you no longer need to install that many apps in your phone as there’s been more than 1 million mini programs developed by various merchants serving your different needs.

Since then, many Chinese tech giants, including Alipay have decided to jump on the bandwagon and introduce mini program into their respective ecosystem. It’s reported that Alipay had more than 160,000 mini programs in 2019 and it’s still counting.

What is mini program?

A mini program is a “sub application” that lives within another app, like WeChat, Alipay, Baidu etc. There are various features and capabilities bundled in a mini program, including but not limited to:

• Payment
• Livestreaming
• Geolocation
• Notification
• And many more…

As such, users do not really need to leave this “super app” as it provides them an all-in-one experience. Some of the examples of mini programs are Starbucks and Watsons.

Starbucks mini program

Watson mini program

Developing Alipay mini program

As majority of the Chinese visitors use e-Wallets like Alipay to perform a transaction when they are abroad, many merchants have grabbed this opportunity to introduce their products or services in the form of mini program within Alipay ecosystem. So does my company.

I had the chance to experiment with mini program development process and I’d like to share the process with you guys and demo on building a simple mini program on movies using TMDB API.

Before we can start the development process, there is some preliminary preparation to be done:

1. Register an Alipay account at https://memberprod.alipay.com/account/reg/enterpriseIndex.htm
2. Login to mini program open platform at https://mini.open.alipay.com/channel/miniIndex.htm
3. Create mini program in the developer console
4. Install the mini program IDE which can be downloaded from https://opendocs.alipay.com/mini/ide/download

Let’s start development process!

File structure

Mini program can be broken down into two main layers: app and page. app is used to define the entire application whereas page is used to define individual page.

In app layer, there are 3 files:

• app.js — For the application logic
• app.json — Global application configuration
• app.acss (optional) — Global stylesheet

In page layer, there are 4 files:

• page.js — For the page logic
• page.axml — Page structure (similar to html)
• page.json (optional)— Page configuration
• page.acss (optional) — Page stylesheet

Adding mini-ali-ui dependency

We can add Alipay UI extension components library mini-ali-ui by running yarn add mini-ali-ui so that we can use them later on.

Building the index page

When we first create a project in the IDE, we will be greeted with index page pre-generated. The page comes with several lifecycle functions which you can refer on https://opendocs.alipay.com/mini/framework/page-detail.

In order to use extension components from mini-ali-ui (for example, <search-bar> in the index.axml), we have to specify the component in the page configuration file index.json. We can also create our own custom component and specify it in the same file.

{
  "usingComponents": {
    "search-bar": "mini-ali-ui/es/search-bar/index",
    "movie": "/components/movie/movie"
  }
}

In the index.js, what we are trying to do is to trigger API request to retrieve data of popular movies on load of the page. We can initialise the data as shown below.

data: {    
  searchInput: '',    
  nowPlayingMovies: [],    
  popularMovies: [],    
  upcomingMovies: []  
},

To modify the data, we cannot change the data by simply writing this.data.searchInput = "New Input" as this will not change the state of the data. The correct way is via this.setData({searchInput: "New Input"}). This will send the data from the logical layer .js to view layer .axml.

We can also define our own function on the logic layer. As shown above, I have created functions like onGetPopularMovies, onGetNowPlayingMovies and onGetUpcomingMovies and trigger them in the lifecycle function onShow in the page. Upon retrieving the movies data from the API, this.setData({}) function is called to store the data in the state.

We have also created a search bar at the top of the page. The component does come with several functions which we can utilise. For example, onSubmit will trigger the handleSubmit function that we declare. In the handleSubmit function, it will get the searchInput data and navigate to the search page by passing the search keywords. Note that my.navigateTo is a built in mini program function.

handleSubmit() {
  const search = this.data.searchInput;
  my.navigateTo({ 
    url: '/pages/search/search?query=' + search
  });
}

To get the query keyword that is passed in via the url, we can get it in onLoad function as such:

onLoad(query) {
  // 页面加载
  console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
}

Note that in order to add new page, we have to define them in the app.json as such:

{
  "pages": [
    "pages/index/index",
    "pages/search/search"
  ]
}

Movie mini program

For the entire source code, you can refer to this GitHub repository.

Post-development process

After the mini program development process is completed, we can upload it by clicking the upload button on top right of the IDE. Do remember that you need to login into your Alipay account and associate to the mini program that you created in the Alipay developer console before you can upload it.

Upload mini program

Once uploaded, we need to send it for Alipay review in the developer console before it can be officially released.

Notes

1. There is a list of mini program API (refer https://opendocs.alipay.com/mini/api) and some of the API require you to add the ability on the developer console.

Ability list on Alipay developer console

2. It is required to whitelist the backend server domain which we trigger our API request.

3. For webview, we need to add the domain in the developer console and add a verification file to the root directory of the domain.

Related resources

Official documentation: https://opendocs.alipay.com/mini/006kyi

UI component library: https://github.com/Alibaba-mp/mini-ali-ui

GitHub source code: https://github.com/wilsontwm/movie-alipay-mini-program/tree/main