关于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的指向,这个是基础。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容