http://www.ox-holdings.com

过程可以参考下面的视频新匍京a奥门,这是未来

摘要为了让大家的小程序都能顺利“聊”起来,环信小程序Demo源码也于今日正式发布,也许在“用完即走”基础上“聊两句再走”也是极好的哦!同时,环信工程师们还贴心的为大家准备好了集成使用教程视频,手把手教你玩转小 ...环信小程序Demo视频微信小程序 Demo 介绍环信准备了微信小程序 Demo,该 Demo 基于 Web IM SDK,并在其基础之上进行了修改。如果您想在您的微信小程序中添加即时通讯的功能,可以参考以下方式集成。小程序运行效果Demo源码下载GitHub下载地址: clone windows 64、windows 32、mac 版本。微信开发者文档: ... .html“开发者工具”下载地址: ... 01715配置服务器地址登录微信小程序账户,配置以下服务器地址:request合法域名 wss://im-api.easemob.comuploadFile合法域名 Demo使用“微信web开发者工具”打开微信小程序 Demo,步骤如下:打开“微信web开发者工具”,使用微信扫一扫授权登录。选择“本地小程序项目 → 添加项目”。填写AppID、项目名称(自定义)、项目目录(本地代码路径),并点击“添加项目”。进入“微信小程序Demo”项目后,可以对项目进行编辑、调试。

2016年9月22日凌晨,微信宣布“小程序”问世,妈的,论坛,博客全是小程序,昨天当之无愧抢了头条,当然只是开始内测了,微信公众平台对200个服务号发送了小程序内测邀请。那么什么是“小程序”呢,来看微信之父怎么说

准备域名和证书

任务时间:20min ~ 40min

小程序后台服务需要通过 HTTPS 访问,在实验开始之前,我们要准备域名和 SSL 证书。

新匍京a奥门 1

2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅。个大新闻、论坛都在讨论这个事情。

新匍京a奥门 2

域名注册

如果您还没有域名,可以在腾讯云上选购,过程可以参考下面的视频:

  • 视频 - 在腾讯云上购买域名

缺少发送文件功能的聊天界面

作为互联网的一猿,我们怎能不紧跟时代的脚步。于是第二天上午也对微信发布的“小程序” 进一步的做了相关了解。

看完之后,相信大家大概都有些明白了吧,对于开发者来说或许都有些小激动吧,毕竟多关注一些新东西没什么不好。那么问题是“小程序”只有200个内测账号,怎么办?还好,天朝的人才太多了,在消息发布后的几小时内网上已经出了IDE的破解版,废话不多说,看配置步骤:

域名解析

域名购买完成后, 需要将域名解析到实验云主机上,实验云主机的 IP 为:
<您的 CVM IP 地址>

在腾讯云购买的域名,可以到控制台添加解析记录,过程可参考下面的视频:

  • 视频 - 如何在腾讯云上解析域名

域名设置解析后需要过一段时间才会生效,通过 ping
命令检查域名是否生效 [?]
,如:
ping www.yourmpdomain.com

如果 ping 命令返回的信息中含有你设置的解析的 IP 地址,说明解析成功。

注意替换下面命令中的 www.yourmpdomain.com为您自己的注册的域名

导语

环信官方IOS版Demo功能很强大,却没有实现【发送文件】的功能。但是我们在实际项目开发中,用户之间经常需要在聊天窗口发送文件。所以,本文主要介绍在IOS版APP中,如何结合iCloud Drive一步步实现【发送文件】和【预览文件】的功能。

新匍京a奥门 3

发送iCloud文件

很多人问我这是什么?

1.  IDE下载

申请 SSL 证书

腾讯云提供了 SSL 证书的免费申请,申请方式可参考下面视频:

  • 视频 - 在腾讯云上申请 SSL 证书

申请提交后,审批结果会以短信的形式通知。审批通过后,可以到 SSL 控制台下载您的证书文件,可参考下面的视频:

  • 视频 - 在腾讯云上下载 SSL 证书

一、认识iCloud Drive

我一般回答:这是未来。

MAC版链接: 密码: fk8p

搭建小程序开发环境

任务时间:15min ~ 30min

在开始搭建我们的小程序服务器之前,需要先完成客户端小程序开发环境的搭建。

iCloud官方文档

这里可以看到iCloud的一些官方介绍以及使用方式,刚开始暂时不必要深入了解。
iCloud Drive, 各类文件,在你的各种设备呈现
http://www.apple.com/cn/icloud/icloud-drive/

iCloud Drive 常见问题
https://support.apple.com/zh-cn/HT201104

安装教程

关于使用教程网上已经有非常多的教程了,我在这里也不过多赘述,就简单的介绍一下。

想要快速的学习及开发微信的“小程序”(虽然它还没正式发布)我们首先需要一个“微信web开发着工具”这么一个软件,windows版与Mac版都有。注意,是0.9及以上的版本,0.7版本无法运行。

Mac版下载地址:wechat_web_devtools_0.9.092100.dmg
windows下载地址:wechat_web_devtools_0.9.092100_x64.exe

Mac的安装方式很简单,与普通应用的安装方式一样。

  1. 打开下载好用dmg文件

  2. 把"微信web开发者工具"拖进Application就算是安装完成了

  3. 依次打开"系统便好设置"->"安全与隐私"->"点按锁按钮以进行更改"->选择"任何来源"

  4. 根据提示点"是"、"打开" 然后就可以正常的打开应用了

以下是截图:

新匍京a奥门 4

新匍京a奥门 5

先用自己的开发者账号扫一下二维码登陆“微信开web发者工具”,登陆成功后会出现一下界面:

新匍京a奥门 6

(我已经添加过了,所以不用在意这些细节)

点击“添加项目”

这是会提示输入AppId、项目名称、及项目地址, 如下图

新匍京a奥门 7

什么是AppID?

注意:这里的App ID不是原来开发者帐号的那个App ID。

众所周知,腾讯只给发了200个开发者账号,那像咱们这种没有资格的怎么办?

我们是猿诶,在不影响他人利益的情况下当然选择破解。

题外话:

听说开发者帐号已经吵到300万了,不知道是真的还是假的!

  1. 每个用户只能有20个“小程序”

  2. “小程序”不能打开第三方应用

  3. 每个应用开发完后打包提交给微信进行审核

  4. 应用是在微信的服务器的

  5. 无法独立出一个独立的应用,只能在微信上使用

然后点"添加项目"就完成了一个项目的创建。

新匍京a奥门 8

Win版链接: 密码: d55b

注册开发者账号

如果你还不是小程序开发者,请先在微信公众平台并注册:
具体注册流程可参考如下视频:

  • 视频 - 注册开发者账号

若您已注册,请点击下一步。

为什么我们要用iCloud Drive

由于受ios系统的限制(越狱的iphone当然不受限制),app并不能直接访问系统中的文件,所以只能通过iCloud Drive选取文件。

破解方法

windows与mac的破解方法基本相同,这里只以mac为例

先关闭开发者工具

下载这两个JS文件,分别替换各个目录中的文件

文件1: createstep.js
文件2: projectStores.js

替换的路径

  1. createstep.js ->/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/components/create/createstep.js

  2. projectStores.js ->/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/stroes/projectStores.js

替换完后启动应用,然后输入App ID(随便输入一个就行了)然后项目名、路径等。

这样就可以真正进入开发界面了。

注意:按照网上的教程需要重新启动一下“微信web开发者工具”原因可能是使用某些功能的时候会提示AppId未注册。

网上有一个微信Demo,也不知道是不是微信官方的,里边有大量的例子。

demo下载:demo.zip

这是一个比较全的demo,包含了大部份功能,及微信所开放的api。

新匍京a奥门 9

点击关闭退出到项目选择页面,然后选择“添加应用”与上面方法相同,注意,“项目路径”选择刚刚所下载的“Demo” 让后启动,就可以体验大量demo了。

2.  破解。下载链接: 密码: irr1

配置小程序服务器信息

登录微信公众平台后,依次进入 设置- 开发设置- 服务器域名 - 修改。

扫码完成身份校验后,request 合法域名和 socket 合法域名均填写在上一步准备好的域名地址。
配置完成后,点击 保存并提交

。您可以点击如下视频查看如何进行配置:

  • 视频 - 配置小程序服务器信息

二、配置项目支持iCloud Drive

我们以环信官方Demo项目为例进行示范操作,V3.3.0版Demo完整源码下载地址:
http://www.easemob.com/download/im

1.下载完项目后,用Xcode打开ChatDemo-UI3.0.xcodeproj,然后更改项目的【Bundle Identifier】为【com.easemob.enterprise.demo.ui.dabiaoge】(自己设置一个独一无二的),并且选择相应的开发证书:

为项目设置一个独一无二的【Bundle Identifier】,才能确保在appstore开发者账户下启用iCloud功能。

新匍京a奥门 10

Paste_Image.png

2.授权APP使用iCloud服务:选中【Capabilities】标签,点击开关启用【iCloud】服务,勾选【Services】组中的【iCloud Documents】项,下面的容器【Containers】项会自动选上,如下图所示:

新匍京a奥门 11

授权iCloud服务

授权与容器

容器是存放在服务器的保存所有app数据的一个概念性位置,分为公有数据库与私有数据库。

新匍京a奥门 12

3.在plist文件中增加配置项:用【Source Code】方式打开项目中的【ChatDemo-UI3.0-Info.plist】文件,在文件末尾新增如下配置:

    <key>com.apple.developer.icloud-container-identifiers</key>
    <array>
        <string>iCloud.$(CFBundleIdentifier)</string>
    </array>
    <key>com.apple.developer.ubiquity-container-identifiers</key>
    <array>
        <string>$(AppIdentifierPrefix)$(CFBundleIdentifier)</string>
    </array>
    <key>com.apple.developer.ubiquity-kvstore-identifier</key>
    <string>$(AppIdentifierPrefix)$(CFBundleIdentifier)</string>

写一个hello world!

一般有三个文件:

  1. .wxml 相当于html与xml的结合体

  2. .js 就是js文件

  3. .wxss 某种css

需要注意的是目前小应用暂时不支持其他插件比如jQuery啥的。

选择"编辑"选项卡, 打开/pages/index/index.wxml

新匍京a奥门 13

是不是很熟悉,就是html与xml的结合 先不做修改。然后打开 /pages/index/index.js

新匍京a奥门 14

Page函数里的 data 对象里的 motto的值改成Hello Dudulu

bindViewTap 这个方法是绑定的跳转,如果你设置了userInfonickName的值,它将会显示在页面正中央,当你点击"nickName"的时候,它路由跳转到/pages/logs/logs.wxml

改完后回到"调式"选项卡,点击"重启"就可以刷新刚刚所修改的文本了。

运行效果:

新匍京a奥门 15

这里有一个错误,github上已经有修复改错误的方法了,还需要替换一个文件:

  1. 文件3: asdebug.js

替换目录: /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/weapp/appservice/asdebug.js

就可解决以上报错的问题。


已经有大神把微信的官方文档给抓取下来了, 文档地址: http://notedown.cn/weixin/com...


下载完IDE(实际就是微信web开发者工具了)安装,然后需要分别替换以下2个目录文件才能破解

运行配套小程序代码

要运行本实验配套的小程序代码,请下载下列资源:

  • 实验配套源码
  • 微信小程序开发工具

源码下载后,请解压到本地工作目录。
开发工具下载后,请安装并启动,然后用微信扫码登录。
登录后,选择 本地小程序项目- 添加项目,使用以下配置:

  • AppID:填写小程序的 AppID,请登录公众平台后在 设置- 开发设置 - 开发者 ID 中查看
  • 项目名称:填写任意您喜欢的名称
  • 项目目录:选择刚才解压的配套源码目录(目录包含 app.js)

填写完成后,点击 添加项目。具体操作可查看如下视频:

  • 视频 - 运行配套小程序代码

三、实现【发送文件】功能

1.显示【发送文件】按钮:在聊天窗口的扩展面板中增加【发送文件】的按钮。

新匍京a奥门 16

Paste_Image.png

(1).在EaseChatBarMoreView.h增加如下代码:

// 第130行
- (void)moreViewFileTransferAction:(EaseChatBarMoreView *)moreView;

(2).在EaseChatBarMoreView.m增加如下代码,按钮图片文件需自备:

新匍京a奥门 17

按钮图片

// 第47行
@property (nonatomic, strong) UIButton *fileTransterButton;

// 第137行
_fileTransterButton =[UIButton buttonWithType:UIButtonTypeCustom];
[_fileTransterButton setFrame:CGRectMake(insets * 2 + CHAT_BUTTON_SIZE, 10 * 2 + CHAT_BUTTON_SIZE + 10, CHAT_BUTTON_SIZE , CHAT_BUTTON_SIZE)];
[_fileTransterButton setImage:[UIImage imageNamed:@"chatBar_colorMore_file"] forState:UIControlStateNormal];
[_fileTransterButton setImage:[UIImage imageNamed:@"chatBar_colorMore_fileSelected"] forState:UIControlStateHighlighted];
[_fileTransterButton addTarget:self action:@selector(fileTransferAction) forControlEvents:UIControlEventTouchUpInside];
_fileTransterButton.tag = MOREVIEW_BUTTON_TAG + 5;
_maxIndex = 5;
[_scrollview addSubview:_fileTransterButton];

// 第346行
- (void)fileTransferAction
{
    if (_delegate && [_delegate respondsToSelector:@selector(moreViewFileTransferAction:)]) {
        [_delegate moreViewFileTransferAction:self];
    }
}

(3).编译运行项目,进入单聊页面,打开页面底下的扩展面板,就可以看到【发送文件】的按钮已经可以显示出来了。

新匍京a奥门 18

2.点击【发送文件】按钮,使用UIDocumentPickerViewController打开iCloud文档页面:

文件选择控制器(UIDocumentPickerViewController)可以让用户在程序外访问程序的沙盒。是app间共享文件的一种简单方式。它也支持一些复杂方式,比如用户可能在多个app中编辑同一个文件。

文件选择器可以访问多个文件提供者的文件。比如,iClound可以让你访问其他app存储在iClound的文件,第三方开发者也可以提供文件

注意:在mac或者windows系统上往icloud drive传文件时,有时候iphone上不能马上显示最新的文件列表,这时候只要在iphone上注销icloud账号重新登录即可)

(1).在EaseMessageViewController.m页面增加如下代码:

// 第1435行
-(void)moreViewFileTransferAction:(EaseChatBarMoreView *)moreView{

    // 隐藏键盘
    [self.chatToolbar endEditing:YES];

    // ios8+才支持icloud drive功能
    if ([[[UIDevice currentDevice] systemVersion] floatValue] < 8.0) {
        //older than iOS 8 code here
        NSLog(@"IOS8以上才支持icloud drive.");
    } else {
        //iOS 8 specific code here
        NSArray *documentTypes = @[@"public.content", @"public.text", @"public.source-code ", @"public.image", @"public.audiovisual-content", @"com.adobe.pdf", @"com.apple.keynote.key", @"com.microsoft.word.doc", @"com.microsoft.excel.xls", @"com.microsoft.powerpoint.ppt"];

        UIDocumentPickerViewController *documentPicker = [[UIDocumentPickerViewController alloc] initWithDocumentTypes:documentTypes inMode:UIDocumentPickerModeOpen];
        documentPicker.delegate = self;
        documentPicker.modalPresentationStyle = UIModalPresentationFormSheet;
        [self presentViewController:documentPicker animated:YES completion:nil];
    }
}

// 选中icloud里的pdf文件
- (void)documentPicker:(UIDocumentPickerViewController *)controller didPickDocumentAtURL:(NSURL *)url {
    BOOL fileUrlAuthozied = [url startAccessingSecurityScopedResource];
    if(fileUrlAuthozied){
        NSFileCoordinator *fileCoordinator = [[NSFileCoordinator alloc] init];
        NSError *error;

        [fileCoordinator coordinateReadingItemAtURL:url options:0 error:&error byAccessor:^(NSURL *newURL) {

            [self dismissViewControllerAnimated:YES completion:NULL];
            [self sendFileMessageWithURL:newURL displayName:[[url path] lastPathComponent]];
        }];
        [url stopAccessingSecurityScopedResource];
    }else{
        //Error handling

    }
}

// 第2083行
- (void)sendFileMessageWithURL:(NSURL *)url displayName:(NSString*)displayName
{
    id progress = nil;
    if (_dataSource && [_dataSource respondsToSelector:@selector(messageViewController:progressDelegateForMessageBodyType:)]) {
        progress = [_dataSource messageViewController:self progressDelegateForMessageBodyType:EMMessageBodyTypeFile];
    }
    else{
        progress = self;
    }

    EMMessage *message = [EaseSDKHelper sendFileMessageWithURL:url
                                                   displayName:displayName
                                                            to:self.conversation.conversationId
                                                   messageType:[self _messageTypeFromConversationType]
                                                    messageExt:nil];

    [self _sendMessage:message];
}

在EaseSDKHelper.m文件中添加如下代码:

// 第263行
+ (EMMessage *)sendFileMessageWithURL:(NSURL *)url
                          displayName:(NSString*)displayName
                                   to:(NSString *)to
                          messageType:(EMChatType)messageType
                           messageExt:(NSDictionary *)messageExt
{
    NSData *data = [NSData dataWithContentsOfURL:url];
    EMFileMessageBody *body = [[EMFileMessageBody alloc] initWithData:data displayName:displayName];
    NSString *from = [[EMClient sharedClient] currentUsername];
    EMMessage *message = [[EMMessage alloc] initWithConversationID:to from:from to:to body:body ext:messageExt];
    message.chatType = messageType;

    return message;
}

在EaseSDKHelper.h添加如下代码:

// 第187行
+ (EMMessage *)sendFileMessageWithURL:(NSURL *)url
                          displayName:(NSString*)displayName
                                   to:(NSString *)to
                          messageType:(EMChatType)messageType
                           messageExt:(NSDictionary *)messageExt;

在EaseBubbleView+File.m文件中添加如下代码:

// 第80行
UIImageView *img = [UIImageView new];
img.frame = CGRectMake(EaseMessageCellPadding, EaseMessageCellPadding, 30, 30);
img.image = [UIImage imageNamed:@"chatBar_colorMore_file"];
[self.backgroundImageView addSubview:img];

编译运行,效果如下图所示:

新匍京a奥门 19

新匍京a奥门 20

尾巴

咱们这种破解方式显然是不行的,我觉得微信可能会封掉这种方法,所以大家赶紧。

我说它是未来,这个大家自己体会,这次我们不能再错过了。

我们一起加油!

趁微信还没有封掉这种开发方式,趁这股热还在,我得赶紧发。(在地铁上用手机码完,有错别字莫见怪)

  • 微信小程序应用号交流群 563752274

安装目录package.nwappdistcomponentscreatecreatestep.js

设置实验域名

在开发工具的 编辑
面板中,选中 app.js进行编辑,需要修改小程序通信域名[?]
,请参考下面的配置:

App({
    config: {
        host: 'www.yourdomain.com' // 这个地方填写你的域名
    },
    onLaunch () {
        console.log('App.onLaunch()');
    }
});

当然,这步操作也录制了对应的视频:

  • 视频 - 设置实验域名

实验配套源码所用通信域名都会使用该设置,为了您顺利进行实验,请把域名修改为之前步骤准备的域名

四、实现【预览文件】功能

点击聊天窗口中的文件类型消息,使用UIDocumentInteractionController打开文件预览窗口查看文件内容。

文件交互控制器(UIDocumentInteractionController类的实例)为用户提供可接收程序来处理文件,使用起来非常灵活,功能也比较强大。它除了支持同设备上app之间的文档共享外,还可以实现文档的预览、打印、发邮件以及复制。


要使用一个文件交互控制器(UIDocumentInteractionController类的实例),需要以下步骤:

  • 为每个你想打开的文件创建一个UIDocumentInteractionController类的实例;
  • 实现UIDocumentInteractionControllerDelegate代理;
  • 显示预览窗口/显示菜单。

在EaseMessageViewController.m页面增加如下代码:

// 第52行
UIDocumentInteractionController *_fileInteractionController;

// 第872行
// 打开文件
- (void)_fileMessageCellSelected:(id<IMessageModel>)model
{
    _scrollToBottomWhenAppear = NO;
    EMFileMessageBody *body = (EMFileMessageBody*)model.message.body;

    //判断本地路径是否存在
    NSString *localPath = [model.fileLocalPath length] > 0 ? model.fileLocalPath : body.localPath;
    if ([localPath length] == 0) {
        [self showHint:NSLocalizedString(@"message.fileFail", @"file for failure!")];
        return;
    }

    dispatch_block_t block = ^{
        //发送已读回执
        [self _sendHasReadResponseForMessages:@[model.message]
                                       isRead:YES];

        int index = (int)[localPath rangeOfString:@"/" options:NSBackwardsSearch].location;;
        NSString *dir = [localPath substringToIndex:index];
        NSString *newLocalPath = [NSString stringWithFormat:@"%@/%@", dir, model.fileName];

        // 更改文件名
        if (![[NSFileManager defaultManager] fileExistsAtPath:newLocalPath]) {
            NSError *error = nil;
            [[NSFileManager defaultManager] linkItemAtPath:localPath toPath:newLocalPath error:&error];
        }

        [self openFileViewController:newLocalPath];
    };

    if (body.downloadStatus == EMDownloadStatusSuccessed && [[NSFileManager defaultManager] fileExistsAtPath:localPath])
    {
        block();
        return;
    }

    [self showHudInView:self.view hint:@"文件下载中..."];
    __weak EaseMessageViewController *weakSelf = self;
    [[EMClient sharedClient].chatManager downloadMessageAttachment:model.message progress:nil completion:^(EMMessage *message, EMError *error) {
        [weakSelf hideHud];
        if (!error) {
            block();
        }else{
            [weakSelf showHint:NSEaseLocalizedString(@"message.videoFail", @"video for failure!")];
        }
    }];
}

// 打开文件
-(void)openFileViewController:(NSString *) file_url  {

    NSURL *file_URL = [NSURL fileURLWithPath:file_url];

    if (file_URL != nil) {
        if (_fileInteractionController == nil) {
            _fileInteractionController = [[UIDocumentInteractionController alloc] init];

            _fileInteractionController = [UIDocumentInteractionController interactionControllerWithURL:file_URL];
            _fileInteractionController.delegate = self;

        }else {
            _fileInteractionController.URL = file_URL;
        }

        [_fileInteractionController presentPreviewAnimated:YES];
    }
}

- (UIViewController *)documentInteractionControllerViewControllerForPreview:(UIDocumentInteractionController *)controller {
    return self;
}

- (UIView *)documentInteractionControllerViewForPreview:(UIDocumentInteractionController *)controller {
    return self.view;
}

- (CGRect)documentInteractionControllerRectForPreview:(UIDocumentInteractionController *)controller {
    return self.view.frame;
}

// 第1308行
[self _fileMessageCellSelected:model];

// 第45行改为
@interface EaseMessageViewController ()<EaseMessageCellDelegate,UIDocumentPickerDelegate,UIDocumentInteractionControllerDelegate>

点击聊天窗口后,查看文件的效果如下图所示:

新匍京a奥门 21

这样,一个简单的发送、预览文件功能就完成了。

安装目录package.nwappdiststroesprojectStores.js

搭建 HTTP 服务

任务时间:15min ~ 30min

下面的步骤,将带大家在服务器上使用 Node 和 Express 搭建一个 HTTP 服务器

技巧:如何参考代码实现功能

在百度网盘中下载本项目的完整源码,然后在xcode中打开项目,全局搜索【add by martin】,即可找到作者增加的相关代码。
https://pan.baidu.com/s/1c269Znq

如有问题,请加入【环信互帮互助群】(群号:340452063)提问。

3.  完成。来看界面:

安装 NodeJS

使用下面的命令安装 NodeJS

sudo apt-get update  
sudo wget https://mc.qcloudimg.com/static/archive/262420521a966befe17dfa0070ddb272/node-v6.11.0.tar.gz
sudo tar xvf node-v6.11.0.tar.gz
cd node-v6.11.0
sudo ./configure
sudo make
sudo make install  
sudo cp /usr/local/bin/node /usr/sbin/

安装完成后,使用下面的命令测试安装结果

node -v

编写 HTTP Server 源码
使用下面的命令在服务器创建一个工作目录:

sudo mkdir -p /data/release/webapp

进入此工作目录

cd /data/release/webapp

在工作目录创建 package.json 文件,并修改文件的访问权限。

sudo touch package.jsonsudo chmod a+r+w package.json

修改 package.json 添加我们服务器包的名称和版本号,可参考下面的示例。
示例代码:/data/release/webapp/package.json

{
    "name": "webapp",
    "version": "1.0.0"
}

完成后,使用 Ctrl + S
保存文件
在工作目录创建 app.js

cd /data/release/webapp
sudo touch app.js
sudo chmod a+rw app.js

修改 app.js 文件,使用 Express.js 来监听 8765端口,app.js文件可参考下面的示例代码。

示例代码:/data/release/webapp/app.js

// 引用 express 来支持 HTTP Server 的实现
const express = require('express');

// 创建一个 express 实例
const app = express();

// 实现唯一的一个中间件,对于所有请求,都输出 "Response from express"
app.use((request, response, next) => {
    response.write('Response from express');
    response.end();
});

// 监听端口,等待连接
const port = 8765;
app.listen(port);

// 输出服务器启动日志
console.log(`Server listening at http://127.0.0.1:${port}`);

本实验会以 8765 端口的打开作为实验步骤完成的依据,为了后面的实验步骤顺利进行,请不要使用其它端口号

相关文章参考

  • 昵称和头像的显示与更新 http://docs.easemob.com/im/490integrationcases/10nickname
  • android中如何显示开发者服务器上的昵称和头像 http://www.imgeek.org/article/825307856
  • IOS中如何显示开发者服务器上的昵称和头像 http://www.imgeek.org/article/825307855
  • IOS快速集成环信IM - 基于官方的Demo优化,5分钟集成环信IM功能 http://www.imgeek.org/article/825307886
  • 草草们的忧伤:环信IM昵称和头像 http://www.imgeek.org/article/825308536
  • IOS中环信聊天窗口如何实现文件发送和预览的功能 http://www.imgeek.org/question/6260
  • 一言不合你就用环信搞个直播APP http://blog.csdn.net/mengmakies/article/details/51794248

新匍京a奥门 22

运行 HTTP 服务

在开始之前,我们先来安装 [PM2]

sudo apt-get install npmsudo npm install -g pm2

PM2 安装时间可能稍长,请耐心等候 [?]

我们的服务器源码里使用到了 Express 模块,下面的命令使用 NPM 来安装 Express

cd /data/release/webappsudo 
npm install express --save

安装完成后,使用 PM2 来启动 HTTP 服务

cd /data/release/webapppm2 start app.js

现在,您的 HTTP 服务已经在 CVM IP 地址>:8765 运行
要查看服务输出的日志,可以使用下面的命令:

pm2 logs

如果要重启服务,可以使用下面的命令:

pm2 restart app

我们使用 PM2 来进行 Node 进程的运行、监控和管理
NPM 仓库在国内访问速度可能不太理想,如果实在太慢可以尝试使用 CNPM 的 Registry 进行安装:npm install pm2 -g --registry=https://r.cnpmjs.org/

新匍京a奥门 23

搭建 HTTPS 服务

任务时间:15min ~ 30min

微信小程序要求和服务器的通信都通过 HTTPS 进行
安装 Nginx
在 Ubuntu 上,可直接使用 apt-get
来安装 Nginx

sudo apt-get install nginx -y

安装完成后,使用 nginx
命令启动 Nginx:

sudo /etc/init.d/nginx start

此时访问 ; 可以看到 Nginx 测试页面 [?]

如果你的机器同时安装了其他软件占用80端口,那上面的访问方式就不能使用了,而且 Nginx 都可能启动不了,你需要关闭该软件再重新启动 Nginx。

 新匍京a奥门 24

配置 HTTPS 反向代理

修改 /etc/nginx 目录的读写权限

sudo chmod a+rw /etc/nginx

将之前下载的 SSL 证书(解压后 Nginx 目录分别以 crt 和 key 作为后缀的文件)通过拖动到左侧文件浏览器 /etc/nginx 目录
的方式来上传文件到服务器上。
如何上传 SSL 证书到 /etc/nginx 目录
在 /etc/nginx/conf.d 目录创建 ssl.conf 文件

cd /etc/nginx/conf.d
sudo touch ssl.conf
sudo chmod a+rw ssl.conf

ssl.conf 文件修改为如下内容
示例代码:/etc/nginx/conf.d/ssl.conf

server {
        listen 443;
        server_name www.example.com; # 改为绑定证书的域名
        # ssl 配置
        ssl on;
        ssl_certificate 1_www.example.com_bundle.crt; # 改为自己申请得到的 crt 文件的名称
        ssl_certificate_key 2_www.example.com.key; # 改为自己申请得到的 key 文件的名称
        ssl_session_timeout 5m;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;

        location / {
            proxy_pass http://127.0.0.1:8765;
        }
    }

按 Ctrl + S
保存配置文件,让 Nginx 重新加载配置使其生效:

sudo nginx -s reload

在浏览器通过 https 的方式访问你解析的域名来测试 HTTPS 是否成功启动

附加朋友分享的Demo下载链接: 密码: bkpx

在小程序中测试 HTTPS 访问

打开配套的小程序,点击 实验一:HTTPS,点击 发送请求来测试访问结果。
如果服务器响应成功,请点击下一步。

开发微信小程序入门前

小程序会话

任务时间:45min ~ 90min

小程序不支持 Cookie 存储和跟踪,服务器需要自行实现会话层
安装 MongoDB
使用 apt-get 在机器上安装 [MongoDB]
及其客户端命令行工具:

sudo apt-get install mongodb-server mongodb -y

安装结束后,可以使用下面的命令查看安装的版本:

sudo mongod --version
sudo mongo --version

MongoDB 是一款 NoSQL 数据库,支持 JSON 格式的结构化文档存储和查询,对 JavaScript 有着友好的支持

启动 MongoDB
创建目录,用于 MongoDB 数据和日志存储:

sudo mkdir -p /data/mongodb
sudo mkdir -p /data/logs/mongodb

创建后,使用下面的命令来启动 MongoDB:[?]

sudo mongod --fork --dbpath /data/mongodb --logpath /data/logs/mongodb/webapp.log

可以使用下面的命令来检查是否启动成功 [?]

netstat -ltp | grep 27017

MongoDB 首次启动可能会花费大概 1min 时间,请耐心等待
MongoDB 默认监听 27017 端口等待连接,下面的命令查看当前 27017 端口被哪个进程占用,如果是 MongoDB 的进程,则表示启动成功。

2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅。个大新闻、论坛都在讨论这个事情。

添加 MongoDB 用户

登录本地 MongoDB 服务:

sudo mongo

登录后,创建一个用户 webapp

use webapp;
db.createUser({ user: 'webapp', pwd: 'webapp-dev', roles: ['dbAdmin', 'readWrite']});

创建完成后,使用 exit
退出命令行工具。

创建的用户和密码将用于下一步中连接数据库时使用,如果使用不同的用户或密码,注意要保存好

郑重声明:本文版权归新匍京a奥门-最全网站手机版app官方下载所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。