ionic3微信公众号开发

一、前言

  之前项目需要，正好使用ionic3开发app,只使用到页面级别，还没到请求数据层面。想着比较熟，就用ionic3直接开发微信公众号应用，看中的是ionic3有一些样式组件现成符合项目，进行项目的时候还是有许多麻烦的。

二、开发过程

（1）引入第三方js：ionic3中使用的是typescript,意味着引入文件的话也要是这种格式，除了一些自带写好的ts文件，一般的js都没有现成的ts文件，引入第三方js成了一个难点。所幸后来找到了方法，才能随性所欲地引入了第三方js并且顺利使用起来。尤其jquery，按照网上的一些正规方法，可以通过命令引入该模块（因为该模块有现成的ts）,但感觉用着很奇怪（个人），后面用的是直接引入jquery.js来用，舒服

（2）微信公众号说到底是网页，所以ionic3提供的原生插件全部不能使用，意味着要实现某些插件功能需要自己去找相关js插件解决，这里也解决了引入问题（大部分插件没有对应ts文件，很难引入），所以第三方js引入帮了很多忙（附：引入方法：http://blog.csdn.net/z_pigeon/article/details/79112108）

（3）使用ionic3页面级别问题：安卓跟ios的组件有些样式不一样的，按照公司设计图UI，一般都是要修改两份，实在是太麻烦，而且组件的某些样式也是通过import多份样式文件，找到对应的样式也花了不少时间。在公众号上，暂时不用考虑这么多，只需要选择一种版本就行，，如果使用的是ios版本那就直接修改mode为ios版本就行，就能使用ios款的页面风格（例：页面切换在ios上的水平切换）

（4）公众号上的下载文件（上传文件不在公众号无法使用微信js的下载方法），通过一个a链接，在安卓端是没什么问题，在ios端是直接使用了微信浏览器打开，下载不了，最后是使用了弹窗提示(提示用户点右上角浏览器打开，才能实现文件发送下载)

 （5）更换字体图标，加入自己想渲染的图标：http://blog.csdn.net/z_pigeon/article/details/78973572

（6）ios上自带阻尼回弹：随便滑动到顶部或者底部，马上卡死，等几秒，才可以继续滑动。默认的是touch，需要加个属性控制，

-webkit-overflow-scrolling: auto!important

去掉了它的阻尼回弹，缺点是它滚动起来没有那么流畅，但影响不大（可以试试，相比它卡死问题不大）

（7）ionic3单页应用，相比ionic1,ionic1是有缓存的，可以单独控制每个页面进行缓存，页面返回时不会刷新数据。现在ionic3返回会实时刷新数据，页面返回都回重新触发请求，用户体验不是很好。虽然可以用session来处理，但就是觉得不舒服

（8）加载html文件（不是富文本，是只有html地址的解析）：http://blog.csdn.net/z_pigeon/article/details/79233212

（9）form表单上传文件的时候，看了angular4的文档真心没看懂怎么提交，有文件的时候可以用下面原生方式（后台需要相应修改）

var fd = new FormData();
fd.append("id",InfoId);
let xhr = new XMLHttpRequest();
xhr.open('POST', 接口地址, true);
xhr.onreadystatechange = (res)=>{
   if(xhr.readyState ==4 && xhr.status == 200){
    }
}
xhr.onerror =(err)=>{
    }
xhr.send(fd);

（10）关于扫码：调用了了微信自带,如果是在A页面扫码然后结果在A页面展示就没问题。我需要的场景是在A页面扫码，然后去B页面看结果，执行的顺序的弹出扫码页面扫完后，扫码页面消失，出现A页面，然后再跳转去B页面，扫码页面消失的方向跟跳转页面的方向还是相反的，看到的效果就是几个页面无规则跳来跳去。最佳的场景应该是弹出扫码页面扫码后跳转B页面，实现不了。为了让页面顺序一致，A页面只做跳转，扫码在B页面进入时使用，这样能保证顺序一致，整体相对合理

（11）modal等级是比返回等级高的，也就是说当页面这时候modal弹出来还没关闭的时候，点击返回按道理是执行关闭modal而不是返回。但是实际操作的时候直接返回了，modal都没关，继续显示页面上。这里是控制返回时关闭页面，让整体合理点。

 // 用户准备离开当前页面时,注意检查关闭图片显示弹窗
  ionViewWillLeave() {
    $("ion-modal").css("display","none");
  }

 [留意:]api提供的platform是作用在真机上,网页上不支持,后面发现了一个ionViewCanLeave 生命周期,把权限交给页面自己,我还没试,可以自行看看api

能更好解决页面返回不返回的问题,强烈推荐

（12）searchbar设置焦点：(需要加setTimeout才行)

 import { Searchbar } from 'ionic-angular';
 export class Component {
   @ViewChild('searchbar') searchbar:Searchbar;
   focus() {
    setTimeout(()=>{
      this.searchbar.setFocus();
});
   } 
 }

！！！！最最影响开发的是：ionic3使用的是编译压缩后的代码，浏览器读的就是www这块，意味着你修改一点东西，就需要整个工程全部打包重新编译压缩一次。在浏览器调试还好，一旦需要到真机上测试，真的是修改一点点就得重新打包压缩发包到真机，很耗时间

三、总结

开始移动端项目前，还是先对选用框架进行全面的测试，直接调需要的技术点进行测试，可以的话再进行后面的开发。一开始知道说有几个技术点这个框架能够解决就直接选用了这个框架，导致后面出现问题也没办法没时间重构，只能一路埋头往下走，直到出现问题才去网上了解前人对这个框架应用在微信的评价