OSCHINA-MIRROR/xpmjs-xpmjs

XpmJS — облачный SDK для малых программ

Последние обновления:

Поддержка React Native (xpmse 1.6.5+)

import xpm from './xpmjs/xpm.rn';
let host = 'wss.xpmjs.com';
let option = {
    'app':1,
    'host':host,
    'https':host,
    'wss': host + '/ws-server',
    'table.prefix': '{none}',
    "appid": "wx0550a96041cf486c",
    "secret":"151187416275946|0516fa148c2584028ee4a30157bfdc27",
    "user":"/xpmsns/user/user/wxappLogin"
}

xpm.option(option);
export default xpm;

// ...
import xpm from './xpm';
// ...

/**
 * 页面数据驱动
 */
class __data {
  @observable articles = [];
  @observable loading = false;
  @observable curr = null;

  constructor() {
     // mobx.autorun(() => console.log('auto run', this.page));
  }

  fetch( key = null ) {
    this.loading = true;

    let $search = xpm.api('/xpmsns/pages/article/search');
    $search().get({perpage:20, page:2}).then(( resp )=>{
      console.log( resp );
      this.articles = resp;
    }).catch( (excp) => {
      console.log( 'excp:',  excp );
    });
  }
}

Конфигурация обновлена (xpmjs-server 1.5.2+)

var host = 'wss.xpmjs.com';
var option = {
    'app':1,
    'host':host,
    'https':host,
    'wss': host + '/ws-server',
    'table.prefix': 'demo',
    'user.table':'user', 
    "appid": "wx0550a96041cf486c",  // 新增
    "secret":"150698766059529|4990e4107dbfe85c045cf8bbd3508652",  // 服务端  appid & secret
    "user" : "/mina/user/user/wxappLogin" // 新增用户系统 handler api
}

var xpm = require('xpmjs/xpm.js').option(option);

Вызов API облачного приложения (xpmjs-server 1.5.2+)

var $test = app.xpm.api('mina/user/user/test');

$test({hello:'world'}).get()

.then(function(resp){
    console.log( resp );
})
.catch( function(excp){
    console.log('excp', excp);
});

MINA WEB (предварительный просмотр)

Документация: http://book.tuanduimao.com/357326

Что такое XpmJS?

XpmJS может подключаться к любым облачным ресурсам и предоставлять малым программам и мобильным приложениям канал к облачным ресурсам и возможности бэкенда. Это снижает порог входа в разработку и повышает эффективность разработки малых программ. Без необходимости писать код бэкенда можно реализовать функции, такие как вход пользователя, WebSocket-коммуникация, оплата через WeChat, облачные таблицы данных и файловое хранилище. Хотя PHP является лучшим языком программирования, с помощью XpmJS можно обойтись без изучения любого другого языка бэкенда, включая PHP. Можно использовать JavaScript для всего, и даже NodeJS не нужен!

Почему XpmJS?

С точки зрения структуры кода, XpmJS более элегантен, потому что он использует Promise!

XpmJS инкапсулирует часто используемые операции бэкенда и предоставляет панель управления, где одна строка кода может реализовать оплату через WeChat!

Бэкенд размещается на вашем облачном хосте, и вы полностью контролируете данные.

Метод 1: установка одним щелчком мыши

Рекомендуется использовать однокнопочную установку Tencent Cloud (доступ к интерфейсу WeChat быстрее, бесплатный сертификат Https).

Способ 2: установка скрипта

Перед установкой сначала запросите образ Docker Hub заранее. Адрес запроса https://www.daocloud.io/mirror

# Поддерживает Ubuntu 16.04 и 14.04, рекомендуется использовать Ubuntu 16.04 64-разрядную LTS
curl -sSL http://tuanduimao.com/xpmjs-server-1.5.2.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-сервер  \
    -e "HOST=yourdomain.com" \
    -v /host/data:/data  \
    -v /host/apps:/apps  \
    -v /host/config:/config  \
    -p 80:80 -p 443:443  \
    hub.c.163.com/trheyi/xpmse:1.6.2

Обновление XpmJS Server (1.0 ~ 1.5 требует обновления контейнера)

Шаг 1: Скачать код:

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

Шаг 2: Распаковать и обновить:

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

Краткий документ XpmJS

Пользователь (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()

Данные от клиента WeChat (не облачные данные)

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

user.get().then( function( userInfo ) { 
    console.log( 'Чтение успешно', userInfo );
})

.catch( function(
``` **2. Канал (Wss)**

Используя канал Websocket, можно реализовать двустороннюю связь в реальном времени.

**Открыть канал open()**

```javascript
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	Идентификатор пользователя
nickName	Псевдоним WeChat
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()

Мини-программа предоставляет только клиентский API WebSocket, поэтому мини-программа сама по себе не может реализовать сервер WebSocket. Метод wss.listen() используется для получения команд, переданных через канал облачного сервера.

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-сервера, допустимые значения (открыто/закрыто/сообщение/ошибка).

var wss = app.xpm.require('Wss');
wss.bind('open', function(event) {
    console.log('Канал сервера открыт', event);
});

wss.bind('close', function(event) {
    console.log('Канал сервера закрыт', event);
});

3. Сессия (Session)

Сессия разделена на две части: клиентскую и серверную. Идентификаторы сеанса клиента и сервера совпадают. Клиент сохраняет информацию о пользователях, а сервер сохраняет открытый идентификатор и другую конфиденциальную информацию. Для связи с сервером используйте идентификатор сеанса для аутентификации. После проверки сервера идентификатор сеанса не должен передаваться третьим лицам.

Включить сеанс start()

После включения автоматически создаётся идентификатор сеанса.

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

Идентификатор сеанса 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']); **Данные запроса query()**

```javascript
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+)

Таблица 1: User

id	name	title
1	Чжан Сань	менеджер продукта
2	Ли Сы	инженер
3	Ван У	системный инженер

Таблица 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()

Таблица 1: User

id	name	title
1	Чжан Сань	менеджер продукта
2	Ли Сы	инженер
3	Ван У	системный инженер

Таблица 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. Платёж через WeChat (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('Запрос платежа выполнен успешно', data );
}).catch( function( excp){
    console.log('Ошибка при запросе платежа', excp );
});

Облачные события before(), success(), fail(), complete() (xpmjs-server 1.0rc4+)

pay.before('create', {  // Создание записи пополнения (успех создания единого заказа, перед запросом платежа, выполняется на облачном сервере)
    'table':'доход',
    'data': {
        sn:'{{sn}}',
        order_sn: data.order.sn,
        uid:data.order.uid,
        amount:data.order.sale_price,
        amount_free:0,
        status:'ОЖИДАНИЕ',
        status_tips:"F запрос оплаты"
    }
})

.order({   // Создать заказ  ( только установить и не отправлять запрос )
    total_fee:data.order.sale_price,  // единица измерения — юань
    body:data.order.show_name,
    attach:'attach user is ' + mid,  // должен быть текущий идентификатор пользователя, вошедшего в систему
    detail:data
})

.success('update', { // Обновить запись пополнения (после успешной оплаты, выполняется на облачном сервере)
    'table':'доход',
    'data': {
        sn:'{{sn}}',
        status:'ВЫПОЛНЕНО',
        status_tips:"поле status_tips записи дохода"
    },
    'unique':'sn'
})

.success('app', {   // Вызов приложения (после успешной оплаты, выполняется на облачном сервере)
    'name':'xapp',
    'api':['ticket','index',{sn:'{{sn}}','status_tips':"{{0.status_tips}}"}],
    'data': {
        sn:'{{sn}}',
        status:'ВЫПОЛНЕНО'
    }
})

.success('update', {  // Обновить статус заказа (после успешной оплаты, выполняется на облачном сервере)
    'table':'заказ',
    'data': {
        _id:oid,
        status:'ОЖИДАНИЕ'
    }
})

.success('create', {   // Создать запись списания (после успешной оплаты, выполняется на облачном сервере)
    'table':'списание',
    'data': {
        sn:'{{sn}}',
        order_sn: data.order.sn,
        uid:data.order.uid,
        amount:data.order.sale_price,
        amount_free:0,
        status:'ВЫПОЛНЕНО',
        status_tips:"Запрос оплаты F"
    }
})

.request().then(function( payResp  ) {  // Отправить запрос

*Примечание: В тексте запроса присутствуют фрагменты кода на языке JavaScript, которые не были переведены. Это связано с тем, что код содержит специфические конструкции и переменные, значения которых неизвестны.* ```
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+)

Загрузить файл в облако Tencent

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)

Запрос URL (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 );
});

Создание QR-кода изображения (Utils.qrImageUrl) (xpmjs-сервер 1.0+)

Возвращает URL-адрес изображения QR-кода

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

Генерация QR-кода для мини-программы (Utils.qrcode) (xpmjs-сервер 1.0)

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

Три, демонстрация мини-программ WeChat

Демонстрация мини-программы WeChat

Исходный код демонстрации мини-программы

Четыре, установка и настройка

1. Настройка облака

【Установка серверной программы】

Рекомендуется использовать облако Tencent (доступ к интерфейсу WeChat быстрый, можно бесплатно запросить сертификат Https)

Метод 1: Установка с использованием скрипта (в настоящее время поддерживает операционную систему Ubuntu 16.04/14.04 64 LTS)

Создайте облачный сервер и выберите операционную систему Ubuntu 16.04/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/_a/baas-admin/cert/index Загрузите сертификат HTTPS и закрытый ключ; если вы уже подали заявку на оплату через WeChat, рекомендуется загрузить сертификат оплаты, который используется для двусторонней аутентификации сертификата и закрытого ключа, чтобы обеспечить безопасность оплаты.

После загрузки сертификата перезапустите контейнер.

docker restart xpmjs-server

Доступ: 【设置小程序配置信息】

Доступ: https://yourdomian.com/_a/baas-admin/conf/index (есть «S», заполнить информацию о мини-программе и платежах через WeChat).

Использование XpmJS

Скачать код

С помощью Git Bash перейдите в каталог проекта мини-программы и запустите команду git clone для загрузки кода. (Также можно использовать Git или другой клиент для клонирования кода).

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

После успешного клонирования структура каталога будет выглядеть следующим образом:

Написать конфигурационную информацию

Отредактируйте файл app.js и замените доменное имя на ваше собственное. (Обязательно настройте сертификат Https).

Пример кода на JavaScript:

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 как глобальные переменные. Дополнительные примеры см. в мини-программе Demo.

Пять, XpmJS группа общения в WeChat

Группа общения разработчиков мини-программ XpmJS в WeChat.

Шесть, F.A.Q.

Информация будет дополнена позже.