Home

Awesome

wilddog-weapp


野狗微信小程序客户SDK

配置

微信小程序平台不同于web平台,它是一个封闭的平台。对于所有的资源使用微信都有严格的限制。所以,在微信小程序中使用野狗之前需要做一些额外的配置,除此之外,你可以像在其他开放平台一样使用野狗。

配置域名白名单

首先,如果想使用野狗数据同步功能和登陆认证的功能你需要在微信小程序管理后台配置域名白名单。路径是 设置>开发设置>服务器配置。由于微信给开发者设置了很多限制,每月只能修改3次,所以修改的时候一定要慎重。为了简化配置,你自需要增加2个域名到白名单:

配置AppId和AppSecret

如果你想使用微信的用户账号来认证(auth.signInWeapp(opt_callback)),那么你还需要在野狗的管理后台配置微信的AppId 和AppSecret。 你可以在 设置>开发设置>开发者ID 中找到AppId 和AppSecret。之后在野狗后台中打开微信小程序登陆授权开关,并且将Appid 和AppSecret传入即可。

将野狗sdk引入到微信小程序中

  1. 将wilddog-weapp-all.js 直接放到微信小程序的项目中
  2. 使用commonjs引入
var wilddog = require('wilddog-weapp-all')
  1. 初始化
var config = {
    syncURL: 'https://<WD-APPID>.wilddogio.com',
    authDomain: '<WD-APPID>.wilddog.com'
}
wilddog.initializeApp(config)

API(以下API为野狗sdk在小程序平台独有的API,另外兼容web端的所有其他API)

微信小程序平台与一般的开放平台不同之一是它有默认的用户,所以我们提供了一个可以使用一个api进行auth的方法:

auth.signInWeapp(opt_callback)

return Promise 对象

var config = {
    syncURL: 'https://<WD-APPID>.wilddogio.com',
    authDomain: '<WD-APPID>.wilddog.com'
}
wilddog.initializeApp(config)
wilddog.auth().signInWeapp(function(err,user){
    // do your logic
})

//或者使用Promise

wilddog.auth().signInWeapp().then(function(user){

}).catch(function(err){

})

ref.bindAsArray(page,varName,callback)

将一个reference或query 与page.data中某个Array绑定,绑定后这个reference指向的数据发生任何变化都将实时同步到绑定到的变量上,从而实时同步到页面。使用bindAsArray 相当于已经监听了 所有 child_* 事件。

bindAsArray 可以很方便列表展示

例子

app.js

var config = {
    syncURL: 'https://<WD-APPID>.wilddogio.com',
    authDomain: '<WD-APPID.wilddog.com>'
}
App({
    onLaunch:function () {
        wilddog.initializeApp(config)
        this.todoRef = wilddog.sync().ref('todo').orderByPriority().limitToFirst(20)
    },
    onHide:function(){
        this.todoRef.goOffline();
    },
    onShow:function(){
        this.todoRef.goOnline();
    }
})

** 注意: ** 小程序 1.3+ 版本 onHide 触发后 ws 会自动断连,必须等到 onShow 触发时才可以重连。在此期间 wilddog 重连机制无效,因此需要用户在 onHide 时手动断连,onShow 时手动连接。

page (假设是 index)

index.js

var app = getApp()
Page({
    ...
    onLoad: function () {
        app.todoRef.bindAsArray(this,'todo',function(err){
            if(err != null){
                // 数据绑定失败,失败原因:err.message;
            } else {
                // 数据绑定成功
            }
        })
    }
    ...
})

index.wxml

...
<view wx:for = "{{todo}}">{{item[".key"]}}-{{item[".value"]}}--{{item[".priority"]}}</view>
...

** 注意: ** 数据绑定的过程中,野狗数据与微信小程序的数据是一一对应的,但形式发生了变化

{
    "1234": "hello",
    "1235": "hello again"
}

会映射如下 Array

[
    {
        ".key": "1234",
        ".value": "hello",
        ".priority": null
    },
    {
        ".key": "1235",
        ".value": "hello again",
        ".priority": null
    }
]

ref.bindAsObject(page,varName)

与bindAsArray 类似,不过是绑定到一个Object,而不是Array。 bindAsObject 可以很方便的展示结构化数据,比如某种配置信息。

index.js

var app = getApp()
Page({
    ...
    onLoad: function () {
        // userInfoRef 在app中提供,在这个例子中不再重复出现
        app.userInfoRef.bindAsObject(this,'userInfo',function(err){
            if(err != null){
                // 数据绑定失败,失败原因:err.message;
            } else {
                // 数据绑定成功
            }
        })
    }
    ...
})

index.wxml

<view>
    userName: {{userInfo[".value"]["userName"]}}
</view>

在这里,同样数据会发生映射 比如原始数据:

key: "1234"
value:{
    "userName": "Jack"
}

将会被映射为:

{
    ".key": "1234",
    ".value": {
        "userName": "Jack"
    },
    ".priority": null
}

ref.unbind(page,varName)

取消数据绑定

完整的API请参考 Sync APIAuth API

更多信息请移步野狗官方文档

如果遇到问题或有余力解答别人的问题可以到野狗开发者社区 注意:现在正在小规模测试