微信小程序雲端加強 SDK接入

時間 2019-11-13

標籤微信程序雲端加強 sdk 简体版

原文原文鏈接

1、XpmJS 是啥

XpmJS能夠連接任何雲端資源，爲小程序、移動應用提供雲資源通道和後端能力。下降開發門檻，提高小程序的開發效率。無需編寫後端代碼，便可實現用戶登陸、WebSocket 通訊、微信支付、雲端數據表格、文件存儲等功能。雖然 PHP 是最好的編程語言, 可是使用 XpmJS 後, 無需學習包括 PHP 在內的任何後端語言，用 Javascript 便可搞定一切，NodeJS 也不用！php

2、爲啥 XpmJS

從代碼結構上看 XpmJS 更優雅！由於使用了 Promise！

XpmJS 封裝了經常使用後端操做，還提供一個管理後臺，微信支付只要一行代碼就能夠實現！

後端部署在你的雲主機上！你能夠徹底掌控數據。

方法1: 一鍵安裝git

推薦使用騰訊雲一鍵安裝連接（訪問微信接口快, 能夠免費申請 Https 證書）web

方法2: 安裝腳本docker

安裝前，先提早申請 Docker Hub 鏡像申請地址 https://www.daocloud.io/mirror編程

# 請採用 Ubuntu 14.04 64位 LTS
curl -sSL http://tuanduimao.com/xpmjs-server.sh | sh -s yourdomain.com http://<your id>.m.daocloud.io

方法3: 使用 Docker 安裝小程序

# 安裝 Docker 
curl -sSL https://get.daocloud.io/docker | sh

# 啓動容器
docker run -d --name=xpmjs-server  \
    -e "HOST=yourdomain.com" \
    -v /host/data:/data  \
    -v /host/apps:/apps  \
    -v /host/config:/config  \
    -p 80:80 -p 443:443  \
    tuanduimao/xpmjs-server:1.0

XpmJS Server 升級

第一步: 下載代碼:後端

curl http://xpmjs-1252011659.costj.myqcloud.com/xpmjs-server-1.0.tar.gz

第二步: 解壓並更新:微信小程序

tar xvfz xpmjs-server-1.0.tar.gz
cd 1.0 && docker cp . xpmjs-server:/code

3、XpmJS 咋用

1. 用戶 ( User )

用戶登陸 login()

var user = app.xpm.require('User');

user.login().then( function( userInfo ) { 

    console.log( '用戶登陸成功', userInfo );
    app.session.set('loginUser', userInfo );
})

.catch( function( excp ) { 
    console.log('用戶登陸失敗', excp );
});

用戶退出 logout()

var user = app.xpm.require('User');

user.logout().then( function( userInfo ) { 
    console.log( '用戶註銷成功', userInfo );
})

.catch( function( excp ) { 
    console.log('用戶註銷失敗', excp );
});

讀取資料 get()

來自微信客戶端的用戶信息（非雲端數據）api

var user = app.xpm.require('User');

user.get().then( function( userInfo ) { 
    console.log( '讀取成功', userInfo );
})

.catch( function( excp ) { 
    console.log('讀取失敗', excp );
});

2. 信道（ Wss ）

使用 Websocket 信道，能夠實現雙向實時通訊。安全

打開信道 open()

var wss = app.xpm.require('Wss');
wss.open('/wxapp').then(function( res ) {
    console.log( '信道鏈接成功', res );
})
.catch( function( excp ) { 
    console.log('信道鏈接失敗', excp );
});

在線用戶 liveUsers ()

var wss = app.xpm.require('Wss');
wss.liveUsers().then(function( users ) {
    console.log( '讀取在線用戶成功', users );
})
.catch( function( excp ) { 
    console.log('讀取在線用戶失敗', excp );
});

用戶信息數據結構

字段	中文	說明
id	客戶端ID
_id	用戶ID
nickName	微信暱稱
gender	性別
avatarUrl	頭像
language	語言
group	用戶組
isadmin	是不是管理員	0 非管理員 1 管理員

檢查用戶是否在線 isOnline ( xpmjs-server 1.0rc4+ )

var user = app.xpm.require('User');
var wss = app.xpm.require('Wss');

user.login().then( function( userInfo ) { 
    return wss.isOnline( userInfo['_id'] )

}).then function( isOnline ) {
    if ( isOnline ) {
        console.log( '用戶在線');
    } else {
        console.log( '用戶離線');
    }
})
.catch( function( excp ) { 
    console.log('出錯啦', excp );
});

監聽指令 listen()

小程序僅提供 WebSocket 客戶端 API，因此小程序自己沒法實現 WebSocket服務器。 wss.listen() 方法並不是啓動 WebSocket Server, 而是用來接收雲端信道轉發的指令。

var wss = app.xpm.require('Wss');
wss.listen('payment', function( res, status ){
    // 當接收到 payment 指令後運行 
    if ( status != 'success') return ;
    console.log( res, status );
});

發送指令 send()

var wss = app.xpm.require('Wss');
wss.liveUsers().then(function( users ) {
    console.log( '讀取在線用戶成功', users );
    // 向第一個用戶發送 payment 指令
    if ( users.length > 0 )  {
        return wss.send('payment', users[0], users[0]['id'] )
    } else {
        return {code:404, message:'no live user'};
    }

}).then( function( res ){
    console.log('發送完畢', res);
});
.catch( function( excp ) { 
    console.log('出錯了', excp );
});

綁定事件 bind()

接收並處理 websocket 服務器事件，有效值 ( open/close/message/error )

var wss = app.xpm.require('Wss');
wss.bind('open', function(event) {
    console.log('信道服務器開啓', event );
});

wss.bind('close', function(event) {
    console.log('信道服務器關閉', event );
});

3. 會話 ( Session )

Session 會話分爲客戶端和服務端兩部分，客戶端與服務端會話ID相同，客戶端保存用戶信息資料，服務端保存用戶 openid 等敏感信息。與服務端通訊，使用Sesssion ID 鑑權，經過服務器端驗證後，請勿將 Session ID 發送給第三方。

啓用會話 start()

啓用會話後，會自動建立一個會話ID

var session = app.xpm.require('session');
    session.start();

會話 ID id()

var session = app.xpm.require('session');
var sid = app.id();
console.log( sid );

客戶端會話數據管理 set() & get()

var session = app.xpm.require('session');
session.set('hello', 'world');
console.log( session.get('hello') );

4. 雲端表格 ( Table )

可使用雲端表格接口，將數據保存在 MySQL 中，能夠經過 SQL 查詢數據。

建立數據表 _schema()

僅管理員賬號擁有建立數據表權限 ( 登陸管理後臺，打開用戶表，將開發者對應賬號記錄的 isadmin 字段數值設置爲 1 )

var table = app.xpm.require('Table', 'hello');
table._schema(
    [  
      {name:"name", type:'string', option:{length:80, require:true }, acl:"rwd:r:-" },
      {name:"company", type:'string', option:{length:100}, acl:"w:-:-" }
    ], 
    { record:"rwd:rw:-", table:"rwd:-:-", field:'rwd:r:-',  user:'admin', group:'member' }
, true ).then( function( data ) {
    console.log('數據表建立成功', data );
})
.catch( function( excp ) { 
    console.log('數據表建立失敗', excp );
});

字段配置參數

參數	中文	說明
name	字段名稱
type	字段類型	string/integer/text/boolean 等
option	字段參數	index:true 索引 unique:true 惟一索引 length:80 字段長度
acl	字段鑑權	rw:rw:rw r: 讀取 w: 寫入 -:無 user:group:other

數據增刪改查 get() create() update() remove()

var table = app.xpm.require('Table', 'hello');

// 建立
table.create( 
    {name:'張藝謀', company:'中國電影製片廠'}
).then(function(data) { // 更新
    return table.update(data['_id'], {name:'馮小剛'});

}).then(function(data) { // 讀取
    return table.get(data['_id']);

}).then(function(data) { // 刪除
    return table.remove(data['name'], 'name' );

}).then(function(resp) {
    console.log( 'remove success', resp );

}).catch( function( excp ) { 
    console.log('出錯了', excp );
});

數據查詢 query()

var table = app.xpm.require('Table', 'hello');
table.query()
    .where('name', '=', '馮小剛')
    .orderby('name', 'asc')
    .limit(2)  // 僅查詢 2條 

.fetch('name','company').then(function(data) {  
    console.log( '查詢結果', data ); 
})


table.query()
    .where('name', '=', '馮小剛')
    .orderby('name', 'asc')
    .paginate(3, 2)  // 分3頁，當前顯示第 2頁 

.fetch('name','company').then(function(data) {  
    console.log( '查詢結果', data ); 
});

聯合查詢 join(), leftjoin(), rightjoin() (xpmjs-server 1.0rc4+)

Table 1: User

id	name	title
1	張三	產品經理
2	李四	工程師
3	王五	運維工程師

Table 2: Project

id	name	uid
1	小程序開發組	1
2	網頁開發組	3

var table = app.xpm.require('Table', 'Project');
table.query()
    .join('User', 'User.id', '=', 'Project.uid' )  // leftjoin / rightjoin
    .limit(1)  
.fetch('User.id as userid', 'User.name as username', 'Project.*').then(function(data) {  
    console.log( '查詢結果', data ); 
})

返回值

[
    {
        "id":1,
        "name":"小程序開發組"
        "userid":1,
        "username":"產品經理"

    }
]

inWhere 查詢 inWhere()

Table 1: User

id	name	title
1	張三	產品經理
2	李四	工程師
3	王五	運維工程師

Table 2: Project

id	name	users
1	小程序開發組	["1","2","3"]
2	網頁開發組	["1", "3"]

var table = app.xpm.require('Table', 'Project');
table.query()
    .inWhere('users', 'User', 'id', '*' )
    .limit(1)  
.fetch('User.id as userid', 'User.name as username', 'Project.*').then(function(data) {  
    console.log( '查詢結果', data ); 
})

返回值

[
    {
        "id":1,
        "name":"小程序開發組"
        "users":[
            {
                "id":1,
                "name":"張三",
                "title":"產品經理"
            }
            ...
        ]

    }
]

5. 微信支付 ( Pay )

發起支付 request();

var pay = app.xpm.require('Pay');
pay.request({
    total_fee:500,  // 單位分
    body:'算命、服務器開光',
    attach:'HELLO XpmJS.com', 
    detail:'{id:888,desp:"算命,抽SSR,贈送服務器開光"}'
}).then(function( data ){
    console.log('Request Pay Success', data );
}).catch( function( excp){
    console.log('Request Pay Failure', excp );
});

雲端事件 before(), success(), fail(), complete() (xpmjs-server 1.0rc4+)

pay.before('create', {  // 建立充值記錄 (統一下單成功後, 發起支付前, 在雲端運行 )
    'table':'income',
    'data': {
        sn:'{{sn}}',
        order_sn: data.order.sn,
        uid:data.order.uid,
        amount:data.order.sale_price,
        amount_free:0,
        status:'PENDING',
        status_tips:"F請求付款"
    }
})

.order({   // 生成訂單  ( 統一下單接口, 僅設定並不發送請求 )
    total_fee:data.order.sale_price,  // 單位分
    body:data.order.show_name,
    attach:'attach user is ' + mid,  // 應該是當前登陸用戶的 ID 
    detail:data
})

.success('update', { // 更新充值記錄 （ 支付成功後回調，在雲端運行 ）
    'table':'income',
    'data': {
        sn:'{{sn}}',
        status:'DONE',
        status_tips:"income status_tips field"
    },
    'unique':'sn'
})

.success('app', {   // 調用APP 示例 （ 支付成功後回調，在雲端運行 ）
    'name':'xapp',
    'api':['ticket','index',{sn:'{{sn}}','status_tips':"{{0.status_tips}}"}],
    'data': {
        sn:'{{sn}}',
        status:'DONE'
    }
})

.success('update', {  // 更新訂單狀態 （ 支付成功後回調，在雲端運行 ）
    'table':'order',
    'data': {
        _id:oid,
        status:'PENDING'
    }
})

.success('create', {   // 建立消費記錄 （ 支付成功後回調，在雲端運行 ）
    'table':'payout',
    'data': {
        sn:'{{sn}}',
        order_sn: data.order.sn,
        uid:data.order.uid,
        amount:data.order.sale_price,
        amount_free:0,
        status:'DONE',
        status_tips:"F請求付款"
    }
})

.request().then(function( payResp  ) {  // 發起請求
    console.log( payResp );
})

6. 本地存儲 ( Stor )

var stor = app.xpm.require('Stor');
stor.setSync('key','value');
console.log(stor.getSync('key'));

stor.setMapSync('map_name', 'key', 'value');
console.log(stor.getMapSync('map_name','key'));

7. 雲端應用 ( App ) (xpmjs-server 1.0rc3+)

調用示例

var xapp = app.xpm.require('App', 'xapp' );  // xapp 應用名稱

xapp.api( 'ticket', 'available' )  // ticket 控制器  available 方法名

.post({
    'train_date':'2017-01-26',
    'from_station':'BJP',
    'to_station':'SHH'
})

.then( function( resp ) {
  console.log('POST RESP:', resp );
})

.catch( function( excp ) {
  console.log('POST EXCP:', excp );
});

XpmJS 雲端應用開發

參考雲端應用 Demo <火車票餘票查詢接口實現>

https://git.oschina.net/xpmjs/xapp

8. 雲端隊列 ( Que.js ) (xpmjs-server 1.0rc4+)

var que = app.xpm.require('Que', 'hello');
que.select('world').push('create', {  // 增長數據
    table:'payout',
    data: {
        sn:'200193',
        order_sn:'test29993',
        amount:100,
        status:'DONE'
    }
}).push('update', { // 更新數據
    table:'order',
    data: {
        sn:'148457330261256',
        status_tips:'{{0.sn}} {{0.status}}'
    },
    unique:'sn'
}).push('app', {   // 調用APP 示例
    'name':'xapp',
    'api':['ticket','index',{sn:'{{0.sn}}'}],
    'data': {
        sn:'{{0.sn}} {{1.sn}}',
        status:'DONE'
    }
}).run().then(function(resp){
    console.log( 'Response', resp );
})
.catch(function(excp){
    console.log( 'Error', excp );
})

9. 文件上傳 Utils.upload & App.upload (xpmjs-server 1.0+)

上傳文件到騰訊雲對象存儲

var qcloud = app.xpm.require('app', 'xqcloud');
qcloud.api("cos",'upload')

.upload( tempFilePaths[0] )
.then(function(data){
    that.setData({
        'rs.corver':data.access_url,
        'rs.images':[data.access_url]
    });
})
.catch( function(excp){
    console.log('Upload Fail', excp );
});

10. 經常使用方法 ( Utils )

請求網址 ( Utils.fetch ) (xpmjs-server 1.0rc3+)

var utils = app.xpm.require('Utils' );  

utils.fetch( 'http://qcloud.com' ).then( function( resp ) {    
    console.log('FETCH RESP:', resp );
})

.catch( function( excp ) {
  console.log('FETCH EXCP:', excp );
});

生成二維碼圖片 ( Utils.qrImageUrl ) (xpmjs-server 1.0+)

返回二維碼圖片地址

var utils = app.xpm.require('Utils' ); 
var url = utils.qrImageUrl('hello world', {size:200});
console.log( url );

生成小程序頁面二維碼 ( Utils.qrcode ) ( xpmjs-server 1.0 )

var utils = app.xpm.require('Utils' ); 
var url = utils.qrcode('/page/detail?id=1');
console.log( url );

3、微信小程序 Demo

小程序 Demo 源碼

4、安裝配置

1. 雲端配置

【安裝後端程序】

推薦使用騰訊雲（訪問微信接口快, 能夠免費申請 Https 證書）

方法1: 使用腳本安裝（ 目前僅支持 Ubuntu 14.04 64 LTS 操做系統 ）

建立一臺雲服務器，選擇 Ubuntu 14.04 64 LTS 操做系統。登陸服務器運行如下腳本。

安裝前，先提早申請 Docker Hub 鏡像申請地址 https://www.daocloud.io/mirror

curl -sSL http://tuanduimao.com/xpmjs-server.sh | sh -s yourdomain.com http://<your id>.m.daocloud.io

方法2: 使用 Docker 安裝

docker run -d --name=xpmjs-server  \
    -e "HOST=yourdomain.com" \
    -v /host/data:/data  \
    -v /host/apps:/apps  \
    -v /host/config:/config  \
    -p 80:80 -p 443:443  \
    tuanduimao/xpmjs-server:1.0

【設置管理員名稱和密碼】

訪問: http://yourdomian.com/setup.php

一、填寫後臺信息

二、填寫管理員信息

【上傳 HTTPS 證書 & 微信支付證書】

訪問：http://yourdomian.com/baas-admin/cert/index 上傳 HTTPS 證書和證書密鑰；如已申請微信支付，建議儘可能上傳支付證書，用於雙向驗證證書和密鑰，確保支付安全。

上傳好證書後，登陸服務器，重啓容器。

docker restart xpmjs-server

訪問： https://yourdomian.com ( 有 "S"，檢查證書是否生效）

【設置小程序配置信息】

訪問： https://yourdomian.com/baas-admin/conf/index ( 有 "S"，填寫小程序和微信支付的信息）

2. 使用 XpmJS

【下載代碼】

使用 Git Bash , 進入小程序項目目錄，運行 git clone 拉去代碼。（也能夠使用 Git 等客戶端 Clone 代碼）

git clone https://git.oschina.net/xpmjs/xpmjs.git xpmjs

克隆成功後的目錄結構爲:

【編寫配置信息】

編輯 app.js 將域名更換爲你的域名。（必須配置好 Https 證書）

App({

  onLaunch: function () {

    var that = this;

    // 建立 xpm 對象
    this.xpm = require('xpmjs/xpm.js').option({
        'app':1,  // 對應後臺 APP 配置，支持5個
        'host':'yourdomian.com',
        'https':'yourdomian.com',
        'wss': 'yourdomian.com/ws-server',
        'table.prefix': 'demo',
        'user.table':'user'
    });

    // 建立全局對象
    this.wss = this.xpm.require('wss');  // 信道
    this.session = this.xpm.require('session');  // 會話
    this.stor = this.xpm.require('stor'); // 存儲

  },

  xpm:null,
  session:null,
  stor:null,
  wss:null
})

建議將 xpm、wss、session、stor 設定爲全局變量。