峰间的云

启动服务后刷新页面（刷新前先把浏览器开发者工具打开），可以看到在程序进入App.vue组件mounted这个组件生命周期钩子里后，指定到debugger处时程序就被debug了。如下图所示，剩下的大家应该都很熟悉了。可以看到，此处显示的代码就是我们组件里的实际代码，并非被我们编译混淆后的那种代码，可读性非常好。

用户在支付页面点击我们页面里的支付按钮，然后前端使用微信跳转地址跳转到微信pay.example.com开头的一个后端提供的接口上去，这个时候相当于对这个后端接口发起了一个get请求，服务端根据微信在接口后面追加的code查询参数来获取微信号A的用户在微信号B中对应的openid（用户无需关注微信号B），然后服务端在响应前端get请求时进行重定向返回到用户先前访问的支付页面并在新的url后面追加openid参数参数（微信号A的用户在微信号B中的openid），然后前端页面检测url中是否带有openid来判断是否需要通过js自动触发请求到服务端查询一些微信统一支付的参数来在客户端调启微信支付控件。大概就是这么个意思，实际操作中我们会对接口追加一些诸如告诉服务端重定向要定向到的地址，支付页面所在订单的id之类的参数。下面这种吊起维系支付控件的方式是不需要经过微信JSSDK授权的，两个不是一回事，因为用的不是微信JSSDK里的支付API。

为了接下来能比较容易上手后端项目，结合目前所做项目的后端开发们使用的是spring mvc而非spring boot。决定先把基本的java开发环境配置好，先跑一个本地服务能看到页面再说。我是按着http://www.cnblogs.com/Sinte-Beuve/p/5730553.html这篇文章的教程来的，所以内容大体一致，再写一遍主要是为了加深自己的印象。 最最基础的，你需要先装好java、maven和tomcat（tomcat选装，如果用jetty等其他web容器，就用不到tomcat了，不过tomcat还是用的最广泛的，出于学习的目的，还是装下比较好），这部分内容之前有写过文章《Macbook Pro安装Maven 3 》。然后开始下面的流程：

然后我发现一个坑，就是每次我重启终端或者重启电脑后mvn变量又不能用了，这显然是不行的。我用的是zsh，参考网上的资料，打开~/.zshrc文件并在末尾添加上面那句话并重启终端后mvn命令就可以用了（每次启动终端前，会自动运行一次~/.zshrc里的命令，不需要手动去source了）。

我们的场景是前端SPA应用有两个入口，一个是我们自己的微信公众号（可以实现微信授权，调用微信JSSDK），一个是第三方的公众号（需要第三方支持才能实现微信授权），出于统一和方便的考虑，上传照片功能没有使用微信JSSDK里的选择图片和上传图片相关方法，而是用传统页面里上传图片的方式。上传图片常见的有两种方式，一种是上传图片base64数据，一种是上传文件blob对象。这里我们选择的是上传文件blob对象。现在的问题是，服务端尤其是大部分tomcat里配置的post请求允许接收的最大数据量好像是2M，现在手机的像素都很高里，很容易就会拍出来大于2M的照片的，而且就算没有服务端限制，上传2M甚至更大的图片的速度会比较慢，对用户的体验也不好。所以今天趁着有空，自己做了个图片压缩的功能上去。直接上代码吧，下面是封装的压缩图片文件（blob对象）的方法，外部调用这里的compressImage方法（该方法返回的是一个Promise对象）

Recently, I encountered a bug: my frontend project can work normally in WeChat mobile clients but when visited in WeChat PC client for window OS, the page turned out be be blank -_-. After some attempts, I found that it's due to the unavailability of Object.assign method in WeChat PC client for window OS. Therefore, we need to write polyfill for Object.assign method. There is not need to think how to write this polyfill ourselves. Just copy from MDN ^_^.

This is not a new function supported by OSChina, but I'm just aware of that yesterday. Long time ago, I had once made a choice whether to use github or OSChina to be the repository storing my public code, and I finally use github later due to the fact that I found OSChina seems to have to function like github Pages. You know, as I front end developer, it's import to show not both your code but also its visual display to others. Therefore, functions like github pages are very meaningful to me and it's also very convenient. Without functions like github pages, I will need to build my code and then use FTP/SFTP tools like FileZilla to upload my frontend static files to my server. If you change your code in high frequency, you will find this way quite time-wasting. Whereas if you use github pages, all you need to do after rebuild your code is type one line's command in your command line tools and press enter button ^_^.

In one of my frontend project using VueJS, there is a need to maintain run-time data in javascript to local hardware so that these data will not be lost in case of a page refreshing. This requirement can be saying in another way - data persistence is required. Since the diversity of frontend environment, there are many stuff can be employed to save your run-time data. For example, if you use react-native, you can use one of React Native's API called AsyncStorage; if you are written html webpage, the Html api sessionStorage, localStorage and cookie can all be employed. And today we are going to employ localStorage, we're going to talk about data persistence in webpage developed using VueJS.