在GitHub上,分享分享小程序Demo可不少,但是仅仅只停留在API调用及静态数据展示层面,本教程想给大家展现的是将小程序与服务端无缝结合使用,最终,我们参考腾讯云推出的小程序体验demo微信小程序用户资源上传COS示例,也就是小程序的小相册项目。 根据官方文档,小相册是结合腾讯云对象存储服务(Cloud Object Service,简称COS)制作的一个微信小程序示例。在代码结构上包含如下两部分: 小相册主要功能如下: 列出 COS 服务器中的图片列表 点击左上角上传图片图标,可以调用相机拍照或从手机相册选择图片,并将选中的图片上传到 COS 服务器中 轻按任意图片,可进入全屏图片预览模式,并可左右滑动切换预览图片 长按任意图片,可将其保存到本地,或从 COS 中删除
现在,就让我们开始学习如何部署这个Demo吧! 搭建小程序开发环境开发小程序的第一步,你需要拥有一个小程序账号,通过这个账号你就可以管理你的小程序。 申请账号点击 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序账号。 如果你注册过小程序,可以点击右侧的立即登录。如果没有的话,请重新注册,值得注意的是,邮箱必须填写未在微信公众平台、未在微信开放平台、个人未绑定的邮箱,不然这里是无法注册的。密码请填写你能记住的密码即可。 现在登录https://mp.weixin.qq.com/,点击左侧的设置——开发设置,在这里,我们就能看到你小程序的AppID了。 当小程序的ID拿到之后,我们就可以下载安装开发工具了。 安装开发工具现在,打开 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装。 在创建“小相册”项目之前,我们需要下载“小相册”源代码文件,你可以直接点击这里下载官方的DEMO文件,也可以去官方GitHub仓库拉取,以便获取最新的代码。我这里使用Git命令获取官方最新源码。 https://github.com/CFETeam/weapp-demo-album.git 之后,点击开发者中间首页的小程序项目 按钮,项目目录选择你刚下载“小相册”项目目录,AppID写第一步自己获取到的。项目名称可自行填写,我这里填写为小相册 。然后点击确定 按钮即可。 在微信小程序中,所有的网络请求受到严格限制,不满足条件的域名和协议无法请求,具体包括: 注册域名我们可以在这里注册购买自己喜欢的域名,腾讯云最近也在做优惠活动,最低价格仅1元/年!我们就从中挑选一个吧,这里我以域名 为例。当我们注册完域名后,就需要将你的域名解析到你的服务器了。 等解析完成后,我们可以测试下你的域名是否指向了你的服务器,我们在你的Windows电脑上按下Win键+R键,然后输入cmd ,在弹出的命令提示符窗口中输入你刚设置的域名,我这里以weixin. 为例,这里请改成你自己的域名。 申请证书之后,我们需要申请SSL证书,可以点击这里申请腾讯云提供的免费证书,在购买页面,选择域名型免费版(DV) 证书。 配置服务器小相册的服务器运行代码和配置已经打包成腾讯云 CVM 镜像,大家可以直接使用。如果你和我一样,已经拥有了一台服务器,那则可以重装系统选择已有镜像进行部署。腾讯云用户可以免费领取礼包,体验腾讯云小程序解决方案。 连接服务器首先检查你的服务器安全组设置,确保其开放SSH使用的22和HTTP访问使用80端口,建议先打开全部端口。然后我们通过SSH软件登录服务器,如果你本地电脑是Windows情况下可以使用putty等软件,Linux及MacOS请使用终端进行连接。 我这里以MobaXterm的终端软件为例,点击左上角的Session 按钮,选择以SSH 方式连接,在Remote host 输入你的服务器的公网IP地址,Specify username 输入你的用户名,如果你的服务器是Ubuntu系统,请输入ubuntu 如果是CentOS系统则输入root 。这里我们是CentOS系统,所以我们输入root 。 点击OK 后,输入你设置的密码(默认不显示),即可连接到你的服务器,你会看到类似下面的页面。 配置HTTPS镜像默认中已经部署了Nginx服务,在启动Nginx之前,我们需要对其进行配置。打开/etc/nginx/conf.d 下修改配置中的域名、证书、私钥。首先,上传你在准备域名证书步骤中下载的证书。我们先将其解压出来,然后再将其上传到服务器的/etc/nginx/ssl 目录下。 cd /etc/nginx/ssl ls cd /etc/nginx/conf.d ls mv www.qcloud.la.conf weixin..conf 然后,使用nano 命令对其进行编辑 nano weixin..conf 将全部的www.qcloud.la 替换成你的域名,我这里以weixin..conf 为例。 server { listen 80; listen 443 ssl;
server_name weixin.; charset utf-8;
access_log logs/weixin..access.log main; error_log logs/weixin..error.log;
ssl on; ssl_certificate ssl/1_weixin._bundle.crt; ssl_certificate_key ssl/2_weixin..key; ssl_session_timeout 5m; ssl_protocols TLSv1; ssl_ciphers HIGH:!aggNULL:!MD5; ssl_prefer_server_ciphers on;
include conf.d/partials/*.conf; } 注意:ssl_certificate ssl/1_weixin._bundle.crt; 和ssl_certificate_key ssl/2_weixin..key; 这两行名称一定要和你上传文件的名称相同!
之后,我们就可以启动Nginx了,输入Nginx 启动HTTP服务。 nginx 然后,打开你的浏览器,访问https://weixin. 这里替换成你的域名,前缀一定要是https。 开通COS小相册示例的图片资源是存储在 COS 上的,要使用 COS 服务,需要登录 COS 管理控制台,然后在其中完成以下操作,注意,本Demo不支持COS V5版本,使用前请先确定你创建的存储桶的版本。 创建并设置 开通 COS 得到APP ID及密钥对然后,我们点击左侧的密钥管理,在这个页面,点击「云 API 密钥」 按钮,获取我们的API。 一切准备就绪,终于可以在服务器端启动我们小相册的服务了。打开我们的服务器SSH页面。在刚才部署的镜像中中,小相册示例的 Node 服务代码已部署在目录/data/release/qcloud-applet-album 下,进入该目录: cd /data/release/qcloud-applet-album 在该目录下有个名为config.js 的配置文件,按注释修改对应的 COS 配置: nano config.js 修改对应的 COS 配置 module.exports = { // Node 监听的端口号 port: '9993', ROUTE_BASE_PATH: '/applet',
cosAppId: '填写开通 COS 时分配的 APP ID', cosSecretId: '填写密钥 SecretID', cosSecretKey: '填写密钥 SecretKey', cosFileBucket: '填写创建的公有读私有写的bucket名称',}; 这里填写你上一步设置的APPID 、SecretID 、SecretKey 、及bucket 名称,如图 pm2 start process.json 看到类似下面的输出,代表启动成功。
|