前言：
前端开发已有半年之久，做了几个项目，其中有2个小程序项目，1个hybirdApp项目，而最近技术总监要求将之前的hybirdApp改成小程序，而最近小程序官方刚好支持了webView的方式，为了节省工作量因而将之前的hybirdApp以webView的方式内嵌入小程序中，而在这个过程中，由于微信文档的极度缺失造成了开发进度上的严重滞后，特此记录下来踩过的坑。
内容：
步骤1:
申请微信小程序账号；
由于微信小程序官方文档上有注明，如若想使用webView，小程序账号不能是个人账号或者海外账号，因而必须注册一个企业级别的小程序，此处有一个较为简单的办法；既在认证过的微信公众号上直接注册一个小程序（一个微信公众号可以注册5个微信小程序）
步骤2:
登录小程序账号，添加业务域名；
设置->开发设置->添加域名->业务域名;业务域名即为hybirdApp的域名，此处必须是htts的安全域名，且不能是IP不能带有端口号，如若hybirdApp放在二级域名下，此时填入根域名即可。例如app的域名为https://www.leoChanV.com/hibirdApp/index.html. 此时在业务域名内填入 https://www.leoChanV.com即可;填写完成之后，需要下载验证文件，并且将验证文件放置在域名更目录下，如下图所示：
步骤3：
将hybridApp中的http请求换成https请求，并且将调用原生API的插件移除为微信JSSDK引入做准备
由于我们的webView此时加载的链接为https安全链接，如果在https内出现了http的请求，会被浏览器自动阻塞请求，此处网上查了很多资料，发现最好的解决方法就是把之前的http的请求改成https的请求
原来的hibirdApp使用的是angular2+ionic2+cordova的开发模式，在调用譬如扫描二维码、获取图片、上传图片等功能时使用到了一些cordova的插件，因而需要将这些插件移除防止不必要的冲突。
步骤4:
引入JSSDK
官方地址：http://qydev.weixin.qq.com/wiki/index.php?title=微信JS-SDK接口
在angular项目的index.html中添加代码<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>完成JSSDK的引入
步骤5:
配置JSSDK
首先在需要配置的页面声明微信 declare var wx:any;调用配置微信的函数
wx.config({
debug:true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: appId,// 必填，公众号的唯一标识
timestamp: timestamp,// 必填，生成签名的时间戳
nonceStr: nonceStr,// 必填，生成签名的随机串
signature: signature,// 必填，签名，见附录1
jsApiList: ['scanQRCode','chooseImage','uploadImage']// 必填，需要使用的JS接口列表，所有JS接口列表见官网附录3()
});
这里需要特别注意的appId 这个参数，填入的是微信公众号的唯一标识，并不是小程序的唯一标识。其他参数获取的方法可参考博客：http://1017401036.iteye.com/blog/2263358，值得注意的是，该博客中getAccessToken()此方法中的APPID和secret 这两个参数 指的同样是微信公众号的ID和secret（此处极易出错，易写成小程序的id和secrit 从而导致调用时，debug模式提示签名失败）
因为通过微信的token和签名只能2个小时的有效期，所以后端需要配合，让前端通过接口的形式获取配置中的这些参数。
总结：
至此，使用微信小程序的webView引入一个hybirdApp初步完成。总体感觉就是，微信的东西用起来还是比较麻烦的，各种登录账号和扫二维码，而且文档缺失比较严重，JSSDK调用原生API调试起来非常麻烦，因为我们的https的地址 是正式环境，如若调试，需要在修改完代码之后打包上传至正式环境，替换资源，然后才能在小程序上调试功能。
网友评论