由于项目是放在微信公众号中运行,所有用到微信js-sdk,做图片上传、跟支付。下面是使用过程中碰到的一些问题。
1、首先,是引入微信js-sdk,因为ionic2 用的是typeScript,文件是.ts,所以引入js-sdk也是个问题。我们在src/index.html引入微信js-sdk
2、在src/app目录下创建wechat.d.ts文件(自定义)
在wechat.d.ts中声明全局变量 declare var wx:any;
3、在需要使用到微信图片上传的页面引入wechat.d.ts文件
注意三个‘///’,还有文件的路径。打印我们声明在wechat.d.ts中的wx
4、在使用的页面中首先使用config接口验证配置
成功,可以在控制台中查看jweixin-1.2.0.js返回的信息
而且开启调试模式会弹出{“errMsg”:“config:ok”}
5、使用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';
第二个在构造函数中声明 public sanitizer:DomSanitizer。就像这样
6、微信后端可能用到的app签名,需要与在微信公众号填写的app签名一致。
打开微信.开放平台官网 在资源中心--资源下载中找到Android资源下载
拉到最下面
这是一个手机应用,需要安装到手机。成功安装并打开
要查签名,需要用到app的包名,查看app的包名在项目config.xml中查看
最后把包名输入微信app签名查看工具(需要打包成app并安装到手机才能看到。)