返回博客首页
← 所有文章

5个将你的NativeScript应用货币化的插件

2017年4月18日 — 作者:Rob Lauer

开发一个移动应用很有趣,但归根结底,你得赚钱。虽然我们很多人都是以收费的方式为客户开发应用,或者作为公司战略性移动计划的一部分,但仍然有一大批开发者独自创业,追求着“Flappy Bird 2.0”的梦想。

除了从应用商店收取每次下载的费用外,让我们看看如何使用各种NativeScript 插件轻松地将你的NativeScript应用货币化。

广告

我知道,我知道!没人喜欢广告!它们威胁着帮助毁掉移动网络,并且在某些移动应用中过于侵入性。但是,我想说的是,有一些方法可以显示嵌入式广告而不会影响用户体验。

例如,iOS上的Truecaller广告体验。

truecaller ads

广告非常醒目,但不会干扰你使用应用的任何部分。如果你对广告感兴趣,你就会点击它。

当然,在NativeScript上也可以通过使用NativeScript AdMob插件来实现相同的效果。

例如,要安装AdMob插件,你只需在你的NativeScript项目中执行tns plugin add nativescript-admob命令。然后创建横幅广告就像这段代码一样简单。

var admob = require("nativescript-admob");

admob.createBanner({
    // if this 'view' property is not set, the banner is overlayed on the current view
    // view: ..,
    testing: true, // set to false to get real banners
    size: size, // anything in admob.AD_SIZE, like admob.AD_SIZE.SMART_BANNER
    iosBannerId: "ca-app-pub-XXXXXX/YYYYYY", // add your own
    androidBannerId: "ca-app-pub-AAAAAAAA/BBBBBBB", // add your own
    // Android adds the connected device as test device with testing:true, iOS does not
    iosTestDeviceIds: ["yourTestDeviceUDIDs", "canBeAddedHere"],
    margins: {
        // if both are set, top wins
        //top: 10
        bottom: 50
    }
}).then(
    function() {
      console.log("admob createBanner done");
    },
    function(error) {
      console.log("admob createBanner error: " + error);
    }
)

你可以在这个可克隆的GitHub仓库中找到其他代码示例。

我们之前详细介绍过如何使用AdMob,Nic Raboy也提供了使用AdMob与纯JavaScript NativeScript应用以及Angular NativeScript应用结合使用的指南。

应用内购买

随着我们看到消费者越来越不愿支付一次性应用下载费用,我们也看到原生应用内购买平台的使用率有所增加。有什么比使用一个跨平台应用内购买插件更好地利用苹果和谷歌的原生平台呢!?

in-app purchase and billing

使用tns plugin add nativescript-purchase安装nativescript-purchase插件,在这个代码片段中你可以看到列出你作为应用内购买产品的一部分提供的“产品”有多么容易。

import { Product } from "nativescript-purchase/product";

purchase.getProducts().then((products: Array<Product>) => {
    products.forEach((product: Product) => {
        console.log(product.productIdentifier);
        console.log(product.localizedTitle);
        console.log(product.priceFormatted);
    });
});

...并购买一个产品:

if (purchase.canMakePayments()) {
    // NOTE: 'product' must be the same instance as the one returned from getProducts()
    purchase.buyProduct(product);
}

请务必查阅插件文档,了解如何完成应用内购买的示例。

收款

如果你有产品或功能要出售,另一种选择是直接与PayPal、MolPay或Stripe等在线支付提供商集成。

paypal logo

自90年代后期以来,在线支付的王者——PayPal,使得请求和接收付款变得非常容易。通过使用NativeScript的PayPal插件,你可以在你的NativeScript应用中添加PayPal体验。

创建PayPal购买再简单不过了。

function buyProduct(args) {
    // configure
    var payment = PayPal.newPayment()
        .setDescription('My product')
        .setAmount(59.79);

    // start checkout / payment
    payment.start(function(cbResult) {
        switch (cbResult.code) {
            case 0:
                // SUCCESS
                // pay key is stored in 'cbResult.key'
                break;
            case 1:
                // operation was CANCELLED
                break;
            case -1:
                // checkout FAILED
                break;
            case -2:
                // "unhandled exception"
                break;
        }
    });
}

请注意,在撰写本文时,PayPal插件仅适用于Android,但iOS实现正在积极开发中

stripe logo

在现有的(相对)较新的支付网关中,Stripe因其无与伦比的用户体验而受到许多人的喜爱。最近,发布了一个全新的Stripe NativeScript插件

此插件允许你使用<stripe:CreditCardView>元素将信用卡组件集成到你的NativeScript视图中。

或者,你可以直接使用Stripe的JavaScript API,因为它没有浏览器DOM依赖项。

molpay logo

东南亚的NativeScript开发者可能最熟悉MOLPay,这是一个快速增长的支付网关,可以轻松地接受来自多个国家和多种货币的付款。

NativeScript的MOLPay插件提供了一种简单的方式与MOLPay交互,并附有非常详细的文档。

总结

NativeScript插件生态系统每天都在发展壮大。有了这样的插件,你可以从收集虚拟内裤,到?,到盈利,只需瞬间!

特别感谢南方公园的小矮人给了我们所有人灵感 :)

south park underpant gnomes