微信的小程序上线已经快一年了，期间一直没有去尝试，最近有机会尝试了下，把My Life Time的生存时间功能移植到了微信小程序上
WebUI界面：
https://dev.minirplus.com/my-life-time/
微信小程序界面：
技术细节
微信小程序的核心和Chrome扩展的性质一样，都是一个打包后的JS程序，但是微信小程序的特点是手机界面都是长条形的，所以界面布局没有什么需要特别注意的地方，把各种组件直接黏贴进去就行了。
另外在这次的移植中，没有使用JS来做后台运算，而是采用和微信公众号一样的API来实现运算功能，所以小程序承担的功能只是接受用户输入并转换成API请求和处理从API回复的内容并加载到界面。
如何发送API请求
在wx小程序中，提供了一个方法来发送API请求，最简单的请求结构如下，其中url/data/method/header/datatype是请求前需要设置的参数，success/fail是两个处理请求结果的函数。请求的data参数就是向服务器发送的QUERY_STRING，服务器通过 $_GET[''] 来接收参数，在这个功能中，向服务器发送的数据主要是birthday。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
wx.request({ url: requestUrl, data: { noncestr: Date.now(), mode: "mylifetime", birthDay: birthDay }, method: "GET", header: { 'Content-Type': 'application/json' }, dataType: "json", success: function (result) { self.setData({ isLoading: false }) var mylifetime = result.data that.setData({ relRatioTime: mylifetime.relRatioTime*100, text: "You Survived: " + mylifetime.hasLivedTime.yearsPart + " year " + mylifetime.hasLivedTime.monthPart + " month " + mylifetime.hasLivedTime.daysPart + " days" }); }, fail: function ({ errMsg }) { console.log('request fail', errMsg) self.setData({ loading: false }) } }) |
服务器端的处理代码
服务器通过 $_GET[''] 接收参数并简单处理之后，通过 file_get_contents() 转交给实际API执行运算，并返回内容
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if (isset($_GET['mode']) && $_GET['mode']=="mylifetime") { //定义常量 $birthDay = '1967-5-16'; //获取URL提交的参数 if (isset($_GET['birthDay'])) { $birthDay = $_GET['birthDay']; }else{ die("birthDay not set"); } $outputJSON = file_get_contents('https://dev.minirplus.com/my-life-time/api.php?birthDay='.$birthDay); } |
There are no comments yet