Front-end pit avoidance guide丨The app that has been hard-developed is judged to be a simple web page package?

The traditional hybrid mobile App development model usually uses WebView as the bridging layer. However, as the iOS and Android app store review policies become more and more stringent, they are sometimes mistakenly judged as simple web pages packaged into apps, and the shelves are easily rejected.

Since there may be risks, we can use other methods to render without using WebView, such as using the JavaScript cross-platform development framework avm.js launched by APICloud. The upgraded App engine does not rely on WebView and provides 100% native rendering. , Can help developers improve rendering efficiency and effects, while also supporting component development and providing reliable back-end support. In addition, avm.js is similar to Vue in syntax and is compatible with React JSX. The APICloud official website also provides a large number of cases and tutorials, with low learning costs, which is very suitable for developers to use quickly.

rendering efficiency is significantly

The picture on the left below is a list implemented using the Grid-View component of avm.js, and the picture on the right is a list implemented using WebView to render HTML pages. You can see the blue color through the GPU rendering mode analysis curve, and the green average line is much lower, indicating the measurement and The time required to draw the view list is greatly reduced.

Grid-View component code example:

<template>
    <grid-view id="gridView" class="main" column-count="3" aspect-ratio="1" inset="10" scroll-y enable-back-to-top onscrolltolower={this.onscrolltolower}>
        <cell class="cell" onclick={this.itemClick}>
            <text class="title">{item.title}</text>
        </cell>
        <list-footer class="footer">
            <text>加载中...</text>
        </list-footer>
    </grid-view></template><style>
    .main {
        width: 100%;
        height: 100%;
    }
    .cell {
        justify-content: center;
        align-items: center;
        background-color: #5cdfdc;
    }
    .title {
        font-weight: bold;
        color: #000;
    }
    .footer {
        justify-content: center;
        align-items: center;
        height: 44px;
    }</style><script>
    export default {
        name: 'test',
        methods:{
            apiready() {
                this.initData(false);
            },
            initData(loadMore) {
                var that = this;
                var skip = that.dataList?that.dataList.length:0;
                var dataList = [];
                for (var i=0;i<99;i++) {
                    dataList[i] = {
                        title: '项目' + (i + skip)
                    };
                    // 瀑布流效果
                    // dataList[i].itemHeight = Math.floor(200 + Math.random()*50);
                }
                var gridView = document.getElementById('gridView');
                if (loadMore) {
                    that.dataList = that.dataList.concat(dataList);
                    gridView.insert({
                        data: dataList
                    });
                } else {
                    that.dataList = dataList;
                    gridView.load({
                        data: dataList
                    });
                }
            },
            onscrolltolower() {
                this.initData(true);
            },
            itemClick(e) {
                api.alert({
                    msg: '点击了项：' + e.currentTarget.index
                });
            }
        }
    }</script>

component development

avm.js is rich in components and can be customized to develop components. Currently, it provides 31 system-level basic components, ACT multi-terminal framework component library and more than 120 multi-terminal components contributed by developers. For the development team, as the project continues to deepen, iterate, and optimize, accumulating its own component library is of great significance to meet the requirements of agile project delivery and rapid iterative maintenance.

Low learning cost, easy to

The syntax of the avm.js framework is similar to that of Vue and compatible with React JSX. If you are a user of Vue or React, it will be easier to use avm.js, and there is almost no learning cost. avm.js has data-driven features, write intuitive and concise code, can bind data sources to the application user interface, reduce logic complexity and development difficulty, and data changes will be automatically fed back to the user interface in real time.

• Use STML to define a component/page

STML components are compatible with the Vue Single File Component (SFC) specification, and use semantic HTML templates and object-oriented JS styles to define components or pages. STML is finally compiled into JS components/pages and rendered to different terminals.

<template>  
    <view class='header'>
        <text>{this.data.title}</text>
    </view>  </template>  <script>
    export default {  
        name: 'api-test',
        data(){
            return {
                title: 'Hello APP'
            }
        }
    }</script><style scoped>
    .header{
        height: 45px;
    }</style>

• Use JS to define a component/page

The JS component/page conforms to the Web Components specification, uses the define function for component definition, and uses the render function to render to the terminal.

avm.define('api-test', class extends Component {
    
    data = {
        title: 'Hello APP'
    }
    
    css(){
        return `.header {
            height: 45
        }`
    }
    
    render() {
        return (
            <view class='header'>
                <text>{this.data.title}</text>
            </view>
        );
    }});

case and video tutorial

For the purpose of improving development efficiency, the avm.js official page provides practical development training tutorials for apps and applets. A large number of templates and source codes for various industries and scenarios are free to use, which simplifies the development process while ensuring the app experience effect. Development efficiency.

ordering template front and back source source code tutorial
The "Ordering" project is an application for catering merchants to order dine-in orders for merchants. The main functions include browsing business homepage information, viewing recommended dishes, placing an order, taking meals, etc. functions. It can be applied to the dine-in order management of snacks and fast food catering merchants, and it can also be opened slightly to become a small e-commerce application such as a takeaway, a store, or a virtual service.

Education and training template
An education and training service app for this project. It provides functions such as online browsing of institution information, famous teacher style, and course reservation and ordering.
The template includes the front and back ends. The front-end code is developed using avm.js multi-end technology, which can be compiled into Android & iOS App and WeChat applets at the same time; the back-end uses APICloud data cloud 3.0 cloud function custom interface.

Apparel Mall Template
This template is an online clothing store type, and its main functions include product display, product search, shopping cart, order management, etc.
The template includes the front and back ends. The front-end code is developed using avm.js multi-end technology, which can be compiled into Android & iOS App and WeChat applets at the same time; the back-end uses APICloud data cloud 3.0 cloud function custom interface.

Group Mall Template Description
This template is a type of group shopping mall, and its main functions include product classification, product details, product search, group grouping, order management, etc.
The template includes the front and back ends. The front-end code is developed using avm.js multi-end technology, which can be compiled into Android & iOS App and WeChat applets at the same time; the back-end uses APICloud data cloud 3.0 cloud function custom interface.

Back-end development support

APICloud also provides a server-side development and operation and maintenance platform for users of avm.js, and Data Cloud 3.0 provides a complete set of solutions from back-end development, interface coordination to online operation and maintenance.

Developers don't need to worry about infrastructure such as databases and servers, and don't need to care about the construction of server test environment, data backup and service expansion and other work that has nothing to do with business, but only the logic itself. Through cloud engine, cloud database, cloud function, built-in model, and other functional modules, it is convenient for users to quickly realize common back-end functions. Quickly introduce commonly used third-party functions into your own projects through model library reuse, saving development time. At the same time, it has built-in functions such as back-end management and API debugging, which increase the flexibility of writing back-end services by yourself and facilitate the joint debugging and testing of front-end and back-end developers.

Data Cloud 3.0 can implement many common back-end scenarios, such as:

• A small program can store data on APICloud and implement its own business logic through a custom interface.
• A mobile app application can directly complete back-end work based on the capabilities provided by the cloud platform.
• A website can display data from APICloud, and the front end of the website can also be placed on the APICloud platform.
• Quickly develop the project to minimize viable products to verify the market.
• The rapid implementation of digital business within the enterprise.

Forum support

The APICloud official forum has an AVM discussion area. If you have any questions during the development process, you can go to the forum to search, or post to find experienced developers for discussion, and you can also get official technical support in time.

In general, using avm.js one technology stack can simultaneously develop Android & iOS native apps, applets and iOS light apps, and the multi-end rendering effects are unified. avm.js provides a programming experience that is closer to the original. It uses a simple model to separate the user interface, business logic and data model of the application. It is suitable for highly customized application development. Interested front-end partners can come and try~