网站首页 >> 牛刀云小程序开发 >> 第3篇 发布、部署和运维 >> 测试发布

4.1.5 导入微信开发者工具

主要用于将小程序的代码导入微信开发者工具,才能通过手机进行开发过程中的小程序预览。第一次在手机微信中运行小程序的准备过程比较复杂,步骤见表17-1

17-1  预览小程序的步骤

步骤

牛刀云发布界面

微信公众平台|小程序

牛刀云测试环境管理后台

1

 

小程序注册获取小程序参数

配置小程序账号参数

2

获取服务器域名

配置服务器域名

 

3

 

下载安装微信开发者工具

 

4

 

新建小程序项目

导入准备好的下载小程序

 

5

 

生成预览二维码

进行业务数据管理

 

1 小程序注册并配置小程序参数

 

1)注册小程序账号和获取小程序参数

 

在微信开发者工具中预览小程序,需要先在微信公众平台上注册小程序账号,获得小程序账号的AppID(小程序ID)和AppSecret(小程序密钥)参数。关于小程序注册和参数获取具体步骤参见20.1小程序注册”一节。

 

2)测试环境管理后台配置小程序参数

 

牛刀云上提供有小程序的管理后台,主要是用于微信相关配置和业务管理的后台。以牛刀小店为例,管理后台是提供给商户使用的业务管理后台,里面包括商品设置、营销管理、系统设置、订单管理、财务管理和微信配置等功能。开发、测试和正式环境分别拥有各自的管理后台。

 

在制作台中单击顶部导航栏中的“高级”按钮,打开“高级”页面,如图17-10所示。可以看到界面的左侧提供了分别进入3个环境管理后台的入口。

17-10  制作台高级页面

 

测试环境和正式环境的管理后台是要通过用户名和密码登录的。系统会给出初始用户名和密码,使用初始用户名和密码登录管理后台后,可以修改当前用户的密码,也可以添加新用户。

 

单击测试环境-管理后台图标右侧的“初始密码”按钮。打开对话框,里面显示的就是初始用户名和密码。

 

进入测试环境管理后台的方法:单击测试环境-管理后台图标右侧的“进入”按钮,打开管理后台登录界面,输入初始用户名和密码,单击“登录”按钮,即可进入。

 

在测试环境管理后台配置小程序参数的方法:选择左侧功能树上的“微信配置”菜单命令,打开“微信配置”页面。如图17-11所示.。切换到“小程序”页签,单击“新建小程序”按钮,输入小程序名称,在appID输入框中输入AppID,在appSecret输入框中输入AppSecret

17-11  测试环境管理后台的微信小程序参数配置

 

2 小程序账号里配置服务器域名

配置服务器域名目的是设置小程序的安全访问域名,即小程序只访问该域名下的链接,不能访问其它域名下的链接,保护小程序使用者的安全。

在制作台的“发布”页面中,单击“第三步 导入微信开发者工具”按钮,显示出发布版本的服务器域名,如图17-12所示。

17-12  获取服务器域名

然后登录微信公众平台小程序账号中配置服务器域名。配置的具体步骤参见20.2配置服务器域名”一节。

 

3 安装微信开发者工具

微信开发者工具是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。关于微信开发者工具下载和安装的具体步骤参见20.3下载、安装微信开发者工具”一节。

 

4 新建小程序项目导入准备好的下载小程序

完成以上准备工作,打开微信开发者工具,使用自己的微信扫码登录,选择“小程序”项目。首次进入微信开发者工具,会自动新增项目,在新增项目对话框中输入小程序AppID和项目名称,选择下载解压好的项目目录,例如:D:\微信小程序\shop。如图17-13所示。

说明: C:\Users\Administrator\Pictures\4.png 

17-13  新建小程序项目

 

单击“确定”按钮,即将小程序代码导入微信开发者工具,同时打开了微信开发者工具界面。工具界面左侧显示项目的运行效果,右侧显示项目中的目录和文件。

 

5 生成预览二维码和在测试环境管理后台进行业务数据管理

在微信开发者工具中,单击顶部导航栏中的“预览”按钮,生成预览二维码,如图17-14所示。用手机微信扫一扫扫描这个二维码,即可在手机微信上运行小程序进行预览。

测试过程中可进入测试环境的管理后台进行业务数据的查看和管理。

17-14  生成预览二维码

因微信小程序账号中服务器域名在一个月内只能修改5次。当开发者使用同一个小程序账号进行多项目调试时,不便于每次都修改微信小程序账号中的服务器域名时,可在微信开发者工具和手机微信中进行设置,设置后不设置服务器域名亦能正常访问。

在微信开发者工具中,单击右上角的“详情”按钮,打开小程序详情信息侧边栏,如图17-15所示。

说明: C:\Users\Administrator\Pictures\2.png

17-15  微信开发者工具详情侧边栏

微信开发者工具详情侧边栏最下方“不校验安全域名、web-view域名、TLS版本以及HTTPS证书”选项默认未选中,将这个选项勾选上即可。这样就可以不在微信小程序账号中配置服务域名也可以在微信开发者工具中正常预览和调试。

用手机微信扫描预览二维码后,显示出小程序页面,单击页面右上角的…按钮,在打开的菜单中选择“打开调试”命令,此时会退出小程序,重新扫码再次进入即可。