站长新手入门:从0开始搭建微信小程序商城,不会代码也能开商城(附带源码)

本文涉及的产品
.cn 域名,1个 12个月
简介: 2020年全球疫情肆虐下,经济环境持续低迷,虽然国内已逐渐复苏,但线下消费仍然没法短期回到常态,所以今年开始直播电商、线上零售更加火爆。那么如果一个没有编程基础,或者说稍微懂一点技术的老板,要做小程序可以吗?那么今天跟着小A一起,从零开始搭建一个属于自己的小程序商城。(以下教程对完全的小白可能会有一定难度,如果阅读有问题可以反复研究)

2020年全球疫情肆虐下,经济环境持续低迷,虽然国内已逐渐复苏,但线下消费仍然没法短期回到常态,所以今年开始直播电商、线上零售更加火爆。那么如果一个没有编程基础,或者说稍微懂一点技术的老板,要做小程序可以吗?那么今天跟着小A一起,从零开始搭建一个属于自己的小程序商城。(以下教程对完全的小白可能会有一定难度,如果阅读有问题可以反复研究)

小程序申请及认证

1、微信小程序申请;

进入微信公众平台,点击右上角的“立即注册”,账号类型选择“小程序”。按照官方引导,逐步完成小程序注册。由于小程序商城开发必须用到微信支付功能,所以在填写到“主体信息登记”时,注册方式选择“微信认证”通过微信认证验证主体身份,需支付300元认证费。这样将小程序申请和小程序认证同时操作,节省审核时间。

如之前有同一主体已认证的服务号,可以登录认证服务号,开通小程序,按照步骤填写信息提交即可。通过认证服务号开通的小程序无需再次进行小程序认证。

2、小程序信息完善;

完成注册后,微信小程序信息完善步骤和开发可同步进行。选择对公打款的用户,完成汇款验证后,可以补充小程序名称信息,上传小程序头像,填写小程序介绍并选择服务范围。

3、小程序申请支付

已认证的小程序可登录小程序,申请微信支付。

开发前准备

1、绑定开发者;

登录微信公众平台小程序,进入用户身份-开发者,新增绑定开发者。已认证的小程序最多可绑定20个开发者,40个体验者。

2、获取AppID

进入“设置-开发设置”,获取AppID信息。

上传发布

1、登录开发者工具;

前往微信官方开发者工具下载页面,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看《开发者工具介绍》。打开小程序开发者工具,用微信扫码登录开发者工具!

2、管理员扫码 -> 填写好小程序的项目目录、AppID(必须是客户已注册好的AppID)、项目名称。

3、配置合法域名(工具 -> 项目详情 -> 域名信息)

4、如果域名还没有配置,请前往微信公众平台 ,登录时填写客户的邮箱和密码(如果小程序内嵌了h5页面,还需要配置业务域名)

5、配置服务器信息,填写所需的服务器域名。

6、去到该小程序的后台管理系统,修改数据,手机预览小程序,检查后台数据跟小程序数据是否有误。

7、若无误,可上传代码,上传成功后,去到微信公众平台 -> 登录(客户的账号密码) -> 开发管理 ->提交审核。

服务器、域名

推荐使用Linux系统,不需要担心不会操作,直接用宝塔的控制面板,都是可视化的操作(下文也会提到宝塔的安装使用问题)

入门级配置

CPU:1核内存:1G实例规格:突发性能t5实例带宽:1M系统:CentOS 7.4 64位(推荐)价格:366元/年 933.3 元/三年

查看服务器详情

标准级配置

CPU:2核内存:4G实例规格:突发性能t5实例带宽:2M系统:CentOS 7.4 64位(推荐)价格:936元/年 2386.8 元/三年

查看服务器详情

域名的话,看各位喜好,如果没有PC商城需要,就按照最便宜的卖就好,也看不到域名路径,如果是有PC的话,还是推荐主流域名,如.com、.cn、.net…主要原因是对收录有帮助,选了一个小众的域名,可能短期内收录收到影响。

宝塔面板安装使用

1、连接服务器

MacBook系统连接服务器,直接SSH root@IP,windows的话可以用宝塔远程工具可以。

输入账号和密码,注意密码在输入时是不显示的,大家不要以为密码没输入。

2,安装宝塔面板

执行以下代码进行安装宝塔6.9免费版。宝塔6.9版本已经很稳定了,推荐大家直接安装6.9版本(注意:宝塔linux6.0版本是基于centos7开发的,务必使用centos7.x 系统)

yum install-y wget&&wget-Oinstall.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

Copy

如果大家系统是centos7以下的大家还是乖乖使用宝塔5.9的安装脚本(Centos官方已宣布在2020年停止对Centos6的维护更新,推荐大家装系统直接安装centos7)

yum install-y wget&&wget-Oinstall.sh http://download.bt.cn/install/install.sh && sh install.sh

Copy

回车进行安装。

输入y,并回车。接下来便是等待宝塔面板进行安装。

我们得到登录宝塔面板的URL,账号和密码。

面板地址:http://{您的服务器IP}:8888

初始化:第一次使用会要求初始化配置,请按照提示填入配置信息

安装完成宝塔面板后,我们就可以在浏览器中访问了。复制Bt-panel中的URL到浏览器上访问。注意要打开服务器上的8888端口

输入默认的账号和密码进行登录。

3,设置宝塔面板

登陆后进入宝塔面板我们可以看到如下图所示,你可以选择LNMP或者LAMP进行安装。看大家网站需要什么环境进行选择。如果是生产环境推荐大家使用编译安装,如果只是测试环境选择极速安装。两者的区别是编译安装慢但稳定,极速安装虽然慢但是没编译安装稳定。

推荐大家首次进入宝塔面板前不要进行环境的安装,因为在安装环境不能更改宝塔面板的设置。推荐大家先更改宝塔面板的默认设置,编译安装环境将近一个小时。在这段时间里我们先将宝塔面板设置好提高面板的安全性。

3.1,首先我们进入面板设置

3.2,更改面板端口

将端口更改为不常用的端口。

3.3,绑定域名

你可以绑定一个域名绑定完域名后只能通过你绑定的域名来访问面板。

3.4,绑定ip

如果你有固定的ip,你可绑定ip访问,绑定了ip访问你只能通过绑定得这个ip进行访问。如果你是家用电脑就不要绑定ip了,因为家用电脑的ip是动态的。这就会造成ip发生改变面板访问不了。

3.5,更改默认的面板用户和密码

更改宝塔安装完成时的默认用户名和密码,设置一个自己能记住的用户名和密码,密码不要太简单了。

3.5,绑定宝塔账号

如果你有宝塔账号你可以绑定下,没有的话可以去宝塔官网申请。宝塔账号在购买付费插件,开通专业版时要用到。点击前往注册宝塔账号,领取¥3188的宝塔面板礼包。

3.6,绑定微信小程序

由于微信小程序是付费插件,你只有购买了或者开通专业版才能使用。微信小程序能够监控服务器,方便用户随时查看服务器状态。

4,宝塔面板安全设置

在这里你可以开启和禁用一些端口。推荐大家更改ssh端口,和禁用ping。更改FTP端口。更改phpadmin默认端口。不常用的端口可以把它关闭,等要使用了在开启。

5,安装面板环境

在软件管理选择你所需要的网站环境进行安装。

在这里选择LNMP进行安装,即Linux+Nginx+Mysql+Php。

6,创建网站

等网站环境安装完成后便可以创建网站,有两种方法可以创建网站。第一种直接在选择网站,选择添加站点,进行创建网站。

第二种在软件管理中的宝塔插件中安装宝塔一键部署源码插件进行创建网站。

对于小程序建站,那么直接用第一种建站方式,然后把代码上传就可以。

代码上传
准备工作差不多了,那么最后就是安装部署了,以下用来客推电商源码为例:

环境配置正常,最好是PHP5.6+Mysql5.5

win下面可以使用phpstudy集成环境部署安装

Linux下面可以使用宝塔部署安装

需要准备的东西

小程序appid:

AppSecret(小程序密钥) :

支付商户号:(微信支付未开通可以不要)

支付key:(微信支付未开通可以不要)

支付证书(微信支付未开通可以不要)

到官网下载开源版安装包 https://www.src1024.com/mini/wx/95.html

准备安装:

(一)把后台文件丢到环境根目录下,我的是直接放在根目录下的一个文件夹里,直接访问这个文件夹即可

(二)访问本地文件,安装一直下一步,配置环境要支持,不支持的自己百度一下,不然会安装失败,下面也给了几种环境不支持的修改方案

(三)自定义配置文件,报数据库连接失败的检查一下自己连接的数据库,及自己填写的信息是否正确(我连接的是本地的,我数据库没有密码)

(四)安装成功的标志

(五)安装成功后登录后台添加几条产品包括产品分类,品牌,商品规格等

(六)在后台系统管理->系统设置里填写相对应的内容

小程序api域名和系统域名修改需正确,后面会影响小程序的接口调用及图片路径的显示

小程序域名:http://你的域名/后台目录名称/LKT/index.php?module=api

IP地址:你服务器的IP,如果是本地请填写127.0.0.1

系统域名:http://你的域名/后台目录名称

注意:如果你的系统后台目录直接是定向域名,则上面的http://你的域名/后台目录名称 直接换成 http://你的域名/即可,不需要加上目录名称

小程序id和小程序密钥填对,后面也会影响小程序的正常运行

(七)在系统管理->支付设置里填写相对应的内容。

不需要微信支付的可以跳过

(八)配置小程序,把小程序 的文件准备到目录下,微信开发者工具新建项目。AppID要换成自己的,不然会变成别的项目

(九)进入小程序第一件事就是修改接口路径,即utils/util.js的getUri方法里面路径!

例如现在访问后台的路径是:http://localhost/open/app/LKT/index.php,那么在utils/util.js 的getUri代码里面的路径应该改成:http://localhost/open/app/LKT/index.php?module=api&software_name=3&edition=1.0

例如现在访问后台的路径是:http://www.laiketui.com/LKT/index.php,那么在utils/util.js 的getUri代码里面的路径应该改成:http://www.laiketui.com/LKT/index.php?module=api&software_name=3&edition=1.0

function getUri(){

  return 'http://localhost/open/app/LKT/index.php?module=api&software_name=3&edition=1.0'

}

(十)小程序及后台都安装完成了,刚进小程序页面就是这样啦!

总结:安装部署其实很简单,后面要做的就是运营,如果搭建这个小程序还是有问题的,可以直接找15205564163,免费帮忙部署。

相关文章
|
2月前
|
定位技术 开发工具 Python
代码让微信开屏地球转起来
这段内容介绍了如何使用Python制作一个动态旋转的地球图像,类似于微信启动画面中的地球。文章详细描述了所需准备的三个素材(地球表面、云图和微信地球的抠图),并解释了通过调整云层和地面的旋转速度来实现自然的相对运动效果的基本原理。文中还提供了一个GIF压缩工具的链接,以及部分代码示例。此外,文章最后提到了一些Python学习资源,包括学习路线、开发工具、视频教程、实战案例、练习题和面试资料。
40 0
|
24天前
适用于alist的微信遮罩代码
最近在研究alist网盘工具,终于找到了适用于alist的微信遮罩代码。代码如下:``` ```。下面是示例图片,可根据需要自行替换。![点击查看示例图片](https://ucc.alicdn.com/pic/developer-ecology/ms7h4bs4k7hme_1a36659fd3054e508107f6c764c6f0d3.jpg)
|
24天前
|
开发框架 小程序 JavaScript
小程序代码丢失!反编译找回
小程序源代码的容易获取问题确实存在一些潜在的安全隐患。然而,现在的小程序开发框架采用像 Babel 这样的打包工具,将 JavaScript 逻辑代码混合在一个文件中并进行转编译,使其变得难以理解。
28 0
小程序代码丢失!反编译找回
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
34 2
|
27天前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
21 0
|
1月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
31 0
|
3月前
|
JSON 小程序 JavaScript
微信小程序制作 购物商城首页 【内包含源码】
这篇文章提供了一个微信小程序购物商城首页的实现方法和源码,包括页面布局、数据结构、核心代码以及如何配置tabBar和搜索框组件。
微信小程序制作 购物商城首页 【内包含源码】
|
2月前
|
搜索推荐
2024微信个人名片在线生成HTML源码
微信个人名片卡片在线生成,这是一款微信个人名片生成网站源码,无第三方接口,本地直接生成可长期使用。 主要用于生成用户个性化的名片页面,包括头像、姓名、联系方式、个人介绍等信息。 在本地浏览器打开即可,源码是html的,也可上传到服务器上。
46 0
2024微信个人名片在线生成HTML源码
|
2月前
|
小程序 JavaScript Go
代码总有一个是你想要的分享63个微信小程序源
分享63个微信小程序源代码,包括电商系统、同城拼车、博客等多种应用,涵盖C#、Node.js、Golang等技术栈。每个项目附带源码和示例,适合初学者和开发者参考学习。提取码:8888,代码效果参考:http://www.603393.com/sitemap.xml。
55 2
|
3月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
下一篇
无影云桌面