Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Time:2022-11-24

In the previous article, we mainly learned how to introduce third-party SDKs into our iOS or Android applications. With the Introducing SDK article over, the series on getting started with application development comes to an end.

So today, we will start to learn how to develop small programs, and see how to write our own Hello World in small programs.

1. What is the FinClip applet

The WeChat mini-programs that we usually come into contact with the most may be WeChat mini-programs, such as WeChat bus codes, KFC self-service ordering, SF Express, Tencent documents and other mini-programs that are more commonly used by everyone. While it is small in size, ready to go after use, and has an experience comparable to that of a native app, it also provides great convenience for everyone’s life and work. This is because Mini Programs provide a simple and efficient application development framework, rich components and APIs to help developers develop services with native experience in Apps.

So what is the relationship between the FinClip applet and the WeChat applet? To put it simply, the FinClip applet is a technology platform similar to WeChat applets, compatible with WeChat applet syntax and common APIs, and can also provide App with the ability to build its own applet ecology. FinClip applet technology can integrate a set of self-owned applet platforms in your application, or publish self-developed applets on platforms that have integrated FinClip applets.

This article will serve as an introduction, from the perspective of a small program developer, to introduce the basic directory structure and usage syntax of a small program, and how to quickly develop and upload a simple small program on the FinClip platform. For more detailed components and API support, SDK integration methods, etc., please refer to the FinClip applet documentation center.

2. Application mini-program

First, visit the official website of the FinClip applet: https://www.finclip.com/, register and log in to the applet management background, enter the applet management → My applet → Add applet, and fill in the basic information such as the name of the applet After confirming the creation.

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

FinClip Home

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

3. Download the development tool FIDE

Visit this link, download and install the version of IDE corresponding to the current system

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

4. Display applet

After downloading and installing the IDE, open FIDE, add or create a local applet project, and the processes in FIDE are shown in the figure below:

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

FIDE Home

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Edit toggle to center

Screenshot of new applet

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Screenshots of various parts in FIDE

Before starting to edit the applet code, let’s get familiar with the various structures and configuration instructions of the applet.

1. Small program directory structure

This is the most basic directory structure of applets. All applet projects have this structure, and other content is constantly added to it.

|- app.json
|- app.js
|- pages
   |- index
      |- index.fxml
      |- index.js

This structure is divided into two layers: the top-level App script that describes the overall program, and the page script that describes each page.

2. Project configuration file app.json

The top-level app.json file is used for project-wide configuration and is valid for all pages.

There are several important properties in app.json:

Attributes type required describe
pages string[] Yes List of page paths
window Object no Global default window behavior
tabBar Object no Bottom/top tab bar behavior
debug boolean no Whether to enable debug mode, the default is off
subpackages Object[] no Subcontract structure configuration
usingComponents Object no Global custom component configuration

How to define these attributes? The sample code is as follows:

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle": "light", // drop-down loading style, only supports dark / light
    "navigationBarBackgroundColor": "#fff", // The color of the navigation bar
    "navigationBarTitleText": "Home", // The text of the navigation bar, which is empty by default.
    "navigationBarTextStyle": "black" // The text color of the navigation bar, only supports black (black) or white (white), the default is white.
  },
  "debug": true
}

3. The applet initialization file app.js

This file is used to initialize the entire applet.

The app.js file only needs to execute a function App({/parameter/}), the main parameters are as follows, all parameters are optional.

Attributes type describe trigger timing
onLaunch Function Life cycle callback – monitor applet initialization Triggered when the applet is initialized (only triggered once globally)
onShow Function Life cycle callback – monitor applet display Triggered when the applet starts, or enters the foreground display from the background
onHide Function Life cycle callback – monitor applet hidden Triggered when the applet enters the background from the foreground
onError Function error monitoring function Triggered when a script error occurs in the applet, or when the api call fails, it will bring an error message
onPageNotFound Function There is no listening function on the page Triggered when the page to be opened by the applet does not exist, the function will be called back with the page information
other not limited Developers are free to add any function or data to the Object parameter, which can be accessed with this

The sample code is as follows:

App({
  onLaunch() {
    // Show local storage capabilities
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  globalData: {
    userInfo: null
  }
})

4. Page file index.js

The page js file is responsible for initializing the page instance and configuring the behavior properties of the current page.

Similarly, the page js file only needs to execute a function Page({/parameter/}), the main parameters are as follows, all parameters are optional.

Attributes type describe
data Object The initial data of the page
onLoad Function Lifecycle callbacks – triggered when the page loads
onShow Function Life cycle callback – monitor page display
onReady Function Life cycle callback – monitor the completion of the initial rendering of the page
onHide Function Life cycle callback – monitor page hidden
onUnload Function Life cycle callback – monitor page unloading
onPullDownRefresh Function Executed when pull-down refresh is triggered
onReachBottom Function Executed when the page bottoms out
onShareAppMessage Function Forward
onPageScroll Function Handling function for page scroll trigger event
onTabItemTap Function When the current is a tab page, it is triggered when the tab is clicked
other Any Developers can add any function or data to the Object parameter, which can be accessed by using this in the functions on this page

The sample code is as follows:

Page({
  data: {
    motto: 'Hello World'
  },
  onLoad() {
    
  }
})

5. Page file index.fxml

The page fxml file is used to describe the page of the applet, similar to HTML language.

The sample code is as follows:

<view class="container">
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

The code above uses two tags:<view> and<text> .

<view>A tag represents a block, which is used to separate it from other blocks, similar to the HTML language<div> Label.<text> Represents a piece of inline text, similar to HTML language <span>tags, multiple</span><text> <span>No line breaks are generated between tags. The class set for each tag is also similar to the class in HTML.</span>

5. Preview applet

First we need to download the FinClip App, you can open the official website or scan the QR code below.

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Edit toggle to center

Add picture annotations, no more than 140 words (optional)

After the download is complete, use the FinClip developer account registered in the second step to log in to FIDE and FinClip App

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

At the same time, it supports account password or SMS login

Click the preview button to generate the QR code of the applet, and then use the FinClip App to scan the code to experience it.

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Click here for a preview

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

After opening the FinClip App, click on the upper right corner to scan the code to preview

6. Upload the applet

The process of uploading the applet is relatively simple. Click the upload button, select the applet ID created in the second step, and enter the version number and version description.

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Click the upload button at the top

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Enter the corresponding version number and release notes

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Finally, you will see a prompt that the upload was successful

At this time, enter the FinClip applet management background again, find the newly created applet, enter the details page, add a review version, and select the latest uploaded applet version to submit for review. After the review is passed, this version can be put on the shelves. Click to display the QR code of the online version to use the FinClip App to scan the code.

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Select the corresponding applet to view details

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Click here to add a review

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Select the corresponding applet version

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

After submitting, you will see a prompt to review the submission

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Approved, you can click here to put the version on the shelves

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

It will appear here after clicking on the shelf

7. Small program development tips

In the process of developing applets, there are still many tips that developers need to know, and we will also summarize them here.

1. How to open vconsole in FinClip App

Just add a field to the app.json of the applet: “debug”: true

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Just add it

2. How to use the Mini Program to customize API functions in FIDE

The custom API mainly has the following two usage scenarios:

  1. Custom API Debugging Mock
  2. Native API Mock called by H5

By default, the IDE will return Fail by default for the custom API: the API is not implemented, and some applet business processes may depend on the custom API.

Therefore, the IDE provides the API Mock mechanism for customers, and can customize the results returned by the SDK, so that these business processes can be passed through the IDE.

Basic usage

The entry is the Mock label in the debug panel in the lower right corner

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

Click Mock first and then click the plus sign

1. Example of using custom API rules in native applets

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

To customize the API, configure the FinClipConf.js file in the root directory of the applet as follows:

module.exports = {
  extApi:[
    { //Common interaction API
      name: 'customEvent', //Extended api name The api must be implemented by the Native side
      params: { //Expand the parameter format of api, you can only list the necessary attributes
        url: ''
      }
    }
  ]
}

Run ft.customEvent in the applet, you can get the mock result:

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

2. Example of using custom API rules in web-view

Nanny-level tutorial: write your own mobile applications and applets (Part 4)

After importing the bridging js-sdk file into the H5 page, you can call the registration method below.

Example of calling a registered method in HTML:

window.FinChatJSBridge.invoke('customEvent', {url:'getLocation'}, (result) => {
    console.log(result)
});

This tutorial explains the development and debugging of small programs based on FinClip, and the introduction of the entire process of uploading.

In the next article, we will talk about how to edit the CSS style of the Mini Program and related information about service calls, so stay tuned.