手把手教你做一个自己的小程序

时间:2021-10-29 来源:未知网络 作者:996建站网

如果要说我在公众号后台看到大家问得最多的问题是什么,那毫无疑问一定是有关于小程序的各种问题。例如个人可不可做小程序?小程序怎么做?小程序源码怎么用?等等。

手把手教你做一个自己的小程序插图<img data-rawheight="1715" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1077″ class=”origin_image zh-lightbox-thumb lazy” width=”1077″ data-original=”https://pic4.zhimg.com/v2-037d4686e3c68305dc284ad2f5ef32ff_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71dd95c1d.jpg”/>

年关将至最近也是出了一个有关小程序审核的消息,不少朋友看了之后更是开始准备火急火燎地制作自己的小程序了。但是上面的那些问题仍然是不断困扰着大家。

那么今天我就来给大家分享一下小程序从注册到开发的所有流程,希望能够帮助大家在年前制作好属于自己的小程序。

1. 小程序注册

手把手教你做一个自己的小程序插图1<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic2.zhimg.com/v2-491774d8af8007875707df02b7fecd5d_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71dd95c1d.jpg”/>

首先我们需要打开“微信公众平台”的页面。

手把手教你做一个自己的小程序插图2<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic4.zhimg.com/v2-1e35b9a20ea5ec59cc29477bbb2af9d3_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71dd95c1d.jpg”/>

然后向下滑动页面,找到“小程序”的入口。

手把手教你做一个自己的小程序插图3<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic2.zhimg.com/v2-20cc0dbbd00ade693216541f111361c5_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71dd95c1d.jpg”/>

进入页面后继续下拉,就可以看到注册小程序的入口了。

手把手教你做一个自己的小程序插图4<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic1.zhimg.com/v2-c954d225b2197d3b4dc887ec386b706c_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71dd95c1d.jpg”/>

在这里填写好你的信息,并进行邮箱认证和对应的微信号绑定,你就可以拥有自己的小程序了。

不过目前的小程序仅仅只是一个雏形而已,不具备任何功能,所以接下来我们就需要进行信息完善和开发的操作。

2. 小程序信息完善

手把手教你做一个自己的小程序插图5<img data-rawheight="496" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic3.zhimg.com/v2-49b06f55a3f285af010c5b2822d4e4da_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71dd95c1d.jpg”/>

此时回到一开始的“微信公众平台”,输入你刚刚注册的邮箱和密码,再用绑定的微信号扫描二维码,就可以进入小程序的后台界面。

手把手教你做一个自己的小程序插图6<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic1.zhimg.com/v2-4ae4a5ea37e9f82b5c07fa2592de21bc_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

手把手教你做一个自己的小程序插图7<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic1.zhimg.com/v2-fa4eb0744987231f38ad61fda02239ec_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

手把手教你做一个自己的小程序插图8<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic3.zhimg.com/v2-0a957b70beeab31174a332c8d5b7bb12_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

然后我们就可以开始对小程序的基本信息来进行完善,需要注意的是在这里填写的信息都是可以进行修改的,所以即使你没想好也可以先注册,等到确定自己小程序的定位后再进行修改和上线。

这里先回答大家的一个问题,“个人可不可以做小程序”,当然是可以的,图片上用来演示的这个小程序就是利用个人主体来制作的,但是个人注册的小程序是无法认证的,目前只有通过企业主体注册的小程序可以认证,每年认证费用为300元。

3. 下载小程序开发工具

手把手教你做一个自己的小程序插图9<img data-rawheight="496" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic2.zhimg.com/v2-d6ffbc60d6eaac0a092b48d6bcff36fd_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

接下来我们就需要下载用于开发小程序的对应工具,我们先回到一开始填写小程序资料的首页。点击上图指示的“普通小程序开发工具”

手把手教你做一个自己的小程序插图10<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic1.zhimg.com/v2-f60192410333a7bf3ca450d9d8f8f2b0_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

然后多次点击屏幕右侧的箭头进行翻页。

手把手教你做一个自己的小程序插图11<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic2.zhimg.com/v2-00fd8ab826bdadf6d1f624df78ebbcc9_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

然后就可以到达这个页面,选择适合你电脑的版本进行下载即可。

4. 小程序源码的使用

手把手教你做一个自己的小程序插图12<img data-rawheight="480" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”600″ class=”origin_image zh-lightbox-thumb lazy” width=”600″ data-original=”https://pic2.zhimg.com/v2-8ca3caac97f284228bcefa748da8e6e9_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

当我们下载并安装好“微信web开发者工具”后,双击打开并使用自己绑定的微信号进行登陆。

手把手教你做一个自己的小程序插图13<img data-rawheight="474" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”411″ class=”content_image lazy” width=”411″ data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

手把手教你做一个自己的小程序插图14<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic1.zhimg.com/v2-875d506ec05f5984e5fb2055a2a64c20_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

这里要求你填写的小程序AppID在小程序后台的“设置”中的“开发设置”里可以查看到。

然后接下来要讲的就是大家在某宝或者网上得到的源码该如何使用,其实很简单,在上面图中的“项目目录”位置选择我们准备好的源码就可以了,需要注意的是,我们选择的源码必须要解压出来,然后选择包含该源码所有文件的文件夹,而不是单一文件。

手把手教你做一个自己的小程序插图15<img data-rawheight="538" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic1.zhimg.com/v2-e04b0ad6b59b961787937bac7b8204c0_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

之后我们点击确定就可以对我们的小程序源码来进行编辑了。

5. 如何小程序内的文字和图片

可能有的朋友不太明白源码是什么,大家可以理解为一个框架,有了源码我们就有了对应的框架,很多情况下我们不需要源码内容有多丰富,但必须要足够我们展示自己的信息内容,也就是框架的数量和分配必须合理。

那么选择了一个好的框架之后我们就可以开始着手对小程序内的文字和图片进行修改了。

① 文字修改

手把手教你做一个自己的小程序插图16<img data-rawheight="538" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic4.zhimg.com/v2-e9fe28df3fc2554dc45ae6e906084c93_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

那么假设我的这个小程序是做真空包装私房菜的,而源码中的内容是水果,这样的话我就需要修改源码中的信息内容。

手把手教你做一个自己的小程序插图17<img data-rawheight="538" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic3.zhimg.com/v2-340b5255806a712ff1d45aaf1255a9ba_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

首先点击这个“搜索放大镜”,然后输入我们要修改的文字内容,例如“新鲜梨花带雨”,然后我们就可以找到在代码中对应的位置,然后双击进行修改就可以了。

手把手教你做一个自己的小程序插图18<img data-rawheight="538" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic2.zhimg.com/v2-87d14669e425ddb967fa29e1efede539_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

通过这样的修改我们就可以把小程序页面中的文字内容变成我们需要的内容。

② 图片修改

在改动完文字之后,这张图片仍然是水果的,所以我们也需要把图片进行对应的修改。

手把手教你做一个自己的小程序插图19<img data-rawheight="538" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic4.zhimg.com/v2-bf4947e55808058a89265d6b7d92c9fb_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

首先使用“箭头工具”,然后鼠标指向我们要修改的图片,双击图片我们就可以看到对应图片的名称,这里的这张水果图片叫做“goods1.png”

手把手教你做一个自己的小程序插图20<img data-rawheight="582" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic1.zhimg.com/v2-df34f201b7e3311f99b5a6a3992290b4_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

手把手教你做一个自己的小程序插图21<img data-rawheight="538" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic1.zhimg.com/v2-c08e1afbb3785c79fa384a2171c44bc8_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

同样的,我们把准备好的图片放入源码文件的“image”中,这里我的图片名称叫做“lengchitu.jpg”,然后回到开发工具利用“搜索放大镜”找到“goods1.png”换成“lengchitu.jpg”就可以了。

当所有东西都修改好了之后不要忘了点击上方的“编译”来进行保存。

通过这样每个页面不断的修改,你就可以在外观上逐步完善自己的小程序了。

6. 上传腾讯云、设置域名、搭建PHP后台

最后我们需要做的就是把制作好的小程序上传到腾讯云,然后为自己腾讯云的服务器设置好一个域名。

当然如果你的小程序是商城类或者存在一些特殊的功能,例如微信支付等等,那么就需要再建立一个PHP的后台。关于这个后台的建立,涉及到的东西就很多了,我建议是把这3个步骤交给专业的人士去做。

毕竟专业人士搭建的后台更加稳定,在你的小程序上线之后也不容易出现过多的bug。所以把专业的事情交给专业的人去做才是项目发展过程中最正确的方案。

7. 小程序的上传与审核

手把手教你做一个自己的小程序插图22<img data-rawheight="538" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic2.zhimg.com/v2-dee8b9d949b479d7d2fccfe487514a25_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

在小程序的所有部分都建立完成后,我们就可以把小程序上传到官方服务器中。

手把手教你做一个自己的小程序插图23<img data-rawheight="518" src="data:image/svg+xml;utf8,” data-size=”normal” data-rawwidth=”1080″ class=”origin_image zh-lightbox-thumb lazy” width=”1080″ data-original=”https://pic3.zhimg.com/v2-f55dafcea89be0dc76e1c01dbbadf6da_r.jpg” data-actualsrc=”/wp-content/uploads/2021/10/https://www.00996.cn/wp-content/uploads/2021/10/20211029040029-617b71ddca776.jpg”/>

然后我们回到微信公众平台的后台,就可以提交给微信官方进行审核,审核通过之后就可以发布。

在3月中旬微选就会正式上线,如果你是入驻微选的商家,那么一定要赶快做好自己的小程序,这就相当于是你某宝的店铺门面,连店面都没有怎么赚钱呢?

除了商城小程序以外,我们还可以将自己的创意在小程序中展示出来,就像最近热门的很多问答小程序、小游戏小程序一样,不过这一类就需要专门的技术团队来为你进行源码的开发了。

所以这也是各类热门小程序源码价格达到上千元的原因,在这里我就把我搜集到的1000多套小程序源码和大量小游戏源码送给大家(在杰神联盟公众号回复“小程序”可领取),希望能够对大家带来一定的帮助,当然无论你是自己做小程序还是像某宝商家一样出售获利,都是可以的。

小程序是未来微信发展的趋势,更是一个引流变现的入口,就算你不做自己的小程序,你也一定要懂,跟不上时代如何进步?

—————————–

本文首发自我的原创公众号:杰神联盟(ID:jieshen680),关注可获取更多互联网项目以及新媒体领域的干货。

手把手教你做一个自己的小程序插图24

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序