微信小程序开发 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 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏学海无涯

iOS开发之使用git传代码到github

现在越来越多的公司采用了git作为版本管理工具,相对于传统的SVN,git有着明显的优势,今天写一篇入门文章,教大家如何将自己写好的iOS项目通过git传到gi...

1052
来自专栏小狼的世界

ZendStudio中设置SVN:ignore

使用ZendStudio开发SVN中的代码时,经常容易将 .project、.settings、.buildpath 这类的zend的工程文件提交上去,非常麻烦...

672
来自专栏张伟博客

如何使用 Git 和 GitHub 来管理自己的代码

    点击右上角加号箭头,在弹出的菜单中选择 "New repository" 选项进行仓库配置。

1222
来自专栏微信小程序开发

你真的了解小程序的自定义编译功能嘛?

微信开发者工具最新的版本里面已经校验了app.json里面的重复pages,之前可以直接把你想要的page放在第一行,默认就会先加载这个page,现在只能通过自...

55010
来自专栏ZKEASOFT

GitHub设置使用SSH Key,用TortoiseGit进行Clone仓库

GitHub设置使用SSH Key的好处就是可以使用SSH连接,并且提交代码的时候可以不用输入密码,免密提交。

1240
来自专栏小文博客

扒站==一条代码?

2083
来自专栏androidBlog

Git下载及配置环境变量

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/...

672
来自专栏较真的前端

PWA 入门: 写个非常简单的 PWA 页面

5705
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件 在《Vue2+VueRouter2+Webpack...

2085
来自专栏Golang语言社区

【Golang语言社区】前端编程-手机端调试利器 - 总结与实践

一些调试工具 说起手机端调试,相比大家都不陌生。 由于手机浏览器没有像PC端浏览器一样有开发调试工具,所以一般手机端的调试都要借助于电脑,现在的调试方式通常有以...

4304

扫码关注云+社区