首页 >> 牛刀云小程序开发教程 >> 第1篇 制作模式 >> 牛刀小试 >> 电商模板案例:牛刀小店

2.1.6 运行客户端

在运行牛刀小店的商户端之后,就会希望在手机微信中运行客户端。在微信中运行小程序,需要先在微信公众平台上注册小程序账号,一个小程序账号对应发布一个小程序。在小程序账号中可以设置小程序基本信息:名称、图标、描述等,同时下载开发工具并进行开发设置。第一次在手机微信中运行小程序的过程比较复杂,步骤见表2-1

2-1 预览小程序的步骤

步骤

微信公众平台|小程序

牛刀云管理后台

牛刀云发布界面

1

小程序注册

配置服务器域名

配置小程序账号信息

获取服务器域名

2

下载安装微信开发者工具

新建小程序项目

 

下载小程序并解压

3

生成预览二维码

 

 

 

1 小程序注册并配置服务器域名

1)小程序注册

    首次发布小程序,需要先进行小程序注册,获得小程序账号的appidappsecret。具体过程参见“20.1小程序注册”一节。

2)配置小程序账号信息

应用模板的好处就是所有人都可以使用,而每个人的小程序账号信息又不相同,因此,应用模板提供微信配置功能,用来设置商户的小程序账号信息。同时,这个配置功能不对客户开放,只对商户开放。因此牛刀小店的商户端里面就有微信配置功能,商户在此填写自己的小程序appidappsecret

在牛刀小店商户端中配置小程序参数的方法是:首先进入商户端,选择左侧功能树上的“微信配置”菜单命令,打开“微信配置”页面。如图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  生成预览二维码