分享

用二十行不到的代码手把手教你微信小程序开发!超级简单!

 庆亮trj21bcn0z 2017-12-24

选择哪个「小程序」Demo?

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

第一步:搭开发环境

首先,我们需要在本地搭建好微信「小程序」的开发环境。即下载开发者工具。微信官方已经推出了正式版 IDE,大家没有必要再去下载破解版了。打开官网下载页面,根据自己的操作系统选择。我使用的是 Mac 版。

安装好之后打开运行,会要求微信扫码登陆。之后,就可以看到创建项目的页面了。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

选择添加项目,没有 AppID 就选无(如果乱写会报错,到时可能无法进入项目)。如果你选择的项目目录为空,请如图所示勾选在“当前目录中创建quick start项目”。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

简单解释下目录结构:

  • applet(或app): 「小相册」应用包代码,可直接在微信开发者工具中作为项目打开。

  • server: 搭建的Node服务端代码,作为服务器和app通信,提供 CGI 接口示例,用于拉取图片资源、上传图片、删除图片。

  • assets:「小相册」的演示截图。

源码下载完成之后,我们打开微信 web 开发者工具,新建项目「小相册」,选择目录applet(或app)。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

「小相册」源码分析

在进行部署之前,我们来简单分析一下「小相册」的具体代码。毕竟只看效果不是我们的目的,我们的目的是以「小相册」为例,了解如何开发小程序并与服务端进行交互

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

第四步:准备域名和配置证书

如果你已经有腾讯云的服务器和域名,并配置好了 https,那么可以跳过第 4-6 步。

在微信小程序中,所有的网络请求受到严格限制,不满足条件的域名和协议无法请求。简单来说,就是你的域名必须走 https 协议。所以你还需要为你的域名申请一个证书。如果没有域名,请先注册一个。由于我们没有收到内测,也就暂时不用登录微信公众平台配置通信域名了。

第五步:Nginx 配置 https

微信小程序云端示例镜像中,已经部署好了 Nginx,但是还需要在 /etc/nginx/conf.d 下修改配置中的域名、证书、私钥。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

请将红框部分换成自己的域名和证书,并且将 proxy_pass 设置为 Node.js 监听的端口,我的是 9993。

配置完成后,重新加载配置文件并且重启 Nginx。

sudo service nginx reloadsudo service nginx restart

第六步:域名解析

我们还需要添加域名记录,将域名解析到我们的云服务器上,这样才可以使用域名进行 https 服务。在腾讯云注册的域名,可以直接使用云解析控制台来添加主机记录,直接选择上面购买的 CVM。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

解析生效后,我们的域名就支持 https 访问了。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

  1. 然后在 Bucket 列表中,点击刚刚创建的 Bucket。然后在新页面点击“获取API密钥”。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

弹出的页面中包括了我们所需要的三个信息:唯一的 APP ID,一对SecretID和SecretKey(用于调用 COS API)。保管好这些信息,我们在稍后会用到。

  1. 最后,在新的 Bucket 容器中创建文件夹,命名为photos。这点后面我们也会提到。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

小相册示例使用 pm2 管理 Node 进程,执行以下命令启动 node 服务:

pm2 start process.json

第九步:配置「小相册」通信域名

接下来,在微信 web 开发者工具打开「小相册」项目,并把源文件config.js中的通讯域名 host 修改成你自己申请的域名。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

将蓝色框内的内容修改为自己的域名

然后点击调试,即可打开小相册Demo开始体验。

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

用二十行不到的代码手把手教你微信小程序开发!超级简单!

如有侵权请联系小编删除!

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多