小程序开发经验：3元实现小程序从0到上线

前言

最近，我使用本文所述的小程序开发方法启动了两个小程序：“Android开发评估”和“宝贝游戏强力”。



我不是前端程序员，我在前端开发方面没有太多经验，我不需要为微信开发小程序。那么为什么我对此充满热情呢？

我认为小程序的开发是开展精益业务的更好方式，而试验和错误的成本更低。具体原因如下：

您无需关注用户管理系统，您可以快速聚合用户并使用微信进行传播。

开发方式是JS +类HTML，它高效且快速。

小程序属于井喷期，你不能让自己太OUT。

也许你不一定想创业，但通过快速，低成本的现实实现创意是一件很快的事。并且快速实现一个想法并让用户使用并提供反馈对于许多移动开发人员来说很难开发（相对不太方便）。

微信小程序除了用户和其他公共平台（公共号码）可以通过API获取微信的基本信息，也帮助我们解决设备适配问题，我们可以不关心IOS或Android，不关心屏幕尺寸。这使我们能够将有限的能量集中在我们的核心业务上。

快速尝试并尝试一个想法。如果你这样做，那就做好。如果你不能，试试另一个。并且微信小程序刚满足了我的期望。

快速上手

I believe that before you read this article, you must have used 微信小程序, if not, then go to 微信 "discovery" -> "小程序" and find a 小程序 experience. If you have experienced it, we will begin to quickly enter the development process.

Interested friends can scan the QR code below 微信 and feel my 小程序.

"UI". Let's start with the theory and then go back to the case. It's too slow. There is no better way to learn about 小程序 than to build a 小程序 deployment online.

开发前准备：

小程序 account (both personal and company), if not, you need to register a new one.

Address:https://mp.weixin.qq.com/.

Download and install "微信web Developer Tools",

Download address:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

A little JavaScript, Html, CSS, at least some grammar can be understood.

Read through the official development guidance document.

Official development guidance document:https://mp.weixin.qq.com/debug/wxadoc/dev/

大体方案

xx 微信小程序不是本机移动应用程序，它必须在微信应用程序框架上运行。如果您了解Facebook的React Native，您还可以将其理解为微信 React Native应用程序。

微信应用程序的框架将从微信服务器下载，加载并运行小程序“软件包”。

开发在线小程序的过程大致如下：

开发并生成小程序的“包”。

将此“软件包”上传到服务器微信。

部署小程序需要调用的服务器; （如果您的小程序不需要访问网络，则此步骤可免除）。

在线发布。

如果你开发了一个简单的工具类小程序，根本不需要后端，那么你可以直接忽略步骤3中的小程序版本。

那么，如果您使用自己的业务服务器为小程序提供服务呢？

此时，涉及微信的一些限制。 微信小程序的网络请求必须通过HTTPS协议，因此您还需要为您的域名申请SSL证书。这意味着您需要设置支持HTTPS的后端服务并配置证书。

即：您必须拥有WEB服务器（虚拟或独占）+ HTTPS服务+配置SSL证书。

对于非Web后端开发人员，上述任何步骤都可能会让您失望。你很容易错过小程序的开发。

3元方案

幸运的是，互联网上有很多服务可以帮助我们解决“麻烦”的问题。为了比较，我选择了腾讯云的“微信小程序解决方案”：



腾讯云是基于QQ，微信，腾讯游戏等大规模业务的技术磨砺，从基础设施到精细化运营，从平台实力到生态能力建设。腾讯云集成并面向市场，使其能够为企业和企业家提供集成云计算，云数据和云运营的云服务体验。网站：https://www.qcloud.com/

白话是：腾讯云是腾讯的子公司，值得信赖。

在腾讯云的微信小程序解决方案中，我们一键解决了HTTPS部署，SSL证书和负载均衡的问题，也帮助我提供了一个可行的会话管理解决方案。我们只需要在微信web开发人员工具中开发小程序，完成业务服务器（业务CVM）上的后台开发，并为小程序段提供业务服务。



购买小程序解决方案



注意：腾讯等腾讯活动将不时举行，可能需要您的小程序进行实名认证。如果您不喜欢或认证不方便，您可以选择直接购买。首次购买成本约为每月90元。尝试这个的成本不是太高，对吧。

付款成功后，腾讯云需要大约10分钟来配置我们的服务器。之后，我们可以看到腾讯云在腾讯云管理中心为我们配置的资源。我们将快速关注“云服务器”中的“业务服务器”。



配置小程序的服务器域名

Click on the "小程序 server information" item in "Second Domain Name and Certificate", which has a one-click configuration. Of course, you can also copy it to the 微信 public platform settings. 小程序 is run on the framework of 微信, 微信 restricts the access of 小程序 to the network. If the valid domain name is not set to 小程序 on 微信 public platform, 小程序 cannot initiate network request.



Once configured, you can access the domain name we set by using the 小程序AppId 小程序 application.

登录业务服务器

After the business server is configured, we need to set a login password in the background of Tencent Cloud. After restarting, we can manage and control the server locally through SSH.

Change password:



SSH login:

I am a MAC system, if you want to install the SSH tool yourself.

At this point, we have completed the configuration of the 微信 public platform (小程序 end) and Tencent cloud business server, and the next step is to start the modification of the Demo (Wafer project) automatically deployed by Tencent Cloud.

The knowledge of the session service can be understood from the address below. At present, it is the first priority to complete the online.

Conversational and business services:

https://github.com/tencentyun/wafer/wiki/%E4%BC%9A%E8%AF%9D%E6%9C%8D%E5%8A%A1



wafer

xx Wafer是腾讯云为开发人员提供的小程序开发全栈资源工具包。该套件提供小程序会话管理服务和WebSocket频道服务。该部署方法具有良好的弹性可扩展性，可以快速应对业务的爆炸性增长，并且具有较低的水平。发展门槛。

项目地址：https://github.com/tencentyun/wafer

腾讯云提供的微信小程序解决方案将帮助我们自动将晶圆部署到服务器。示例代码部署在业务服务器的“/data/release/node-weapp-demo”目录中。

Business Server我选择了Node.js的开发语言，为我们部署了Node.js和PM2的解决方案:

正在运行的示例的节点版本：v4.6.0

节点流程管理工具：pm2

测试wafer的客户端和后端

首先在服务服务器上暂停Weapp，然后使用SSH登录服务服务器。您可以查看自动部署的weapp服务器应用程序（即晶圆的后端）：

输入在业务服务器上的SSH下输入：

Pm2停止weapp

在微信web开发人员工具中，导入“wafer-client-demo”代码，填写正确的AppId:

小程序结束演示地址：https://github.com/tencentyun/wafer-client-demo

关闭后，使用微信小程序工具进行测试：

发现访问错误，重启（pm2 start process.json）只是业务服务器的weapp，如果访问成功，则意味着我们已经通过小程序端到业务服务器。

代码协同和管理

我使用GitHub进行代码管理和同步：这台机器开发并修改代码并将其提交给Github，业务服务器更新Github的代码。当然你可以使用其他git平台或服务器，以及SVN等其他代码管理。

但没有代码的版本控制和管理不是一个好习惯。过了一会儿，你可能会忘记代码的放置位置。

将Node服务器的源代码下载到本地：https://github.com/tencentyun/wafer-node-server-demo

请注意，修改了两个位置：

config.js的端口端口更改为80，因为腾讯云的负载均衡服务器指向此端口。

Process.json的'name'可以更改为名称，并且它与我们刚刚停止的weapp分开。

然后提交给Github作为我们自己的项目框架：

在业务服务器上下载并同步我们的Github上的业务服务器代码。首先切换到“/data/release /”目录（自动部署的node-weapp-demo放在此目录中）:



我使用私有Github库，需要提前配置SSH密钥。如果使用公共库，则无需进行配置。

切换到服务器所在的目录并执行：“npm install”以安装必要的依赖项：



使用pm2汇海服务：pm2启动process.json（记得先挂起weapp）



使用小程序客户端重新测试服务服务器，登录成功，业务服务器正常运行。此时，由小程序端链接的后端服务不是自动部署的游泳后端，而是我们自己提交的后端。

我们自己部署的Node服务器是成功的。我们可以开始修改业务代码并添加相应的功能。

修改代码

我们来试试吧：

修改本地route/index.js代码以使/user请求接口无效：

然后转到Github，业务服务器使用git pull来更新代码：



更新代码，PM2将自动重新加载可执行的app.js.

小程序当客户端点击“请求”发出请求时，它返回404状态：



在这一点上，我们的整个过程已经完成。现在您可以根据需要修改业务端代码，提供更多接口，然后修改我们的小程序端代码。

开发

这取决于你的比赛方式。如果您不喜欢Node.js，您可以选择其他后端语言。

小程序开发可以在官方指导文档（https://mp.weixin.qq.com/debug/wxadoc/dev/）中找到，这仍然很容易理解。

但前提要求您了解JavaScript，html和CSS的某些方面。

预览和上传

最后，现在是我们上网的时候了。我们之前的开发是在微信web开发人员工具的IDE中进行的。现在让我们来看看以下过程。

微信web开发工具为我们整合小程序打包和上传工作，你只需要在“编辑”栏中完成代码开发，然后点击“项目”栏下的“上传”即可提交。



最好在确认上传之前在手机上进行测试。单击“预览”并扫描代码，在开发人员的微信（手机）上输入小程序的“开发版本”。



最终用户无法看到上传到微信服务器的包。它由微信审计选择，这类似于IOS应用程序的应用程序商店应用程序进程。



一般审核时间为：1-3个工作日。审核通过后，小程序的管理员微信将收到提醒。

发布上线

只有在“审核版”通过审核后，才点击“提交发布”小程序即可完成在线审核。



发布成功后，用户可以在小程序搜索中找到您：



大功告成

此时，您的微信小程序已成功启动，您可以通过公共号码或组转发向用户宣布您的小程序。

当然，您也可以将QR码发布给用户。您可以在微信公共平台设置中下载每种尺寸的小程序 QR码。

开发小程序注意

在您真正感受到小程序的开发之后，当您查看开发时，更容易理解并记住要注意的地方。

每个小程序“包”的大小是有限的，不能超过1M。

消息推送：可以使用消息模板完成，但限制条形和时间。

小程序只能同时拥有5个网络请求连接。

小程序的本地存储大小有限。

视图的背景图像不能使用本地的图像资源（小程序“包”），图像控件可以。

API兼容性：请注意，小程序有一个基本存储库，不同的存储库支持较差的功能;例如，在旧的微信上无法调用一些新功能（小程序中的组件可以单击共享）。

当您在线聊天时，还有一些开发技巧和经验可以与您保持联系。有问题的朋友可以注意以下几点。