微信小程序开发 Start-up

腾讯云提供了开发者实验室帮助用户快速开发小程序,教程内容如下,用户可以点击开发者实验室快速上机完成实验。

实验教程

准备域名和证书

任务时间:30min

小程序后台通过 HTTPS 与服务器通信,实验开始前,我们要准备域名和 SSL 证书。

域名注册

如果您还没有域名,可以在腾讯云上选购

域名解析

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

<您的 CVM IP 地址>

在腾讯云购买的域名,可以到控制台添加解析记录

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

ping www.yourmpdomain.com

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

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

申请 SSL 证书

腾讯云提供了 SSL 证书的免费申请

申请提交后,审批结果会以短信的形式通知。

审批通过后,可以到 SSL 控制台下载您的证书文件。

搭建小程序开发环境

任务时间:15min ~ 30min

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

注册开发者账号

如果你还不是小程序开发者,请先在微信公众平台并注册

若已注册,直接点下一步。

配置小程序服务器信息

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

扫码完成身份校验后,request 合法域名和 socket 合法域名均填写在上一步准备好的域名地址。

配置完成后,点击 保存并提交

小程序开发工具的使用

任务时间:25min ~ 30min

使用小程序编辑器编辑客户端代码

打开桌面的小程序编辑器----选择小程序项目-管理项目 后进入小程序项目管理页面,如图:

选择可用的项目目录后给项目取一个名字,最后勾选建立普通快速启动模板后点击确定。

编辑器功能简介

编辑器根据功能不同共分为5个部分:

  • 头部的工具栏
  • 模拟器
  • 调试器
  • 代码编辑器
  • 小程序配置

编辑代码

教程需要的测试代码和编辑器资源,点击下方链接下载资源即可:

下载完成后即可安装小程序编辑器并新建小程序项目选择已下载的 demo 进行实验,体验客户端的编程。

设置通信域名

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

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

如果暂时没有申请到 AppID 也可以体验编辑器的功能,只是一些功能受限。

有关编辑器全局功能/属性的配置,例如编辑器文件的配置,工具的选择等。

模拟不同终端的程序运行效果,包括不同屏幕,系统的手机的代码运行效果等。

追踪程序运行过程的不同模块的结果,及时捕获异常并在控制台打印出来。

在这里编辑小程序代码。

在这里配置小程序的全局/局部视图资源,比如页面和每个页面的对象以及其子对象触发后的运行逻辑。

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

小程序服务器端编程

任务时间:时间未知

搭建 Http 服务

在服务器端,我们使用 Node 和 Express 在服务器上搭建一个 HTTP 服务器

安装 NodeJS 和 NPM

在主机的终端界面黏贴下面的命令安装 NodeJS 和 NPM:

curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
yum install nodejs -y

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

node -v

编写 HTTP Server 源码

创建工作目录

使用下面的命令在服务器创建一个工作目录:

mkdir -p /data/release/weapp

进入新建的工作目录:

cd /data/release/weapp

创建服务器包 package.json

在刚才创建的工作目录创建 package.json,添加服务器包的名称和版本号,可参考下面的示例:

示例代码:/data/release/weapp/package.json
{
    "name": "weapp",
    "version": "1.0.0"
}

完成后,使用 Ctrl + S 保存文件

添加 Server 源码

在工作目录创建 app.js,使用 Express.js 来监听 8765 端口,可参考下面的示例代码。

示例代码:/data/release/weapp/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 服务

安装 PM2

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

npm install pm2 --global

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

安装 Express

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

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

启动服务

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

cd /data/release/weapp
pm2 start app.js

现在,您的 HTTP 服务已经在 http://<您的 CVM IP 地址>:8765 运行

要查看服务输出的日志,可以使用下面的命令:

pm2 logs

若要重启服务,使用以下命令:

pm2 restart app

我们使用 PM2 来进行 Node 进程的运行、监控和管理

NPM 仓库在国内访问速度可能不太理想,如果实在太慢可以尝试使用 CNPM 的 Registry 进行安装:npm install pm2 -g --registry=https://r.cnpmjs.org/

搭建 HTTPS 服务

任务时间:15min ~ 30min

微信小程序要求和服务器的通信都通过 HTTPS 进行

安装 Nginx

在 CentOS 上,可直接使用 yum 来安装 Nginx

yum install nginx -y

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

nginx

此时,访问 http://<您的域名> 可以看到 Nginx 的测试页面

如果无法访问,请重试用 nginx -s reload 命令重启 Nginx

配置 HTTPS 反向代理

外网用户访问服务器的 Web 服务由 Nginx 提供,Nginx 需要配置反向代理才能使得 Web 服务转发到本地的 Node 服务。

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

如何上传 SSL 证书到 /etc/nginx 目录

Nginx 配置目录在 /etc/nginx/conf.d,我们在该目录创建 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 重新加载配置使其生效:

nginx -s reload

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

在小程序中测试 HTTPS 访问

打开配套的小程序,点击 发送请求 来测试访问结果,如果返回的数据是 “Response from express”则说明请求成功。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

3 条评论
登录 后参与评论

相关文章

来自专栏Laoqi's Linux运维专列

利用svn钩子hooks/post-commit实现代码自动部署

1013
来自专栏Android干货

ADB server didn't ACK 解决方法

3298
来自专栏哈雷彗星撞地球

Node.js 撸第一个Web应用

使用Node.js 创建Web 应用与使用PHP/Java 语言创建Web应用略有不同。 使用PHP/Java 来编写后台代码时,需要Apache 或者 Ng...

704
来自专栏陈纪庚

如何使用nodejs发邮件

昨天就开始想使用nodemailer来实现一个发送邮件的功能,不过发现了很多个坑,网上给的资料也很杂很乱,所以决定写一篇真正能用的来帮助大家减少弯路

673
来自专栏繁花云

利用git做云存储(非dalao勿入)

400
来自专栏云计算教程系列

如何使用InspIRCd 2.0和Shaltúre在Ubuntu 14.04上设置IRC服务器

本教程介绍如何在Ubuntu 14.04上安装和配置InspIRCd 2.0,一个IRC服务器。在您自己的服务器上安装可以让您灵活地管理用户,更改他们的缺口,更...

1074
来自专栏运维前线

saltstack 常用命令(持续更新中)

saltstack 常用命令 salt -d //查看帮助文档 salt -d | grep service //查看service相关模块命令 salt '*...

2318
来自专栏影子

linux下svn(subversion)服务端添加工程及配置权限

转载请注明源地址:http://www.cnblogs.com/funnyzpc/p/9010507.html

591
来自专栏深度学习之tensorflow实战篇

sudo 出现unable to resolve host 解决方法

sudo 出现unable to resolve host 解决方法 Ubuntu环境, 假设这台机器名字叫abc(机器的hostname), 每次执行s...

2664
来自专栏电光石火

给Dreamweaver插上Svn的翅膀

建立 SVN 连接  使用 Subversion (SVN) 作为 Dreamweaver 的版本控制系统之前,必须建立与 SVN 服务器的连接。与 ...

18010

扫码关注云+社区