技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

微信小程序-阿里云部署

 收录于 未分类
   约 3829 字   预计阅读 8 分钟 
https://bing.ee123.net/img/rand?artid=132412542

微信小程序-阿里云部署

参考 ：

下载

一. 申请账号

申请账号

1.  进入 根据指引填写信息和提交相应的资料，完成账号申请。

说明： 如果跳转后页面出现错误，请刷新访问。

https://i-blog.csdnimg.cn/blog_migrate/5e1a2fd62f12818701169174df8400f3.png

2.  使用申请的微信公众平台账号登录 ，单击 开发

开发设置 ，可以看到小程序的AppID，请记录AppID，后续操作中需要使用。

https://i-blog.csdnimg.cn/blog_migrate/95907c8a991fe971d6b533494e4fa672.png

3.  在 开发设置

服务器域名

request合法域名 中填入您的已备案域名。

  1. 安装小程序开发环境并创建项目

二，安装小程序开发环境并创建项目

1.  安装Node.js开发环境，请到 页面下载并安装Node.js环境。

2.  下载并安装微信小程序开发工具。详细信息请参见 。

3.  打开小程序开发工具，然后使用微信扫码登录。

4.  单击加号创建微信小程序示例项目。

https://i-blog.csdnimg.cn/blog_migrate/a1008352f29f27e56c3478dd5488b545.png

5.  参考以下填写项目信息，最后单击 新建 。

  • 项目名称：例如ECSAssistant。
  • 目录：例如D:\workspace\wechat\ECSAssistant。
  • AppID：小程序的唯一标识，从小程序控制台获取，参见步骤一。
  • 开发模式：小程序。
  • 后端服务：不使用云服务。

https://i-blog.csdnimg.cn/blog_migrate/140dfc960207f8540f468ec2a06a7f35.png

  1. 初识小程序项目结构

三，初识小程序项目结构

生成的的小程序示例项目结构如下。

ECSAssistant
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.json
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── project.config.json
├── sitemap.json
└── utils
    └── util.js

可以看到小程序的项目结构中有三种前缀为app的文件，它们定义了小程序的一些全局配置。

  • app.json 是小程序的全局配置，用于配置小程序的页面列表、默认窗口标题、导航栏背景色等。更多请参见 。
  • app.acss 定义了全局样式，作用于当前小程序的所有页面。
  • app.js 用于注册小程序应用，可配置小程序的生命周期，声明全局数据，调用丰富的 API。

小程序所有的页面文件都在 pages/ 路径下，页面文件有四种文件类型，分别是 .js 、 .wxml 、 .wcss 、和 .json 后缀的文件。相比全局配置文件，页面配置文件只对当前页面生效。其中 .wxml 文件定义了当前页面的页面结构。小程序中的所有页面都需要在 app.json 文件中声明。更多请参见 。

此外，项目顶层还有开发工具配置文件 和爬虫索引文件 。

四. 开发小程序

1.  编辑 app.json 文件，将小程序页面Title修改为ECS小助手，修改后的 app.json 文件内容如下。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "ECS小助手",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

2.  编辑 pages/index/index.wxml 文件，定义index页面的页面结构，修改后的 index.wxml 文件内容如下。

<view class='container'>
  <input placeholder='请输入你的ECS实例ID' class='search-input' value='{{ inputValue }}' bindblur='bindblur'></input>
  <view class='resultView' hidden='{{ showView }}'>
    <text class='result'>CPU数：{{queryResult.Cpu}} 核</text>
    <text class='result'>内存大小：{{queryResult.Memory}} MB</text>
    <text class='result'>操作系统：{{queryResult.OSName}}</text>
    <text class='result'>实例规格：{{queryResult.InstanceType}}</text>
    <text class='result'>公网IP地址：{{queryResult.IpAddress}}</text>
    <text class='result'>网络带宽：{{queryResult.InternetMaxBandwidthOut}} MB/s</text>
    <text class='result'>在线状态：{{queryResult.instanceStatus == 'Running' ? '运行中':'已关机'}}</text>
  </view>
</view>

3.  编辑 pages/index/index.wxss文件 ，定义index的页面样式，修改后的 index.wxss 文件内容如下。

.search-input {
  position: relative;
  margin-bottom: 50rpx;
  padding-left:80rpx;
  line-height: 70rpx;
  height: 80rpx;
  box-sizing: border-box;
  border: 2px solid #ff8f0e;
  border-radius: 100rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border 0.2s;
}

.resultView {
margin-top: 70rpx;
}
.result {
position: relative;
left: 30rpx;
display: list-item;
font-size: small;
}

4.  编辑 pages/index/index.js 文件，定义搜索框的失去焦点事件，修改后的 index.js 文件内容如下。

Page({
data: {
queryResult: null,
showView: 'false',
},

bindblur: function(e) {
let that = this;
wx.request({
url: 'http://127.0.0.1:5000/ecs/getServerInfo',
method: 'GET',
data: {
instanceId: e.detail.value
},
success(res) {
if(res.statusCode == 200){
that.setData({
queryResult: res.data,
showView: !that.data.showView,
});
}else{
that.setData({
showView: 'false',
});
wx.showToast({
title: '请输入正确的实例 ID',
duration: 1500,
icon: 'none',
mask: true
})
}
}

    })

}
})

说明： 微信小程序提供了丰富的前端 API 和服务端 API，您可以基于这些 API 来实现您的小程序功能，更多请参见 。

五，. 安装 Python 开发环境并创建项目

1.  下载安装 。

2.  打开本地命令行终端，使用 pip 安装以下依赖。

说明： 按下快捷键 win+r，在运行窗口输入 powershell 后回车可打开命令行终端。

# 阿里云 SDK 核心库
pip install aliyun-python-sdk-core

# 阿里云 ECS SDK

pip install aliyun-python-sdk-ecs

# 轻量级 Web 框架 flask

pip install flask

3.  下载安装 Python 开发的集成环境 。

4.  打开 PyCharm。

5.  单击 Create New Project 。

https://i-blog.csdnimg.cn/blog_migrate/cc5e9bb4bf5e20a0232e00efe3a2fdcb.png

6.  选择项目路径，然后单击 Create 完成项目创建。

六，开发后端服务

1.  右键单击 PyCharm 项目根目录，依次选择 New

Python File 。

2.  输入 Python File 文件名，例如：GetServerInfo，然后选择 Python File 完成文件创建。

3.  在新建的 Python 文件中新增以下内容，并将代码中的 accessKeyId、accessSecret 修改为您自己的 AK 信息。

# -_- coding: utf-8 -_-
from flask import Flask, jsonify, request
from aliyunsdkcore.client import AcsClient
import json
from aliyunsdkecs.request.v20140526 import DescribeInstancesRequest, DescribeInstanceStatusRequest

app = Flask(**name**)

accessKeyId = 'LTAI4G4dnpbmKBCgug4*****'
accessSecret = 'gBivN1nYujUGTBgM448Nt5xex*****'
region = 'cn-shenzhen'
client = AcsClient(accessKeyId, accessSecret, region)

# 在 app.route 装饰器中声明响应的 URL 和请求方法

@app.route('/ecs/getServerInfo', methods=['GET'])
def getServerInfo(): # GET 方式获取请求参数
instanceId = request.args.get("instanceId")
if instanceId is None:  
 return "Invalid Parameter" # 查询实例信息
describeInstancesRequest = DescribeInstancesRequest.DescribeInstancesRequest()
describeInstancesRequest.set_InstanceIds([instanceId])
describeInstancesResponse = client.do_action_with_exception(describeInstancesRequest) # 返回数据为 bytes 类型，需要将 bytes 类型转换为 str 然后反序列化为 json 对象
describeInstancesResponse = json.loads(str(describeInstancesResponse, 'utf-8'))
instanceInfo = describeInstancesResponse['Instances']['Instance'][0]

    # 查询实例状态
    describeInstanceStatusRequest = DescribeInstanceStatusRequest.DescribeInstanceStatusRequest()
    describeInstanceStatusRequest.set_InstanceIds([instanceId])
    describeInstanceStatusResponse = client.do_action_with_exception(describeInstanceStatusRequest)
    describeInstanceStatusResponse = json.loads(str(describeInstanceStatusResponse, 'utf-8'))
    instanceStatus = describeInstanceStatusResponse['InstanceStatuses']['InstanceStatus'][0]['Status']

    # 封装结果
    result = {
        # cpu数
        'Cpu': instanceInfo['Cpu'],
        # 内存大小
        'Memory': instanceInfo['Memory'],
        # 操作系统名称
        'OSName': instanceInfo['OSName'],
        # 实例规格
        'InstanceType': instanceInfo['InstanceType'],
        # 实例公网IP地址
        'IpAddress': instanceInfo['PublicIpAddress']['IpAddress'][0],
        # 公网出带宽最大值
        'InternetMaxBandwidthOut': instanceInfo['InternetMaxBandwidthOut'],
        # 实例状态
        'instanceStatus': instanceStatus
    }
    return jsonify(result)

if **name** == "**main**":
app.run()

说明： 您可以访问 创建和查看您的 AccessKey。代码中涉及到的 API 的更多参数说明请参见 和 。

七，本地调试

1.  本地运行后端服务。在 GetServerInfo.py 文件空白处右键单击选择 Run ‘GetServerInfo’ ，或者使用快捷键 Ctrl+Shift+F10 快速运行 Python 文件。

2.  关闭小程序开发者工具的 HTTPS 安全性校验。

a. 单击工具栏 设置

项目设置

本地设置 。

b. 在 本地设置 中勾选 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书 。

3.  接下来您可以调用本地后端服务进行小程序的调试。

  1. 部署 uWSGI Server

八，部署 uWSGI Server

本教程使用的服务器操作系统版本为 Ubuntu Server 18.04 LTS，该版本内置了 Python3 环境。如果您在使用其他版本的操作系统，例如 CentOS6.x、CentOS7.x，需要您自行配置 Python3 环境。

1.  在终端中输入命令 ssh -V。

如果显示 SSH 版本则表示已安装，如下图所示。

https://i-blog.csdnimg.cn/blog_migrate/503d3eb7355ac09ebb5081f7ed759e48.png

如果未安装，请下载安装 工具。

2.  在终端中输入命令以下命令，将服务端程序上传到服务器上。

scp D:\workspace\python\ECSAssistant\GetServerInfo.py root@123.123.123.123:/root/

说明：

scp 命令的第一个参数为源文件路径，此处为本地文件路径；第二个参数分为三部分，分别是远程服务器的认证用户名、IP 地址和要上传到的远程目录。

3.  输入以下命令连接服务器，然后根据提示输入您的服务器密码。

ssh root@123.123.123.123

登录成功后会显示如下信息。

https://i-blog.csdnimg.cn/blog_migrate/2d8db7ebfc2fc75722b6f3c2e1116dff.png

4.  执行以下命令安装 Python 依赖。

# 阿里云 SDK 核心库
pip3 install aliyun-python-sdk-core

# 阿里云 ECS SDK

pip3 install aliyun-python-sdk-ecs

# 轻量级 Web 框架 flask

pip3 install flask

# Web Server

pip3 install uwsgi

5.  新建 uwsgi 配置文件。

mkdir /data&&cd /data &&vim uwsgi.ini

按下 i 键进入编辑模式，新增以下内容。

[uwsgi]
#uwsgi 启动时所使用的地址和端口
socket=127.0.0.1:5000 #指向网站目录
chdir=/data

#python 启动程序文件
wsgi-file=GetServerInfo.py
#python 程序内用以启动的 application 变量名
callable=app

#处理器数
processes=4

#线程数
threads=2

#状态检测地址
stats=127.0.0.1:9191

#保存启动之后主进程的 pid
pidfile=uwsgi.pid

#设置 uwsgi 后台运行，uwsgi.log 保存日志信息 自动生成
daemonize=uwsgi.log

编辑完成后按 Esc 键退出编辑模式，然后输入 :wq 退出编辑器。

6.  运行 uwsgi server。

mv /root/GetServerInfo.py /data
uwsgi uwsgi.ini

7.  执行以下命令验证 HTTPS 服务部署情况。

说明：

请将 api.aliyuntest.com 改为您的服务器域名。

curl https://api.aliyuntest.com/ecs/getServerInfo

命令执行结果如下表示 HTTPS 服务部署成功。

https://i-blog.csdnimg.cn/blog_migrate/f67aa90994cdfc5f73075050559524ed.png

九. 部署 Nginx 并配置 HTTPS

1.  支付宝小程序要求正式环境中小程序与服务端通信必须使用 HTTPS，所以您需要申请一个 SSL 证书。阿里云为个人开发者提供免费的 SSL 证书分发服务，请参考文档 ，申请一个 SSL 证书并进行域名验证。

2.  SSL 证书申请审核通过后，将证书上传到您的服务器上，证书文件包括一个 .pem 和一个 .key 文件。文件上传命令请参见步骤 9.2。

3.  在服务器上执行以下命令安装 Nginx。

apt-get update
apt-get -y install nginx

4.  新建 Nginx 配置文件。

vim /etc/nginx/sites-available/app.example.com

您可以将文件名修改为自己的域名。在文件中新增以下内容。

注意： 请替换下面文件内容中的域名和证书存放地址。

server { # ssl 证书使用 443
listen 443 ssl default_server; # listen [::]:443 ssl default_server; # 后面是域名
server_name app.example.com;

    # 证书.pem的存放地址
    ssl_certificate   /data/ssl/1752675_app.example.com.pem;
    # 证书.key的存放地址
    ssl_certificate_key  /data/ssl/1752675_app.example.com.key;
    ssl_session_timeout  5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        # 转发端口
        uwsgi_pass  127.0.0.1:5000;
        include uwsgi_params;
    }

}

5.  将配置文件拷贝到/etc/nginx/sites-enabled/目录下。

ln -s /etc/nginx/sites-available/app.example.com /etc/nginx/sites-enabled/app.example.com

6.  启动 Nginx。

service nginx start

十，上线小程序

1.  请将小程序 pages/index/index.js 代码中的本地后端服务地址改为您的后端服务器域名，通信协议改为 HTTPS，例如：

https://api.aliyuntest.com/ecs/getServiceInfo

https://i-blog.csdnimg.cn/blog_migrate/2aa11320a06825d849dc01707c5dc1bc.png

2.  单击右上角工具栏上传，然后在弹出的对话框中单击上传，根据提示输入上传版本号并完成上传。

https://i-blog.csdnimg.cn/blog_migrate/249ca09bfc8ee9c55eb6715692859089.png

上传成功后会弹出如下提示。

https://i-blog.csdnimg.cn/blog_migrate/e109190849d021171f04566f674488b4.png

3.  在微信开放平台中，单击 开发服务

版本管理 ，查看已上传的开发版本。

https://i-blog.csdnimg.cn/blog_migrate/a48e033548d2520ae87144eef4982b00.png

4.  单击 提交审核 ，填写审核信息。

5.  审核通过后，管理员的微信中会收到小程序通过审核的通知。在审核版本右边单击 上线 ，就可以在微信客户端中查看小程序了。 上架之后即为线上版本。有关小程序生命周期的更多信息请参见 。

更新于 2023-09-06
 微信小程序, 小程序
返回 | 主页