关于ionic2 使用微信JS-SDK做图片上传，和支付问题

由于项目是放在微信公众号中运行，所有用到微信js-sdk，做图片上传、跟支付。下面是使用过程中碰到的一些问题。

1、首先，是引入微信js-sdk，因为ionic2 用的是typeScript,文件是.ts，所以引入js-sdk也是个问题。我们在src/index.html引入微信js-sdk

index.html引入微信js-sdk

2、在src/app目录下创建wechat.d.ts文件（自定义）

创建wechat.d.ts文件

在wechat.d.ts中声明全局变量 declare var wx:any;

3、在需要使用到微信图片上传的页面引入wechat.d.ts文件

引入wechat.d.ts

注意三个‘///’，还有文件的路径。打印我们声明在wechat.d.ts中的wx

打印wx变量

4、在使用的页面中首先使用config接口验证配置

使用config接口

成功，可以在控制台中查看jweixin-1.2.0.js返回的信息

jweixin-1.2.0.js

而且开启调试模式会弹出{“errMsg”：“config:ok”}

5、使用wx.chooseImage调起微信图库、拍照接口

wx.chooseImage接口

这里需要注意两个地方，第一是__self__我把当前类赋值给它，方便我们给模板传值，如果在wx.chooseImage中直接用this，会调用wx对象的属性或者方法。

第二是bypassSecurityTrustResourceUrl(localIds);这个是用来通过ionic2 模板赋值的安全机制。使用它我们才能正确的显示图片。因为localIds是可以直接拿来给img 的src赋值的。

不过滤掉安全机制，传到页面的src就会变成<imgsrc="unsafe:wxLocalResource://imageid123456789987654321",给我们的路径多个unsafe,而我们需要的是它后面的只就可以里，加上它图片是坏的。

那么我们怎么使用bypassSecurityTrustResourceUrl()呢

第一个import {DomSanitizer} from '@angular/platform-browser'；

导入DomSanitizer

第二个在构造函数中声明 public sanitizer:DomSanitizer。就像这样

声明DomSanitizer

6、微信后端可能用到的app签名，需要与在微信公众号填写的app签名一致。

打开微信.开放平台官网 在资源中心--资源下载中找到Android资源下载

签名工具下载

拉到最下面

下载签名生成工具

这是一个手机应用，需要安装到手机。成功安装并打开

要查签名，需要用到app的包名，查看app的包名在项目config.xml中查看

查看包名

最后把包名输入微信app签名查看工具（需要打包成app并安装到手机才能看到。）

使用支付功能，直接使用wx.chooseWXPay接口

使用微信支付接口

总结：由于接触ionic2不久，基础也比较差，在使用微信js-sdk，过程中碰到的问题不少，磕磕绊绊，最后也还是完成。 总的来说就是要注意两个地方，一个是微信的回调域名跟我们应用的域名要保持完全一致，在我们获取当前域名的时候，需要注意好好看微信js-sdk的文档。还有一个是要注意this的指向，这个是基础。