文档章节

如何在微信小程序中使用 Hprose(二)

andot
 andot
发布于 2016/11/15 16:09
字数 1002
阅读 1061
收藏 2

Hprose 技术交流群:48855729

如何在微信小程序中使用 Hprose

书接上文。

这次仍然是下载 hprose-wx,或者从开源中国的 Git 服务器镜像下载。

这次我们发现 dist 目录下多了一个文件:

  • regenerator-runtime.js

现在我们把它也下载下来,放在上一篇文章里说的那个微信小程序的 utils 目录下。

接下来,打开 pages/index/index.js 文件。

在开头加上:

var hprose = require('../../utils/hprose.js');
var co = hprose.co;
var regeneratorRuntime = require("../../utils/regenerator-runtime.js");

第一句是引入 hprose。

第二句引入的 co 是 hprose 中实现的协程,后面我们重点讲的就是它。

第三句引入了一个 regeneratorRuntime,这个又是干啥的呢?因为微信小程序的执行环境是 ES5 的,但是协程本身是 ES6 中才有的实现,所以呢,想直接用,是没有的。

但是呢,微信小程序开发环境提供了一个开启 ES6 转 ES5 的选项:

开启 ES6 转 ES5

打开这个选项呢,ES6 的协程代码就自动转换成 ES5 的代码了,但是转换之后的代码其实是需要引用一个库的,这个库就是 regeneratorRuntime 这个东西。如果你不加入 regeneratorRuntime 这个库,那么就会看到 regeneratorRuntime 未定义的错误。

上面解释了这么多,如果听不懂也没关系,你就只要知道要用协程,就把上面三句话写上就可以了。

下面我们来看看使用协程的代码怎么来写:

之前我们实现 hprose 远程调用,是在 onLoad 事件中加入了以下代码:

    var client = hprose.Client.create("http://www.hprose.com/example/", ["hello"]);
    client.hello("world", function(result) {
      console.log(result);
    });

这段代码很异步,那我们把它 Promise 化一下吧。

    var client = hprose.Client.create("http://www.hprose.com/example/", ["hello"]);
    client.hello("world").then(function(result) {
      console.log(result);
    });

现在这段代码很 Promise 了,但是你可能觉得好像更复杂了。是这样吗?

确实是的,但是 Promise 化之后,有两个好处,一是 hello 方法的结果是一个 Promise 对象,你可以传递这个对象到其它地方了,而不需要把回调方法传过来了。第二个好处嘛,就是可以跟协程结合了。让我们来看看怎么跟协程结合。

    co(function*() {
        var client = hprose.Client.create("http://www.hprose.com/example/", ["hello"]);
        var result = yield client.hello("world");
        console.log(result);
    });

现在的代码,看上去很同步了吧。hello 的返回结果经过 yield 之后,就直接可以获取到值了。

co 除了可以将一个生成器作为协程执行以外,它还提供了一个 co.wrap 方法,这个方法可以将生成器包装成一个普通函数。所以,下面要放大招了:

//index.js

var hprose = require('../../utils/hprose.js');
var co = hprose.co;
var regeneratorRuntime = require("../../utils/regenerator-runtime.js");

//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: co.wrap(function *() {
    console.log('onLoad')
    var client = hprose.Client.create("http://hprose.com/example/", ["hello"]);
    var result = yield client.hello("world");
    console.log(result);
    //调用应用实例的方法获取全局数据
    this.setData({
      userInfo: yield app.getUserInfo
    });
  })
})

上一篇文章中的使用异步回调来完成调用的代码,现在就变成看上去很同步的使用协程方式的代码了。

当然关于 hprose 中的协程不仅仅如此,它比 tj 所实现的 co 协程要完美的多,也比 ES2016 所提供的 async/await 更加强劲,如果想要了解更多,可以阅读这篇 hprose 协程

最后再强调一点:如果你用的是微信小程序的正式开发账号,那么连接的服务器地址应该是 https 的而不能是 http 的,而且应该在开发账号里设置要连接的服务器地址。

如何在微信小程序中使用 Hprose(三)

© 著作权归作者所有

共有 人打赏支持
andot

andot

粉丝 125
博文 8
码字总数 16729
作品 17
潍坊
程序员
加载中

评论(4)

andot
andot

引用来自“qianmenchuxue”的评论

good,分享之?可以吗?推广一下
可以可以,非常欢迎
qianmenchuxue
qianmenchuxue
good,分享之?可以吗?推广一下
andot
andot
谢谢~~
肖滔
肖滔
very good,我顶
异步通信组件hprose在微信小程序中的使用例子

网上搜索了在微信小程序中的使用,基本都是最老的版本 目前在新版中无法使用 现在写一个例子 第一步: 准备好一个hprose的服务端,什么语言的都行,我这里使用的是nodejs版本的 我进入开源的官方...

MrInsight
05/28
0
0
微信小程序图片上传使用整理(一)

一、微信小程序图片上传说明 1.目前微信中不支持FileReader等浏览器的IO接口,没法直接读取或处理文件内容,也就没法使用分段处理上传等。 更多分段上传参考:https://blog.csdn.net/u011127...

tianma3798
08/11
0
0
微信小程序web-view使用整理

一、微信小程序web-view简单使用 指定https链接地址,并且链接白名单,同意设置过的都可以使用 二、web-view使用注意点 1.web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序...

tianma3798
08/13
0
0
小程序如何删除或隐藏头部导航栏,实现全屏

一、默认情况下小程序页面有一套自己的导航系统 1.可以设置导航标题,字体颜色、背景颜色等 2.对于简单的小程序,有时需要全屏处理页面。隐藏navigationBar的部分 二、处理方式 1.app.json 配...

tianma3798
08/02
0
0
微信小程序图片上传使用整理(二)

一、小程序图片上传示例2 选择图片,先预览,点击提交时上传 1.wxml 2.js 处理 二、上传示例3,前台图片压缩处理后,再上传 1.wxml 2.重点js 处理 更多: 微信小程序图片上传使用整理(一) ...

tianma3798
08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

学习设计模式——中介者模式

1. 认识中介者模式 1. 定义:用一个中介对象来封装一系列的对象交互行为,中介者使得各对象不需要显式的互相引用,从而使其松散耦合,独立的改变他们之间的交互。 2. 结构: Mediator:中介者...

江左煤郎
9分钟前
0
0
深入理解Plasma(1):Plasma 框架

这一系列文章将围绕以太坊的二层扩容框架,介绍其基本运行原理,具体操作细节,安全性讨论以及未来研究方向等。本篇文章作为开篇,主要目的是理解 Plasma 框架。 Plasma 作为以太坊的二层扩容...

HiBlock
16分钟前
0
0
Java 8 日期 示例

Java 8 推出了全新的日期时间API。Java处理日期、日历和时间的方式一直为社区所诟病,将 java.util.Date设定为可变类型,以及SimpleDateFormat的非线程安全使其应用非常受限。Java也意识到需...

阿刚ABC
42分钟前
1
0
RxJava操作符lift 笔记

在内部,每个Rx operator都做3件事: 它订阅源并观察值。 它根据操作员的目的转换观察到的序列。 它通过调用onNext,onError和onCompleted将修改后的序列推送到自己的订阅者。 compose运算符...

woshixin
43分钟前
1
0
lnmp+coreseek实现站内全文检索(安装篇)

软件安装包 安装环境 系统环境 centos7.2 1核2G 软件环境 coreseek-3.2.14 lnmp1.5 安装mmseg 更新依赖包和安装编译环境 yum -y install m4 autoconf automake libtoolyum -y install gcc g...

毛毛雨rain
55分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部