微信小程序 第三方插件的使用

各种开发其实都是有插件的，之前我以为小程序没有，没想到后来又有了，昨天动手想集成两个插件试试，没想到一波三折，这里记录一下我踩的坑

1、在微信公众平台后台，登录，设置-第三方服务-添加插件。这里以添加"极点日历"为例

注意最多只能添加5个哦

2、搜索你要的插件，并添加

添加成功后，就可以在插件管理下面看到你添加的插件了

3、在app.json中添加插件

这里的插件名可以自己随意取

这里以tx-map为例，参考它的文档

在app.json中添加相关信息

而provider即AppID，version即版本号

在项目中具体怎么使用，要看开发文档，而开发文档我发现有些插件有，有些插件并没有，反正自己多查查吧

4、在目标页面的json文件里引用该插件

注意这里的tx-map即在app.json取的那个名字，而map-route也可以自己取，这里取啥，到时候wxml里用的组件就是这个名字

5、在目标页面的wxml文件里使用该插件

如果要使用插件的 js 接口的话，在js里，使用requirePlugin(在app.json里命名的插件的名字)，就能获得插件对象，比如：

6、查看效果

这个你可以尝试调整你的调试基础库版本，我之前是1.9.1，调整到2.1.1就好了。

这个真心没搞懂，因为这个错误是看心情出现的，一会儿好一会儿不好的，有点不稳定的样子，据说是降低调试基础库版本

这个也是看心情出现的（目前仍然是懵逼脸，不晓得是我错了，还是插件有问题）

1、添加插件

在小程序中引入插件，进入微信公众号平台，在设置中找到第三方设置，在插件管理中添加插件。搜索到腾讯位置服务路线规划插件，点击添加，同时打开该插件的详情，在里面查找到该插件的AppID与版本号。

2、在app.json代码中引入插件包

// app.json

{

"plugins": {

"routePlan": {

"version": "1.0.12",

"provider": "wx50b5593e81dd937a"

}

}

}

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

3、在app.json代码中设置定位授权：

// app.json

{

"permission": {

"scope.userLocation": {

"desc": "你的位置信息将用于小程序定位"

}

}

}

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

4、使用插件

在你绘制地图的页面的js文件中使用插件

let plugin = requirePlugin('routePlan')

let key = '' //使用在腾讯位置服务申请的key

let referer = '' //调用插件的app的名称

let endPoint = JSON.stringify({ //终点

'name': '北京西站',

'latitude': 39.894806,

'longitude': 116.321592

})

// 还可以拼接navigation参数，navigation=1代表显示导航按钮，为0代表不显示导航按钮

wx.navigateTo({

url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint

})

1

2

3

4

5

6

7

8

9

10

11

12

1

2

3

4

5

6

7

8

9

10

11

12

通过wx.getUserInfo获取用户的openId 和unionId，需要对接口返回的加密数据( encryptedData )进行对称解密。

/**

    * 功能描述: <br>

    * 〈功能详细描述〉

    *

*@paramargs

*@see[相关类/方法](可选)

*@since[产品/模块版本](可选)

    */

publicstaticvoidmain(String[] args){

String encryptedData ="********......*******"

String sessionKey ="********......*******"

String iv ="9btKSYjvtGMGpknPpjS2Ag=="

        JSONObject jsonObject = getUserInfo(encryptedData, sessionKey, iv)

System.out.println(jsonObject.getString("unionId"))

        System.out.println(jsonObject.toJSONString())

    }

结果运行报错：

javax.crypto.BadPaddingException: pad block corrupted

at org.bouncycastle.jcajce.provider.symmetric.util.BaseBlockCipher$BufferedGenericBlockCipher.doFinal(Unknown Source)

at org.bouncycastle.jcajce.provider.symmetric.util.BaseBlockCipher.engineDoFinal(Unknown Source)

at javax.crypto.Cipher.doFinal(Cipher.java:2087)

at com.saic.ebiz.service.util.AESUtils.getUserInfo(AESUtils.java:62)

at com.saic.ebiz.service.util.AESUtils.main(AESUtils.java:86)

Exception in thread"main"java.lang.NullPointerException

at com.saic.ebiz.service.util.AESUtils.main(AESUtils.java:87)

查询原因，有可能是我的wx.login在wx.getUserInfo之后调的原因，细究一下

我们通过wx.login获得用户授权码code，接下来我们用code以及appid和appSecret请求微信

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

获取session_key，而sessionKey又是解密encryptedData的密钥，所以一旦我们的wx.login在wx.getUserInfo之后获取，我们redis中存储的sessionKey绝对不是当前获取encryptedData的密钥。所以更改小程序请求顺序，每次请求wx.getUserInfo之前先请求wx.login，同时生成sessionKey放入缓存。而后需要解密的时候就可以正常解密了

特别注意： 让前端看一下你的请求顺序是不是错了

---