1.2.0 • Published 3 years ago

cn-luka-ikeaapp-jssdk v1.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

ikeaapp js sdk for shoppable app&miniprogram

简介

这是一个 JavaScript SDK，给第三方H5页面或者小程序集成使用，与shoppable app和miniprogram 进行交互。

安装和引用

如果你是浏览器环境

<script src="https://res-qa.app.ikea.cn/static/public/jssdk/cn-ikeaapp-js-sdk-0.0.2.min.js"></script>

注意：暂未上传到npm仓库，所以暂时不能用以下功能

通过npm下载安装代码

$ npm install --save ikeaapp-js-sdk

如果你是webpack等环境

import ikeaapp from 'ikeaapp-js-sdk';

如果你是requirejs环境

requirejs(['node_modules/ikeaapp-js-sdk/dist/ikeaapp-js-sdk-0.0.1.js'], function (ikeaapp) {
    // xxx
})

初始化

// isDebug: debug环境下，使用测试环境，会输出相关log，默认为false
ikeaapp.init({
  isDebug: true
})

API - for web

如果你是在web页面集成该sdk, 则使用ikeaapp.web.*

用户状态 ikeaapp.web.user

  • 获取登录状态
ikeaapp.web.user.isLogin()

路由 - 用于打开小程序/APP公共组件 ikeaapp.web.router

  • 打开登录组件
ikeaapp.web.router.openLogin()
  • 打开客服
ikeaapp.web.router.openCSC()

server api - ikeaapp.web.api

  • 将一套设计方案加入收藏夹
    class DesignPlanModel {
    	// source, id, title, description, thumbnail, link
    	constructor(model) {
    		/**
    		 * design group, eg. PAX
    		 * @type {string}
    		 */
    		this.group = model.group;
    		/**
    		 * the unique id of this plan in this group
    		 * @type {string}
    		 */
    		this.id = model.id;
    		/**
    		 * plan title
    		 * @type {string}
    		 */
    		this.title = model.title;
    		/**
    		 * plan description
    		 * @type {string}
    		 */
    		this.description = model.description;
    		/**
    		 * plan thumbnail url
    		 * @type {string}
    		 */
    		this.thumbnail = model.thumbnail;
    		/**
    		 * h5 link of plan detail
    		 * @type {string}
    		 */
    		this.link = model.link;
    	}
    }

    ikeaapp.web.api.addDesignPlanToFav({
      group: 'PAX', 
      id: '111', 
      title: '我的PAX方案', 
      description: '客厅', 
      thumbnail: 'http://res-qa.app.ikea.cn/static/public/sub_catalog/bm001/bm003/thumbnail.png', 
      link: 'https://res-qa.app.ikea.cn/page/app_download.html'}).then((result) => {  
        console.log(result)
        }).catch(err => {
        console.log(err)
    });

注意：group和id是用来确定这个方案的唯一性的，通过group和id，能查到这个方案收藏的状态

注意：link为原始h5的url，建议不要用location.href，因为在扫码进小程序的时候， 会在原始url后面拼上各种参数，但是这些是不需要保存的，所以，只需传原始url

  • 获取某设计方案的收藏状态
    /**
     * get the state of one design plan in favorite list
     * @param group
     * @param id
     * @return {Promise<Object>}
     */
    getDesignPlanFavState(group, id);
    
    ikeaapp.web.api.getDesignPlanFavState('PAX', '333').then((result) => {
        console.log(result.favoriteFurniture)
    }).catch(err => {
        console.log(err)
    });
  • 将某设计方案从收藏夹移出
/**
 * remove one design plan from favorite list
 * @param group
 * @param id
 * @return {Promise<Object>}
 */
removeDesignPlanFromFav(group, id);

ikeaapp.web.api.removeDesignPlanFromFav('PAX', '111').then((result) => {
    console.log(result)
}).catch(err => {
    console.log(err)
});
  • 将一件商品加入收藏夹
    /**
    * add one product to my favorite list
    * @param productId - product id
    * @param productTyp - product type
    * @return {Promise<unknown>}
    */
    addProductToFav(productId, productTyp);

    ikeaapp.web.api.addProductToFav("20315933", "ART").then(result => {
        console.log(result)
    }).catch(err => {
        console.log(err)
    })
  • 创建可分享的心愿单
class WishListRecommendModel {
	constructor(model) {
		/**
		 * Wish list name
		 * @type {string}
		 */
		this.name = model.name;
		/**
		 * Fixed channel assigned to your group
         * now is only 'AI_DESIGN'
		 * @type {string}
		 */
		this.channel = model.channel;
		/**
		 * product list, including productId and productType
		 * @type {Array}
		 */
		this.products = model.products;
	}
}

ikeaapp.web.api.createWishListRecommendation({
    "name": "客厅场景",
    "channel": 'AI_DESIGN',
    "products": [
        {
            "productId": "60365803",
            "productType": "ART"
        },
        {
            "productId": "09216755",
            "productType": "SPR"
        }
    ]
}).then(res => {
    console.log(res.productListId);
}).catch(err => {
    console.log(err);
})
  • 获取某件商品的详细信息
    /**
	 * get product detail info
	 * @param id - product id
	 * @param type - product type
	 * @return {Promise<Object>}
	 */
	getProductInfo(id, type)

    ikeaapp.web.api.getProductInfo('00466391', 'ART').then(res => {
        console.log(res)
    })

推广相关 - ikeaapp.web.promotion

  • 生成普通二维码链接

    该接口主要用于扫码之后，在小程序/app打开的H5页面

class GIOConfig {

  constructor(config) {
    /**
     * 广告来源
     * @type {string}
     */
    this.utm_source = config.utm_source;
    /**
     * 广告媒介
     * @type {string}
     */
    this.utm_medium = config.utm_medium;
    /**
     * 广告名称
     * @type {string}
     */
    this.utm_campaign = config.utm_campaign;
    /**
     * 广告内容
     * @type {string}
     */
    this.utm_content = config.utm_content;
    /**
     * 广告关键词
     * @type {string}
     */
    this.utm_term = config.utm_term;
  }
}

ikeaapp.web.promotion.generateQRCodeLink('https://res-qa.app.ikea.cn/page/sdk_demo.html', {
    utm_source: "test",
    utm_campaign: 'test',
    utm_content: 'test',
    utm_medium: 'test',
    utm_term: 'test'
});
  • 生成用来可分享的心愿单的微信太阳码
/**
 * generate a QR code for miniprogram
 * @param productListId which is created by api.createWishListRecommendation
 * @param utm_source
 * @return {Object}
 */
generateMPQRCodeImageForWishList(productListId, utm_source);

ikeaapp.web.api.createWishListRecommendation({
    "name": "客厅场景",
    "channel": 'AI_DESIGN',
    "products": [
        {
            "productId": "60365803",
            "productType": "ART"
        },
        {
            "productId": "09216755",
            "productType": "SPR"
        }
    ]
}).then(res => {
    console.log(res.productListId);
    var container = document.getElementById('container');
    var imgElem = document.createElement('img');
    container.appendChild(imgElem);
    imgElem.src = ikeaapp.web.promotion.generateMPQRCodeImageForWishList(res.productListId, 'AT_DESIGN');
}).catch(err => {
    console.log(err);
})

注意：由于生成微信太阳码参数长度有32位的限制，所以如果超出32位，则会返回20001(ERROR_MP_QR_CODE_PARAMS_TOO_LONG)的错误

如果超出长度，建议用 generateQRCodeLinkForWishList

注意：调用分钟频率受限(5000次/分钟)，如需大量小程序码，建议预生成

  • 生成用来可分享的心愿单的普通二维码
/**
 * generate a normal QR code
 * @param productListId which is created by api.createWishListRecommendation
 * @param GIOConfig
 * @return {String}
 */
generateQRCodeLinkForWishList(productListId, {
  utm_source: "test",
  utm_campaign: 'test',
  utm_content: 'test',
  utm_medium: 'test',
  utm_term: 'test'
});

ikeaapp.web.api.createWishListRecommendation({
    "name": "客厅场景",
    "channel": 'AI_DESIGN',
    "products": [
        {
            "productId": "60365803",
            "productType": "ART"
        },
        {
            "productId": "09216755",
            "productType": "SPR"
        }
    ]
}).then(res => {
    let link = ikeaapp.web.promotion.generateQRCodeLinkForWishList(res.productListId, {
        utm_source: "test",
        utm_campaign: 'test',
        utm_content: 'test',
        utm_medium: 'test',
        utm_term: 'test'
    })
    console.log(link)
// https://res-qa.app.ikea.cn/page/qr.html?utm_source=test&utm_medium=test&utm_campaign=test&utm_source=test&utm_source=test&url=https%3A%2F%2Fikeaapp%2Fpublic_wishlist%3Fid%3D61510267566915584
}).catch(err => {
    console.log(err);
})
  • 生成可跳转pip页面的link，该link可用于生成二维码
    /**
	 * generate a QRCode link for product information page
	 * @param id
	 * @param type
	 * @param gioConfig
	 * @return {string}
	 */
	generateQRCodeLinkForPip(id, type, gioConfig)

    url = ikeaapp.web.promotion.generateQRCodeLinkForPip('60365803', 'ART', {
        utm_source: "test",
        utm_campaign: 'test',
        utm_content: 'test',
        utm_medium: 'test',
        utm_term: 'test'
    })
    console.log(`pip: ${url}`)
  • 生成可跳转搜索结果列表页面的link，该link可用于生成二维码
    /**
     * generate a QRCode link for search result page
     * @param keyword
     * @param gioConfig
     * @return {string}
     */
    generateQRCodeLinkForSearchKeyword(keyword, gioConfig)

    url = ikeaapp.web.promotion.generateQRCodeLinkForSearchKeyword('沙发', {
        utm_source: 'test'
    })
    console.log(`search: ${url}`)

工具类 - ikeaapp.tools

  • 获取当前平台
/**
 * get current system: ikeaapp or miniProgram
 * @return {string}
 */
getCurrentPlatform();

ikeaapp.tools.getCurrentPlatform();

错误码列表

variableerror codedescription
RESULT_OK0result executed successfully
ERROR_UNKNOWN-1error unknown
ERROR_PARAMS_INVALID1input params are invalid
ERROR_NEED_LOGIN2this api need login
ERROR_LOGIN_EXPIRED3login info is expired
---
ERROR_FAV_ALREADY_EXITS10001this already exits in favorite list
---
ERROR_MP_QR_CODE_PARAMS_TOO_LONG4params too long when generating miniprogram QR code

API - for miniprogram

如果你是在小程序页面集成该sdk, 则使用ikeaapp.wxmp.*

引用

import ikeaapp from './utils/cn-ikeaapp-js-sdk-wxmp.esm.js'

路由 - 用于打开小程序 ikeaapp.wxmp.router

  • 打开购物车Tab页面
/**
	 * open shopping bag tab in homepage
	 * if productList is not empty, they will be add into shopping bag
	 * @param {Array} productList
	 * @param {Object} gioConfig
	 */
	openShoppingBagTab(productList, gioConfig);

      ikeaapp.wxmp.router.openShoppingBagTab([{
        productId: "00390952",
        quantity: 1
      }, {
          productId: "00434319",
          quantity: 1
        }], {
          utm_source: "test",
          utm_campaign: 'test',
          utm_content: 'test',
          utm_medium: 'test',
          utm_term: 'test'
        });

变更日志

0.0.1 / 2020-6-7

  • init
  • login component: isLogin/openLogin
  • fav component:addDesignPlanToFav/addProductToFav
  • service: openCSC
  • promotion: generateQRCodeLink

计划列表

  • 丰富初始化设置，增加UI设置
  • 丰富错误码
  • 丰富与原生组件交互能力

业务流程图

PAX&Besta

avatar

@babel/runtimeali-osssemveruser-homeweixin-js-sdkchalkcommandersimple-gitstringify-objectorarimrafhandlebars
@everything-registry/sub-chunk-1345@infinitebrahmanuniverse/nolb-cn
1.2.0

3 years ago

1.1.0

3 years ago

1.0.6

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.0

3 years ago