@[TOC](事隔3年，升級(jí)了新版的LeanCloud SDK)

模擬器正常，真機(jī)不能顯示商品信息，如價(jià)格圖片

這個(gè)問題之前在2018年年中，使用在bmob的js sdk時(shí)，也有遇到，因?yàn)槭俏⑿派?jí)了導(dǎo)致的能獲取到條數(shù)，但是就是不能渲染除了createdAt等元數(shù)據(jù)以外的字段。

當(dāng)時(shí)的解決方法是自己寫了一個(gè)utils類，將結(jié)果數(shù)組遍歷了一番，然后再丟給wxml去渲染，當(dāng)然到前一陣子，將bmob的sdk也升級(jí)到v2.0以上，所以這問題消失也無影無蹤了，同理，leancloud這里，也是時(shí)候升級(jí)一下sdk了。

引入類庫

使用npm命令安裝庫，npm install leancloud-storage --save然后工程設(shè)置中啟用使用npm模塊

在這里插入圖片描述

調(diào)試基礎(chǔ)庫

報(bào)錯(cuò)core-js/promise未定義

core-js/promise

沒出這個(gè)坑，然后老老實(shí)實(shí)用回引入.js文件的方式來解決

下載2個(gè)js文件，https://cdn.jsdelivr.net/npm/leancloud-storage@4.6.1/dist/av-core-min.js，https://cdn.jsdelivr.net/npm/@leancloud/platform-adapters-weapp@1.2.0/lib/index.js

如果不想下載2次文件，可以使用這個(gè)集成好了的js，這樣，js代碼中引入也只需要使用一次，https://cdn.jsdelivr.net/npm/leancloud-storage@4.6.1/dist/av-weapp-min.js

下面是這3種引入方式的具體代碼

// 舊sdk
// const AV = require('../../utils/av-weapp.js')

// npm 引入方式，未成功
// const AV = require('leancloud-storage')

// 集成為1個(gè)文件的方式引入
const AV = require('../../utils/av-weapp-min.js')

// 官方文檔的引入方式
// const AV = require('../../libs/av-core-min.js')
// const adapters = require('../../libs/leancloud-adapters-weapp.js')
// AV.setAdapters(adapters)

初始化

調(diào)用init方法來初始化

CN區(qū)域初始化

原來是初始化方法變了，要傳入域名作為初始化必要參數(shù)

AV.init({
  appId: "a1b2c3-gzGzoHsz",
  appKey: "XG4FRumcdemNkFIral0ttvj",
  serverURL: "https://please-replace-with-your-customized.domain.com"
});

那么自然是要在leancloud與域名解析兩邊做好關(guān)聯(lián)

方式一 自定義域名與別名解析

leancloud后臺(tái)解析域名

cname指向

域名cname解析

報(bào)錯(cuò)服務(wù)器證書無效

需要證書提交

所以還需要云申請(qǐng)https證書，那么就有了第二種方式，暫時(shí)用leancloud提供的域名

方式二 用leancloud給的共享域名

用leancloud提供的的服務(wù)器地址，但上面提示了，這個(gè)不保證可用

服務(wù)器URL

在小程序后臺(tái)添加服務(wù)器域名白名單

域名白名單

將以下域名添加到小程序服務(wù)器白名單

https://7tm1ofln.lc-cn-n1-shared.com或自定義的域名如：lendoo.it577.net

解決字段顯示不出來的問題

方式一，wxml頁面渲染時(shí)的寫法，加上attributes再取元素

比如原來的寫法是<text class="price">￥{{item.price}}</text>現(xiàn)在要改成<text class="price">￥{{item.attributes.price}}</text>

模擬器正常

渲染問題

對(duì)比上圖，解決了字段讀取顯示的問題，但是，這樣的話，就需要改全部的布局文件，從中找到各個(gè)標(biāo)簽，會(huì)很麻煩，還是改js文件比較直接一點(diǎn)。

于是有了第二個(gè)方式

方式二，js代碼使用toJSON()統(tǒng)一將數(shù)據(jù)格式化

const isPlainObject = target =>
  target &&
  target.toString() == '[object Object]' &&
  Object.getPrototypeOf(target) == Object.prototype;
const _jsonify = target => {
  if (target && typeof target.toJSON === 'function') return target.toJSON();
  if (Array.isArray(target)) return target.map(_jsonify);
  return target;
};

exports.jsonify = target =>
  isPlainObject(target)
    ? Object.keys(target).reduce(
      (result, key) => ({
        ...result,
        [key]: _jsonify(target[key])
      }),
      {}
    )
    : _jsonify(target);

將這面這個(gè)封裝到utils中，在頁面的js中如下調(diào)用

const { jsonify } = require('../../utils/index');
query.find().then(function (goodsObjects) {
    that.setData({
        goods: jsonify(goodsObjects)
    });
});

重點(diǎn)是jsonify(goodsObjects)，就是它將我們的數(shù)據(jù)由lean cloud 對(duì)象轉(zhuǎn)成了普通的json object對(duì)象。

用這種方法，同樣達(dá)到了成功渲染wxml字段的目的

總結(jié)

兜兜轉(zhuǎn)轉(zhuǎn)一圈，就是用jsonify格式化一下就好了，js庫就用舊版的一樣跑，各種引入新的庫，指定服務(wù)器url，域名別名解析，小程序服務(wù)器白名單都是可以不用做的。

源碼地址

https://gitee.com/dotton/lendoo-wx

演示預(yù)覽

識(shí)別體驗(yàn)

praise

關(guān)注我

mp