做自带流量的微信小程序,看这一篇就够了

本文详细介绍如何从零开始创建并发布一个微信小程序,包括注册账号、页面配置、组件引入及代码上线等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

大家好,我是小佑@小佐:https://blog.csdn.net/Smell_rookie,是一名页面仔工程师,我会不定时在CSDN更新我的博客,有兴趣的可以点个关注来逛逛我的主页。

第一步:

注册一个邮箱账号备用。在微信公众平台上点立即注册,选择小程序填好刚才注册的邮箱和其他信息。
在这里插入图片描述
点注册,然后去邮箱验证激活,之后信息登记,输入提示的内容。完成后登录在微信公众平台上扫码登录。
在这里插入图片描述
手机上选择刚才注册的邮箱账号的小程序登录。我的是这个:
在这里插入图片描述

进来后你可以对小程序的一些信息就行补充:我这里已经填写完了。
在这里插入图片描述
在这里插入图片描述
接下来你需要在设置里面的开发设置中获取你的小程序appid
在这里插入图片描述
在这里插入图片描述
这个AppID复制下来备用。

第二步:

打开微信开发者工具

在这里插入图片描述
点击第一个框添加一个小程序—新建项目的信息:

在这里插入图片描述
填好后点击新建。进来后这个小程序就长这样了:

在这里插入图片描述
我们打开app.json看一下:

在这里插入图片描述
pages就是小程序的所有页面的配置路径,它的顺序就是你打开小程序优先展示哪个页面,这里默认就是首页(index)。
window就是配置全部页面的参数。关于window的所有配置可以参考文档window配置
当然你想有多个tab标签页面也是可以的,在app.json中配置tabBar对象:

在这里插入图片描述页面就会变成这样了

在这里插入图片描述
另外还可以配置文字选中与不选中的颜色:

在这里插入图片描述
注:颜色值仅支持16进制。

借着我们新建一个页面test,在pages文件下新建一个test文件夹

在这里插入图片描述
再在其下新建test的Page

在这里插入图片描述
输入test后按下tab键:

在这里插入图片描述
此时就有test的文件页面了:

在这里插入图片描述
test.js是用来写js代码的,比如事件、方法、数据处理等等。
test.json是这个页面的配置,可以配置这个页面的标题,引入的组件、顶部标题栏颜色等等。
test.wxml就是页面的类似于html代码了。
test.wxss是页面的样式css.

然后去app.json页面看看有没test的路径,没有的自己加上去:

在这里插入图片描述
此时就有可以在页面上敲你想要的代码了。

第三步:

页面的样式可以引入组件框架,帮助我们少写一些样式和wxml代码。引入样式可以参考我之前写的小程序接入vant Weapp组件的详细步骤

第四步:

当所有代码都写好之后,就可以去发布体验版和线上版了。前提是文件的总大小不能超出1024Kb*2的大小:

在这里插入图片描述
之后我们就可以写点击上传:

在这里插入图片描述
填写版本号和项目备注:

在这里插入图片描述
然后点击上传,然后去到微信公众号平台的"版本管理"里看到:

在这里插入图片描述
将刚刚上传的代码设为体验版本:

在这里插入图片描述
然后点提交审核,要是之前没有完善小程序信息的话会提示:
在这里插入图片描述
按照提示去完善信息就行了。当提交审核之后这里就会有提交的记录了,接下来就静静等待微信审核通过发布你的小程序了。

在这里插入图片描述
发布后倘若你的小程序使用了服务(自己的服务器或第三方的服务)都需要在微信公众平台配置使用的域名信息。

以下是我开发的个人的计算器小程序,可以扫码了解以下:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

评论 67
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端发现

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值