微信小程序如何设置域名, 划时代产品“小程序”发布已经快一周了,互联网技术人员已经摩拳擦掌、跃跃欲试。不过小程序还在内测,第一批只发放了200个内测资格(泪流满面)。我以为没有AppID,我会错过这个月的小程序。
幸运的是,微信在这两天发布了官方开发者工具,因此您可以在没有内测邀请的情况下提前尝试。要构建微信小程序,必须设置域名。下面小编将在下一篇文章中回答如何为微信小程序设置域名。
因此,我对“小程序”有了第一次体验,我的感觉只有一个字,——!
你选择哪个“小程序”演示?
在知名同性交友网站Github上,有许多“小程序”的演示,但大多数只是简单的API演示,有些甚至直接在json文件中写入页面数据(显然有网络请求API)。
我想体验的是一个可以无缝连接服务器和小程序的项目(体验足够酷)。最后,我选择了腾讯云正式推出的“小相册”项目。
“小相册”主要实现以下功能:
列出对象存储COS中的图片。点击左上角的上传图片图标,可以调用相机拍照或从手机相册中选择图片,并将选择的图片上传到对象存储COS。轻按任何图片以进入全屏图片预览模式。
并且可以左右滑动切换预览图片。长按任意图片将其保存在本地或从对象存储COS中删除。
云对象服务是腾讯云推出的面向企业和个人开发者的高可用、稳定、安全的云存储服务。任何数量和形式的非结构化数据都可以放入COS中,
并在其中实现数据管理和处理。
之所以选择腾讯云的Demo,是因为它是腾讯自己推出的,项目质量有保障。第二,因为它是一个罕见的不仅谈论小程序开发,而且还引入了云部署的项目。
稍有经验的程序员都知道,架构应该与静态分离,静态文件不应该放在自己的服务器上,而是放在专门用于存储的对象存储服务器COS上,并由CDN加速。“小相册”的后端是Node.js,
Nginx充当反向代理。
步骤1:构建开发环境。
首先,我们需要为微信小程序构建一个本地开发环境。下载开发者工具。微信官方已推出IDE正式版,无需下载破解版。打开官网下载页面,根据自己的操作系统进行选择。
我用的是Mac版。
安装完成后,打开操作,让微信扫码登录。之后,您可以看到创建项目的页面。
选择添加项目,或者选择无AppID的无(如果您乱涂乱画,将会出现错误,并且您可能无法输入项目)。如果您选择的项目目录为空,请勾选如图所示的“在当前目录中创建快速启动项目”。
点击“添加项目”后,我们将进入开发工具的调试页面。
第二步:下载“小相册”源代码。
接下来,我们下载“小相册”的源代码。可以选择直接从腾讯云官网提供的链接下载,也可以从腾讯云团队的Github仓库拉取。我建议从Github仓库中提取,这样可以及时获得新代码。
git clone https://github.com/CFETeam/weapp-demo-album.git
最终,我们将得到这样一个文件目录。
简要解释目录结构:
小程序(或app):“小相册”应用包的代码,可以在微信开发者工具中直接作为项目打开。服务器:节点服务器的代码,作为服务器和应用程序之间的通信,提供了CGI接口的示例。
用于拉取图片资源、上传图片和删除图片。资产:“小相册”的演示截图。
下载源代码后,我们打开微信web开发者工具,新建一个项目“小相册”,选择目录小程序(或app)。
“小相册”源代码分析
在部署之前,我们先简单分析一下“小相册”的具体代码。毕竟,只看效果不是我们的目的。我们的目的是以“小相册”为例学习如何开发小程序并与服务器进行交互。
“小相册”包含一个描述整个程序的应用程序和多个描述各自页面的页面。主程序app主要由三个文件组成。
分别是app.js(小程序逻辑)、app.json(小程序公共设置)和app.wxss(小程序公共样式表),其中前两个是必备文件。config.js文件包含一些用于部署域名的设置。
现在没关系。
在页面目录下,有两个页面,即索引和相册。页面结构相对简单,其中index是小程序启动时的默认页面。在每一页下面,
必须至少有两个文件。页面逻辑和。wxml(页面结构)和。页面样式表和。json(页面配置)文件是可选的。您可能已经注意到这些文件的文件名与父目录的文件名相同。这是微信的官方规定。
目的是减少配置项,方便开发人员。
接下来,我们以索引页为例进行简单说明。Index.wxml是这个页面的表示层文件,代码非常简单,可以分为两部分。
恭喜你成功构建微信小程序,进入相册分享二维码,邀请好友一起写小程序!
该页面的演示效果如下:
我们看到页面上有一个按钮“进入相册”。正常理解,点击这个按钮后,我们就可以进入相册了(这不是废话)。这个操作在小程序背后是如何实现的?
在index.wxml中,我们发现在相应的button标记上定义了一个bindtap属性,并绑定了一个名为gotoAlbum的方法。这个方法可以在index.js文件中找到。
实际上文件中只定义了这个方法,具体动作是跳转到相册页面。
Page ({//Go to photo album page gotoalbum () {wx.navigateto ({URL: # 39;/album/album # 39; }); }, });
Album.js页面已经写好了程序的主要逻辑,包括选择或拍摄图片、预览图片、下载图片和删除图片。album.wxml中使用了三个视图容器:view、scroll-view和swiper
还提供了一个消息提示框toast。具体方法和视图请参考项目源代码。所有这些函数都写在Page类中。
Lib目录提供了一些小程序可以使用的辅助功能,包括异步访问和对象存储COS的API。
总的来说,正如微信官方宣传的那样,在开发者工具下开发小程序的效率确实提高了很多,微信改进的组件和API也有很多。所以开发速度的体验还是很爽的。
此外,由于“小相册”需要使用许多云功能,例如上传和下载图片,因此我们还需要在服务器端对其进行部署和设置。有关详细信息,请参见下面的步骤。
步骤3:在云中部署服务器代码
虽然服务端的开发不是本文的重点,但是为了全面地体验「小相册」的整个开发部署流程,我们还是有必要了解服务端的部署,这里我们使用的是腾讯云。
如果你想更爽一点,那么可以选择腾讯云官方提供的小程序云端镜像。「小相册」的服务器运行代码和配置已经打包成腾讯云CVM 镜像,可以直接使用。可谓是一键部署好云端。
如果你以前没有使用过腾讯云,可以选择免费试用(我已经领取了8 天的个人版服务器),或者领取礼包以优惠的价格购买所需的服务。
你也可以选择将「小相册」源码中的server文件夹上传到自己的服务器。
第四步:准备域名和配置证书
如果你已经有腾讯云的服务器和域名,并配置好了https,那么可以跳过第4-6 步。
在微信小程序中,所有的网络请求受到严格限制,不满足条件的域名和协议无法请求。简单来说,就是你的域名必须走https 协议。所以你还需要为你的域名申请一个证书。如果没有域名,请先注册一个。
由于我们没有收到内测,也就暂时不用登录微信公众平台配置通信域名了。
第五步:Nginx 配置https
微信小程序云端示例镜像中,已经部署好了Nginx,但是还需要在/etc/nginx/conf.d 下修改配置中的域名、证书、私钥。
请将红框部分换成自己的域名和证书,并且将proxy_pass 设置为Node.js 监听的端口,我的是9993。
配置完成后,重新加载配置文件并且重启Nginx。
sudo service nginx reload sudo service nginx restart
第六步:域名解析
我们还需要添加域名记录,将域名解析到我们的云服务器上,这样才可以使用域名进行https 服务。在腾讯云注册的域名,可以直接使用云解析控制台来添加主机记录,直接选择上面购买的CVM。
解析生效后,我们的域名就支持https 访问了。
第七步:开通和配置COS
由于我们希望实现动静分离的架构,所以选择把「小相册」的图片资源是存储在COS 上的。要使用COS 服务,需要登录COS 管理控制台,然后在其中完成以下操作。
1.点击创建Bucket。会要求选择所属项目,填写相应名称。这里,我们只需要填上自己喜欢的Bucket 名称即可。
2.然后在Bucket 列表中,点击刚刚创建的Bucket。然后在新页面点击“获取API密钥”。
弹出的页面中包括了我们所需要的三个信息:唯一的APP ID,一对SecretID和SecretKey(用于调用COS API)。保管好这些信息,我们在稍后会用到。
3.最后,在新的Bucket 容器中创建文件夹,命名为photos。这点后面我们也会提到。
第八步:启动「小相册」的服务端
在官方提供的镜像中,小相册示例的Node 服务代码已部署在目录/data/release/qcloud-applet-album 下。进入该目录,如果是你自己的服务器,请进入相应的文件夹。
cd /data/release/qcloud-applet-album
在该目录下,有一个名为config.js 的配置文件(如下所示),按注释修改对应的COS 配置:
module.exports={ //Node 监听的端口号port: 39;999339; ROUTE_BASE_PATH: 39;/applet39; cosAppId: 39;填写开通COS 时分配的APP ID39; cosSecretId: 39;填写密钥SecretID39; cosSecretKey: 39;填写密钥SecretKey39; cosFileBucket: 39;填写创建的公有读私有写的bucket名称39; };
另外,cd ./routes/album/handlers,修改list.js,将const listPath 的值修改为你的Bucket 下的图片存储路径。如果是根目录,
则修改为39;/39;当前服务端的代码中将该值设置为了39;/photos39; ,如果你在第七步中没有创建该目录,则无法调试成功。
小相册示例使用pm2 管理Node 进程,执行以下命令启动node 服务:
pm2 start process.json
第九步:配置「小相册」通信域名
接下来,在微信web 开发者工具打开「小相册」项目,并把源文件config.js中的通讯域名host 修改成你自己申请的域名。
将蓝色框内的内容修改为自己的域名
然后点击调试,即可打开小相册Demo开始体验。
最后提示一点,截止目前为止,微信小程序提供的上传和下载API 无法在调试工具中正常工作,需要用手机微信扫码预览体验。但是由于没有内测资格,我们暂时是没办法体验了。
微信小程序如何设置域名,以上就是本文为您收集整理的微信小程序如何设置域名最新内容,希望能帮到您!更多相关内容欢迎关注。