"page/API/pages/get-user-info/get-user-info", "page/API/pages/request-payment/request-payment", "page/API/pages/share/share", "page/API/pages/custom-message/custom-message", "page/API/pages/template-message/template-message", "page/API/pages/set-navigation-bar-title/set-navigation-bar-title", "page/API/pages/navigation-bar-loading/navigation-bar-loading", "page/API/pages/navigator/navigator", "page/API/pages/pull-down-refresh/pull-down-refresh", "page/API/pages/animation/animation", "page/API/pages/action-sheet/action-sheet", "page/API/pages/modal/modal", "page/API/pages/toast/toast", "page/API/pages/get-network-type/get-network-type", "page/API/pages/get-system-info/get-system-info", "page/API/pages/on-compass-change/on-compass-change", "page/API/pages/make-phone-call/make-phone-call", "page/API/pages/scan-code/scan-code",
"page/API/pages/upload-file/upload-file", "page/API/pages/download-file/download-file",
"page/API/pages/file/file", "page/API/pages/on-accelerometer-change/on-accelerometer-change", "page/API/pages/canvas/canvas", "page/API/pages/background-audio/background-audio", "page/API/pages/video/video", "page/API/pages/get-location/get-location", "page/API/pages/open-location/open-location", "page/API/pages/choose-location/choose-location", "page/API/pages/storage/storage" "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "演示", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "page/component/index", "iconPath": "image/icon_component.png", "selectedIconPath": "image/icon_component_HL.png", "text": "组件" }, { "pagePath": "page/API/index", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png", "text": "接口" "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 "debug": false}
font-size: 32rpx; font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;.page-head{ padding: 60rpx 50rpx 80rpx; text-align: center;.page-head-title{ display: inline-block; padding: 0 40rpx 20rpx 40rpx; font-size: 32rpx; color: #BEBEBE;.page-head-line{ margin: 0 auto; width: 150rpx; height: 2rpx; background-color: #D8D8D8;.page-head-desc{ padding-top: 20rpx; color: #9B9B9B; font-size: 32rpx;.page-body { width: 100%; flex-grow: 1; overflow-x: hidden;.page-body-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%;.page-body-wording { text-align: center; padding: 200rpx 100rpx;.page-body-info { display: flex; flex-direction: column; align-items: center; background-color: #fff; width: 100%; padding: 50rpx 0 150rpx 0;.page-body-title { margin-bottom: 100rpx; font-size: 32rpx;.page-body-text { font-size: 30rpx; line-height: 26px; color: #ccc;.page-body-text-small { font-size: 24rpx; color: #000; margin-bottom: 100rpx;.page-foot{ margin: 100rpx 0 30rpx 0; text-align: center; color: #1aad19; font-size: 0;.icon-foot{ width: 152rpx; height: 23rpx;.page-section{ width: 100%; margin-bottom: 60rpx;.page-section_center{ display: flex; flex-direction: column; align-items: center;.page-section:last-child{ margin-bottom: 0;.page-section-gap{ box-sizing: border-box; padding: 0 30rpx;.page-section-spacing{ box-sizing: border-box; padding: 0 80rpx;.page-section-title{ font-size: 28rpx; color: #999999; margin-bottom: 10rpx; padding-left: 30rpx; padding-right: 30rpx;.page-section-gap .page-section-title{ padding-left: 0; padding-right: 0;.page-section-ctn{/* widget */.btn-area{ margin-top: 60rpx; box-sizing: border-box; width: 100%; padding: 0 30rpx;.image-plus { width: 150rpx; height: 150rpx; border: 2rpx solid #D9D9D9; position: relative;.image-plus-nb{ border: 0;.image-plus-text{ color: #888888; font-size: 28rpx;.image-plus-horizontal { position: absolute; top: 50%; left: 50%; background-color: #d9d9d9; width: 4rpx; height: 80rpx; transform: translate(-50%, -50%);.image-plus-vertical { position: absolute; top: 50%; left: 50%; background-color: #d9d9d9; width: 80rpx; height: 4rpx; transform: translate(-50%, -50%);.demo-text-1{ position: relative; align-items: center; justify-content: center; background-color: #1AAD19; color: #FFFFFF; font-size: 36rpx;.demo-text-1:before{ content: 'A'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);.demo-text-2{ position: relative; align-items: center; justify-content: center; background-color: #2782D7; color: #FFFFFF; font-size: 36rpx;.demo-text-2:before{ content: 'B'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);.demo-text-3{ position: relative; align-items: center; justify-content: center; background-color: #F1F1F1; color: #353535; font-size: 36rpx;.demo-text-3:before{ content: 'C'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
// 此处主机域名是腾讯云解决方案分配的域名// 小程序后台服务解决方案：https://www.qcloud.com/solution/lavar host = "14592619.qcloud.la"var config = { // 下面的地址配合云端 Server 工作 host, // 登录地址，用于建立会话 loginUrl: `https://$${host}/login`, // 测试的请求地址，用于测试会话 requestUrl: `https://$${host}/testRequest`, // 用code换取openId openIdUrl: `https://$${host}/openid`, // 测试的信道服务接口 tunnelUrl: `https://$${host}/tunnel`, // 生成支付订单的接口 paymentUrl: `https://$${host}/payment`, // 发送模板消息接口 templateMessageUrl: `https://$${host}/templateMessage`, // 上传文件接口 uploadFileUrl: `https://$${host}/upload`, // 示例图片接口 downloadExampleUrl: `https://$${host}/static/weapp.jpg`module.exports = config
function formatLocation(longitude, latitude) { if (typeof longitude === 'string' typeof latitude === 'string') { longitude = parseFloat(longitude) latitude = parseFloat(latitude) longitude = longitude.toFixed(2) latitude = latitude.toFixed(2) return { longitude: longitude.toString().split('.'), latitude: latitude.toString().split('.')module.exports = { formatTime: formatTime, formatLocation: formatLocation}
ERR_WX_LOGIN_FAILED: 'ERR_WX_LOGIN_FAILED', ERR_WX_GET_USER_INFO: 'ERR_WX_GET_USER_INFO', ERR_LOGIN_TIMEOUT: 'ERR_LOGIN_TIMEOUT', ERR_LOGIN_FAILED: 'ERR_LOGIN_FAILED', ERR_LOGIN_SESSION_NOT_RECEIVED: 'ERR_LOGIN_MISSING_SESSION', ERR_INVALID_SESSION: 'ERR_INVALID_SESSION', ERR_CHECK_LOGIN_FAILED: 'ERR_CHECK_LOGIN_FAILED',};
header[constants.WX_HEADER_ID] = session.id; header[constants.WX_HEADER_SKEY] = session.skey; return header; * @class * 表示请求过程中发生的异常var RequestError = (function () { function RequestError(type, message) { Error.call(this, message); this.type = type; this.message = message; RequestError.prototype = new Error(); RequestError.prototype.constructor = RequestError; return RequestError;})();function request(options) { if (typeof options !== 'object') { var message = '请求传参应为 object 类型，但实际传了 ' + (typeof options) + ' 类型'; throw new RequestError(constants.ERR_INVALID_PARAMS, message); var requireLogin = options.login; var success = options.success || noop; var fail = options.fail || noop; var complete = options.complete || noop; var originHeader = options.header || {}; // 成功回调 var callSuccess = function () { success.apply(null, arguments); complete.apply(null, arguments); // 失败回调 var callFail = function (error) { fail.call(null, error); complete.call(null, error); // 是否已经进行过重试 var hasRetried = false; if (requireLogin) { doRequestWithLogin(); } else { doRequest(); // 登录后再请求 function doRequestWithLogin() { loginLib.login({ success: doRequest, fail: callFail }); // 实际进行请求的方法 function doRequest() { var authHeader = buildAuthHeader(Session.get()); wx.request(utils.extend({}, options, { header: utils.extend({}, originHeader, authHeader), success: function (response) { var data = response.data; // 如果响应的数据里面包含 SDK Magic ID，表示被服务端 SDK 处理过，此时一定包含登录态失败的信息 if (data data[constants.WX_SESSION_MAGIC_ID]) { // 清除登录态 Session.clear(); var error, message; if (data.error === constants.ERR_INVALID_SESSION) { // 如果是登录态无效，并且还没重试过，会尝试登录后刷新凭据重新请求 if (!hasRetried) { hasRetried = true; doRequestWithLogin(); return; message = '登录态已过期'; error = new RequestError(data.error, message); } else { message = '鉴权服务器检查登录态发生错误(' + (data.error || 'OTHER') + ')：' + (data.message || '未知错误'); error = new RequestError(constants.ERR_CHECK_LOGIN_FAILED, message); callFail(error); return; callSuccess.apply(null, arguments); fail: callFail, complete: noop, }));module.exports = { RequestError: RequestError, request: request,};
var constants = require('./constants');var SESSION_KEY = 'weapp_session_' + constants.WX_SESSION_MAGIC_ID;var Session = { get: function () { return wx.getStorageSync(SESSION_KEY) || null; set: function (session) { wx.setStorageSync(SESSION_KEY, session); clear: function () { wx.removeStorageSync(SESSION_KEY);module.exports = Session;exports.extend = function extend(target) { var sources = Array.prototype.slice.call(arguments, 1); for (var i = 0; i sources.length; i += 1) { var source = sources[i]; for (var key in source) { if (source.hasOwnProperty(key)) { target[key] = source[key]; return target;};
wx.onSocketClose(result = onClose(result)); wx.onSocketMessage(result = onMessage(result)); wx.onSocketError(error = onError(error));listen(null);bind();module.exports = { listen };
[](https://travis-ci.org/tencentyun/wafer-client-sdk)[](https://coveralls.io/github/tencentyun/wafer-client-sdk?branch=master)[](LICENSE)本 项目是 [Wafer](https://github.com/tencentyun/wafer-solution) 的组成部分，为小程序客户端开发提供 SDK 支持会话服务和信道服务。## SDK 获取与安装解决方案[客户端 Demo](https://github.com/tencentyun/wafer-client-demo) 已经集成并使用最新版的 SDK，需要快速了解的可以从 Demo 开始。如果需要单独开始，本 SDK 已经发布为 bower 模块，可以直接安装到小程序目录中。```shnpm install -g bowerbower install qcloud-weapp-client-sdk安装之后，就可以使用 `require` 引用 SDK 模块：```jsvar qcloud = require('./bower_components/qcloud-weapp-client-sdk/index.js');## 会话服务[会话服务](https://github.com/tencentyun/wafer-solution/wiki/%E4%BC%9A%E8%AF%9D%E6%9C%8D%E5%8A%A1)让小程序拥有会话管理能力。### 登录登录可以在小程序和服务器之间建立会话，服务器由此可以获取到用户的标识和信息。```jsvar qcloud = require('./bower_components/qcloud-weapp-client-sdk/index.js');// 设置登录地址qcloud.setLoginUrl('https://199447.qcloud.la/login');qcloud.login({ success: function (userInfo) { console.log('登录成功', userInfo); fail: function (err) { console.log('登录失败', err);本 SDK 需要配合云端 SDK 才能提供完整会话服务。通过 [setLoginUrl](#setLoginUrl) 设置登录地址，云服务器在该地址上使用云端 SDK 处理登录请求。 `setLoginUrl` 方法设置登录地址之后会一直有效，因此你可以在微信小程序启动时设置。登录成功后，可以获取到当前微信用户的基本信息。### 请求如果希望小程序的网络请求包含会话，登录之后使用 [request](#request) 方法进行网络请求即可。```jsqcloud.request({ url: 'http://199447.qcloud.la/user', success: function (response) { console.log(response); fail: function (err) { console.log(err);如果调用 `request` 之前还没有登录，则请求不会带有会话。`request` 方法也支持 `login` 参数支持在请求之前自动登录。```js// 使用 login 参数之前，需要设置登录地址qcloud.setLoginUrl('https://199447.qcloud.la/login');qcloud.request({ login: true, url: 'http://199447.qcloud.la/user', success: function (response) { console.log(response); fail: function (err) { console.log(err);关于会话服务详细技术说明，请参考 [Wiki](https://github.com/tencentyun/wafer-solution/wiki/%E4%BC%9A%E8%AF%9D%E6%9C%8D%E5%8A%A1)。## 信道服务[信道服务](https://github.com/tencentyun/wafer-solution/wiki/%E4%BF%A1%E9%81%93%E6%9C%8D%E5%8A%A1)小程序支持利用腾讯云的信道资源使用 WebSocket 服务。```js// 创建信道，需要给定后台服务地址var tunnel = this.tunnel = new qcloud.Tunnel('https://199447.qcloud.la/tunnel');// 监听信道内置消息，包括 connect/close/reconnecting/reconnect/errortunnel.on('connect', () = console.log('WebSocket 信道已连接'));tunnel.on('close', () = console.log('WebSocket 信道已断开'));tunnel.on('reconnecting', () = console.log('WebSocket 信道正在重连...'));tunnel.on('reconnect', () = console.log('WebSocket 信道重连成功'));tunnel.on('error', error = console.error('信道发生错误：', error));// 监听自定义消息（服务器进行推送）tunnel.on('speak', speak = console.log('收到 speak 消息：', speak));// 打开信道tunnel.open();// 发送消息tunnel.emit('speak', { word: "hello", who: { nickName: "techird" }});// 关闭信道tunnel.close();信道服务同样需要业务服务器配合云端 SDK 支持，构造信道实例的时候需要提供业务服务器提供的信道服务地址。通过监听信道消息以及自定义消息来通过信道实现业务。关于信道使用的更完整实例，建议参考客户端 Demo 中的[三木聊天室应用源码](https://github.com/tencentyun/wafer-client-demo/blob/master/pages/chat/chat.js)。关于信道服务详细技术说明，请参考 [Wiki](https://github.com/tencentyun/wafer-solution/wiki/%E4%BF%A1%E9%81%93%E6%9C%8D%E5%8A%A1)。## API
|参数 |类型 |说明|-------------|---------------|--------------|loginUrl |string |会话服务登录地址### login登录，建立微信小程序会话。#### 语法```jsqcloud.login(options);#### 参数|参数 |类型 |说明|-------------|---------------|--------------|options |PlainObject |会话服务登录地址|options.success | () = void | 登录成功的回调|options.error | (error) = void | 登录失败的回调
|参数 |类型 |说明|-------------|---------------|--------------|options |PlainObject | 会话服务登录地址|options.login | bool | 是否自动登录以获取会话，默认为 false|options.url | string | 必填，要请求的地址|options.header | PlainObject | 请求头设置，不允许设置 Referer|options.method | string | 请求的方法，默认为 GET|options.success | (response) = void | 登录成功的回调。 ul li `response.statusCode`：请求返回的状态码 /li li `response.data`：请求返回的数据 /li /ul |options.error | (error) = void | 登录失败的回调|options.complete | () = void | 登录完成后回调，无论成功还是失败### Tunnel表示一个信道。由于小程序的限制，同一时间只能有一个打开的信道。#### constructor##### 语法```jsvar tunnel = new Tunnel(tunnelUrl);#### 参数|参数 |类型 |说明|-------------|---------------|--------------|tunnelUrl |String | 会话服务登录地址
|参数 |类型 |说明|-------------|---------------|--------------|type |string | 监听的事件类型|listener |(message?: any) = void | 监听器，具体类型的事件发生时调用监听器。如果是消息，则会有消息内容。##### 事件|事件 |说明|-------------|-------------------------------|connect |信道连接成功后回调|close |信道关闭后回调|reconnecting |信道发生重连时回调|reconnected |信道重连成功后回调|error |信道发生错误后回调|[message] |信道服务器推送过来的消息类型，如果消息类型和上面内置的时间类型冲突，需要在监听的时候在消息类型前加 `@`|* |监听所有事件和消息，监听器第一个参数接收到时间或消息类型#### open打开信道，建立连接。由于小程序的限制，同一时间只能有一个打开的信道。##### 语法```jstunnel.open();#### emit向信道推送消息。##### 语法```jstunnel.emit(type, content);##### 参数|参数 |类型 |说明|-------------|---------------|--------------|type |string | 要推送的消息的类型|content |any | 要推送的消息的内容#### close##### 语法```jstunnel.close();## LICENSE[MIT](LICENSE)