朋友们想要通过小程序搭建自己的商城,拿微信小程序来讲,前提是要有一个已经认证过的微信小程序。关于如何免费注册并认证一个小程序,详见我之前发的教程(https://www.jianshu.com/p/8da5720a6abf),在前面的教程中关于设置小程序内容的部分只是粗略地说了一下添加商品的部分,今天我们就以微商城为例,重点讲解教程(https://www.jianshu.com/p/8da5720a6abf)中的第三步,教大家配置自己的商城。
ps:已经注册并认证小程序的朋友,请直接跳转本文第三步。
1、在微信上搜索“序无忧”,关注序无忧官方微信公众号,然后点击工具中心菜单中的免费认证

2、在免费认证界面中填写企业信息即可

3、法人微信会收到腾讯下发的信息

4、法人点击进行人脸识别

5、收到信息-验证成功。腾讯会发一条信息,按照提示设置账号密码即可。
第二步,我们进行对接小程序。
1、登录微信公众平台(mp.weixin.qq.com)
点击开发-开发设置,将appid和小程序密钥记录下来

然后在点击左侧栏-设置,最先面有个原始id,同样记录下来(这三串代码非常重要,最好在记事本中记下来保存好)

2、打开营销宝箱小程序后台(xcx.yingxiaobaoxiang.com),注册并登录后,点击创建项目,填写一下信息,选择手动模式。

选择自己想要的模块,我这里选了一个微商城(如果出现没有下一步,说明浏览器内核不支持,推荐使用chrome内核的浏览器,例如谷歌浏览器、火狐浏览器等,360极速浏览器也行)

按照自己的想法配置

创建完成后,点击去配置

打开下面的界面,点击绑定

把我们前面记录好的原始ID,appid,密钥(Appsecret)分别填写进去

填写完毕后,点击立即绑定
上面都完成后,点击发布项目 这个按钮。

系统会生成一个api域名,我们把https后面的域名复制下来,同样记录到我们记事本中

再次打开微信公众平台,点击开发-开发设置,在打开的界面中配置服务器域名

然后把我们上面复制下来的服务器域名粘贴到request合法域名框内,点击保存并提交

第三步,设置小程序内容
直奔主题,微信小程序认证并对接好之后,打开营销宝箱(xcx.yingxiaobaoxiang.com),登录后,点击左侧 小程序项目 ,然后鼠标放到我们要配置的小程序上点击 管理项目。

在弹出的界面中点击 微商城 ,在微商城的下拉菜单中点击 基本设置 ,先把我们商城的基本信息补充完整

其他配置,按自己的需求勾选、填写

下面来到了关键一步,商品管理
首先,我们点击分类管理,为自己的商品添加分类。

点击新增按钮后,填入分类名称(我这里想上架百事可乐,就填了一个饮料,分类图标可以不上传),点击确定

品牌管理和分类管理类似,就不详细说了(品牌填个百事就行了,logo需要上传)

然后,点击商品管理,点击 新增 按钮,添加我们想要上架的商品,在第一页填入名称、分类、品牌,并上传图片

完毕后点击下一步,在第二页填入售价和库存,点击保存,就完成了一个商品的上传

商品都添加完毕后,商品配置基本上就完成了,然后我们配置一下商城的首页显示效果。
因为我这里要添加一个轮播图,加上原有的公告栏和搜索栏,最后再添加几个导航按钮,所以我先点击轮播设置,上传要轮播的图片,链接地址选择我要链接的商品(之前上传的百事可乐),确定即可

我又在 首页公告 中设置了我的公告

最后设置了我想要的导航按钮

都完成后点击首页配置,将轮播图和导航组件添加进首页,点击 提交保存当前布局 按钮。

这样商城基本布置完毕,大家熟悉后可以对自己的商城可以进行更多细节的完善。
设置好商城后面的步骤就和我之前发的教程(https://www.jianshu.com/writer#/notebooks/48256577/notes/78867534)一样了,熟悉的可以忽略,直接实践操作即可。
第四步,上传代码
依次点击项目发布,发布新版本两个按钮

项目发布成功后,点击去下载,在打开的界面中点击微信按钮

下载完成后得到一个压缩包,右键后点击解压文件,得到一个文件夹

然后下载安装微信开发者工具(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)
用小程序管理员的微信扫码登录微信开发者工具,登录后点击那个大加号,再点击导入项目,在目录那一栏点击右侧小箭头,选择我们解压好的代码包文件夹,导入

导入后,我们可以先点击预览 ,在生成二维码后用微信扫码预览自己的小程序,最后点击上传 按钮
再弹出的界面中,输入版本号

最后,关键的第五步,审核上线小程序
重新登录微信公众平台,点击 版本管理 ,再点击 提交审核

按照自己小程序内容填写版本描述等相关信息,再次点击提交审核

提交审核之后,静候佳音即可。审核通过之后,在版本管理中点击发布,就可以上线我们的小程序了。
网友评论