2.1.6 运行客户端
表2-1 预览小程序的步骤
步骤 |
微信公众平台|小程序 |
牛刀云管理后台 |
牛刀云发布界面 |
第1步 |
小程序注册 配置服务器域名 |
配置小程序账号信息 |
获取服务器域名 |
第2步 |
下载安装微信开发者工具 新建小程序项目 |
|
下载小程序并解压 |
第3步 |
生成预览二维码 |
|
|
第1步 小程序注册并配置服务器域名
(1)小程序注册
首次发布小程序,需要先进行小程序注册,获得小程序账号的appid和appsecret。具体过程参见“20.1小程序注册”一节。
(2)配置小程序账号信息
应用模板的好处就是所有人都可以使用,而每个人的小程序账号信息又不相同,因此,应用模板提供微信配置功能,用来设置商户的小程序账号信息。同时,这个配置功能不对客户开放,只对商户开放。因此牛刀小店的商户端里面就有微信配置功能,商户在此填写自己的小程序appid和appsecret。
在牛刀小店商户端中配置小程序参数的方法是:首先进入商户端,选择左侧功能树上的“微信配置”菜单命令,打开“微信配置”页面。如图2-12所示.。切换到“小程序”页签,单击“新建小程序”按钮,输入小程序名称,在appID输入框中输入appid,在appSecret输入框中输入appsecret.。
图2-12 商户端里面的微信配置
(3)获取服务器域名
在制作台的“发布”页面中,单击“第三步 导入微信开发者工具”按钮,显示出发布版本的服务器域名,如图2-13所示。
图2-13 获取服务器域名
(4)配置服务器域名
在微信公众平台|小程序中配置服务器域名的目的是设置安全访问域名,即小程序只访问该域名下的链接,不能访问其它域名下的链接,保护小程序使用者的安全。
配置的具体过程参见“20.2配置服务器域名”一节。
第2步 在微信开发者工具中添加牛刀小店项目
目前有两种在手机微信中运行小程序的方法,一种是在微信开发者工具中生成预览二维码,用手机微信扫描这个二维码,即可在手机微信中运行。不过这个二维码是临时的,一会儿会失效;另一种是在微信开发者工具中上传小程序,在微信公众平台|小程序中提交发布,发布成功后,生成圆形小程序二维码,用手机微信扫描这个二维码,即可在手机微信中运行。
综上所述,在手机微信中运行小程序需要使用微信开发者工具,因此先下载微信开发者工具,再安装微信开发者工具;然后将牛刀小店版本导入到微信开发者工具中,就可以在微信开发者工具中生成预览二维码,即使用第1种方法,在手机微信中运行小程序。
(1)下载、安装微信开发者工具
开发者可在微信开发者工具内完成小程序的开发、调试、预览、上传代码等操作。在微信开发者工具内开发时需要手写代码,只适合开发人员使用。牛刀云提供可视化、拖曳式制作方法,适合所有人使用。因此使用牛刀云开发小程序的步骤是,先在牛刀云中进行制作,用浏览器预览查看效果,之后,导出制作好的版本,导入到微信开发者工具中。只使用微信开发者工具预览和上传代码等功能。
下载、安装微信开发者工具的具体步骤参见“20.3下载、安装微信开发者工具”一节。
(2)下载牛刀小店版本
微信小程序有自己的语法体系,不同于html语法,目前只能在手机微信和微信开发者工具中运行,不能在浏览器中运行。因此,在浏览器中预览小程序的运行效果是牛刀云提供的模拟效果。
下载牛刀小店版本的方法是:进入“发布”页面,单击页面中的“第二步 下载小程序”按钮,页面中显示“正在生成微信小程序,请稍等…”,使用浏览器的下载功能,下载牛刀小店版本。如图2-14所示。
图2-14 下载小程序
下载后的文件名是mainApp.zip,解压到某个目录下,例如:D:\微信小程序\shop。解压后的目录结构如图2-15所示。
图2-15 解压版本
(3)将牛刀小店版本导入微信开发者工具
打开微信开发者工具。在微信开发者工具中新建一个项目,输入小程序账号的appid、项目名称、选择项目目录,例如:D:\微信小程序\shop。如图2-16所示。单击“确定”按钮,创建牛刀小店小程序项目。
图2-16 新建小程序项目
第3步 生成预览二维码
在微信开发者工具中创建小程序项目后,左侧显示项目的运行效果,右侧显示项目中的目录和文件。单击顶部导航栏中的“预览”按钮,生成预览二维码,如图2-17所示。用手机微信扫一扫扫码这个二维码,即可在手机微信上运行小程序。
图2-17 生成预览二维码