微信小程序详细教程，两小时零基础注册和使用小程序，并利用Ai引擎真正0代码开发小程序！！！(干货，建议收藏)_微信小程序框架教程-程序员宅基地

技术标签： 经验分享  学习  微信小程序  人工智能  小程序  

准备工作：

  • 一台电脑
  • 下载并安装微信开发者工具
  • 一个微信扫码登录

        随着科技的飞速发展和互联网的普及，微信作为一款社交媒体平台，已经渗透到我们日常生活的方方面面。无论是老年人还是年轻人，无论是城市还是农村，微信的用户群体已经覆盖了各个年龄段和各个社会阶层。它不仅仅是一个社交工具，更是一个综合性的生活服务平台，提供了支付、购物、娱乐、学习等多种服务。

       微信小程序作为微信平台的一个重要组成部分，也随着微信的普及而得到了广泛的关注和应用。小程序的开发和维护已经成为一个热门的技术领域，吸引了大量的开发者和企业的投入。通过微信小程序，用户可以方便地获取各种服务，而无需下载安装额外的应用。这种便捷性使得微信小程序在短时间内得到了迅速的推广和应用。

       随着微信小程序市场的不断扩大和完善，开发微信小程序已经不再仅仅是技术人员的专利。越来越多的企业和个人也开始投入到微信小程序的开发中，通过小程序提供各种创新的服务和功能。这不仅推动了微信生态系统的繁荣和发展，也为广大用户带来了更多元化、个性化的选择。

       微信以及微信小程序的普及和应用，已经改变了我们的生活方式。无论是衣食住行还是娱乐消遣，微信及其小程序都为我们提供了极大的便利和丰富的选择。未来随着技术的不断进步和社会需求的变化，微信小程序的开发和应用将会继续扩大和完善，为人们的生活带来更多的惊喜和便利。

      小程序的前端代码和web是极其相似的，wxml和html、wxss和css以及js，现在还经常将wxss读作css。如果你有一定的web开发基础，对开发小程序很有帮助，当然如果你是零基础，那么也有零基础开发小程序的办法。

一.如何注册小程序

第一步：登录微信公众平台，单击右上角的“立即注册”，开始注册。

微信公众平台 (qq.com)

第二步：在注册类型这里，选择注册“小程序”。

第三步：进入账号资料填写页面，填写绑定邮箱和密码，点击注册。

请填写未注册过公众平台、开放平台、企业号、未绑定个人号的邮箱。而且每个邮箱只能申请一个小程序。

第四步：激活邮箱，登录邮箱，查收激活邮件，点击激活链接。

第五步：填写主体信息，确认主体类型。完善主体信息和管理员信息。

第六步：认证

企业个人为主体的小程序只需要在表单中填写资料完成验证，就可以直接注册小程序。注意：个人小程序没有支付功能。

企业类型帐号可选择两种主体验证方式。

方式一：支付验证需要用公司的对公账户向腾讯公司打款来验证主体身份，打款信息在提交主体信息后可以查看到。请根据页面提示，向指定的收款帐号汇入指定金额。温馨提示：请在10天内完成汇款，否则将注册失败。

方式二：微信认证通过微信认证验证主体身份，需支付300元认证费。认证通过前，小程序部分功能暂无法使用。

第七步：填写管理员信息。

注意事项：主体信息一旦提交，则不可修改。

二.公众号注册小程序方式

还可以通过认证过的公众号直接使用公众号资质快速注册小程序。不用提交资料和交认证费用。

第一步：在微信公众号后台，点击“小程序管理”。

第二步：选择“快速注册并认证小程序”。然后借助公众号资质，绑定小程序管理员，即可完成小程序注册。

使用以上两种方式都可以完成小程序的注册，有认证公众号的适合第二种，没有的选择第一种。资料填写后等待审核，审核完成后小程序就可以使用了。

三.接下来是分享一个适合初学者的实战开发教程

登录 - 第二大学 - 大学生创业培训 - Powered By EduSoho

该教程免费，可以打开该教程参考一步步做，该教程是一个实际的小型项目，跟他做完基本就可以入门了。有信息的展示、发布等功能，可以显示到手机操作。

如果你已经懂一些前端编程（前端开发使用的语言基本是HTML5 + CSS + JavaScript）知识，那么可以在上述教程代码的基础上，可以自己参照官方文档开发其他项目也是足够的

安装微信开发者工具——创建小程序项目——开发！

微信小程序开发文档

打开微信开发者工具，新建一个项目，选用测试号自动填充appid，选择js-基础模板

接着把这三个文件里面的代码内容都清空一下

接下来，就是到写代码的环节了，我们让Ai来帮我们写。Ai引擎特别多，这里用百度的文心一言Ai引擎

因为不用爬出去，大家都省事

先让Ai简单写一个显示当前的时间的代码：

动图封面

Ai生成的代码

以下是一个显示当前时间的微信小程序的页面，采用了高端大气的设计风格：

<view class="container">  
  <text class="time">{
   {currentTime}}</text>  
</view>

在上面的代码中，我们使用了 view 组件来包裹文本，以形成一个容器。文本使用了 text 组件来显示当前时间。通过使用双花括号 { {}} 语法，我们可以将数据绑定到页面上。在这个例子中，我们将 currentTime 绑定到文本中，以显示当前时间。

接下来，我们需要在对应的 JavaScript 文件中定义 currentTime 数据。可以使用 Date 对象来获取当前时间，并将其转换为字符串格式。以下是一个示例：

Page({  
  data: {  
    currentTime: ''  
  },  
  onLoad: function () {  
    var currentTime = new Date().toLocaleString();  
    this.setData({  
      currentTime: currentTime  
    });  
  }  
})
在上面的代码中，我们首先定义了一个空的 currentTime 数据。然后，在 onLoad 方法中，我们获取当前时间并将其转换为本地字符串格式。最后，我们使用 setData 方法将 currentTime 数据更新为获取到的当前时间。

最后，我们可以为页面添加一些样式来提升整体视觉效果。以下是一个示例样式：

.container {  
  font-size: 36px;  
  font-weight: bold;  
  text-align: center;  
  padding: 20px;  
  background-color: #000000;  
  color: #ffffff;  
}
在上面的样式中，我们为容器设置了较大的字体、粗体、居中对齐的样式，并添加了黑色背景和白色文本颜色。可以根据个人喜好和设计风格进行调整。

可以看到，Ai已经帮我们把js逻辑，css样式，界面这些都写好了。

我们只需要复制这些代码到微信开发者工具对应的文件上，就能真实的看效果了

可以看到左边的预览区，已经显示出当前的时间了

看到这里，是不是觉得很简单呢！！！

发挥你的想象力，动手操作一下吧


四.小程序的一些资源分享

UI组件

开发框架

实用库

开发工具

服务端

其他

Demo

 部分素材资源来自网络，如有侵权请联系我 

 后续会持续分享一下经验，欢迎点赞收藏和关注。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FMgxth/article/details/134670041

智能推荐

FX3/CX3 JLINK 调试_ezusbsuite_qsg.pdf-程序员宅基地

文章浏览阅读2.1k次。FX3 JLINK调试是一个有些麻烦的事情，经常有些莫名其妙的问题。 设置参见 c:\Program Files (x86)\Cypress\EZ-USB FX3 SDK\1.3\doc\firmware 下的 EzUsbSuite_UG.pdf 文档。 常见问题： 1.装了多个版本的jlink，使用了未注册或不适当的版本 选择一个正确的版本。JLinkARM_V408l，JLinkA_ezusbsuite_qsg.pdf

用openGL+QT简单实现二进制stl文件读取显示并通过鼠标旋转缩放_qopengl如何鼠标控制旋转-程序员宅基地

文章浏览阅读2.6k次。** 本文仅通过用openGL+QT简单实现二进制stl文件读取显示并通过鼠标旋转缩放， 是比较入门的级别，由于个人能力有限，新手级别，所以未能施加光影灯光等操作， 未能让显示的stl文件更加真实。****效果图：**1. main.cpp```cpp#include "widget.h"#include <QApplication>int main(int argc, char *argv[]){ QApplication a(argc, argv); _qopengl如何鼠标控制旋转

刘焕勇&王昊奋｜ChatGPT对知识图谱的影响讨论实录-程序员宅基地

文章浏览阅读943次，点赞22次，收藏19次。以大规模预训练语言模型为基础的chatgpt成功出圈，在近几日已经给人工智能板块带来了多次涨停，这足够说明这一风口的到来。而作为曾经的风口“知识图谱”而言，如何找到其与chatgpt之间的区别，找好自身的定位显得尤为重要。形式化知识和参数化知识在表现形式上一直都是大家考虑的问题，两种技术都应该有自己的定位与价值所在。知识图谱构建往往是抽取式的，而且往往包含一系列知识冲突检测、消解过程，整个过程都能溯源。以这样的知识作为输入，能在相当程度上解决当前ChatGPT的事实谬误问题，并具有可解释性。

如何实现tomcat的热部署_tomcat热部署-程序员宅基地

文章浏览阅读1.3k次。最重要的一点，一定是degbug的方式启动，不然热部署不会生效，注意，注意！_tomcat热部署

用HTML5做一个个人网站，此文仅展示个人主页界面。内附源代码下载地址_个人主页源码-程序员宅基地

文章浏览阅读10w+次，点赞56次，收藏482次。html5 ，用css去修饰自己的个人主页代码如下：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xh..._个人主页源码

程序员公开上班摸鱼神器！有了它，老板都不好意思打扰你！-程序员宅基地

文章浏览阅读201次。开发者（KaiFaX）面向全栈工程师的开发者专注于前端、Java/Python/Go/PHP的技术社区来源：开源最前线链接：https://github.com/svenstaro/gen..._程序员怎么上班摸鱼

随便推点

UG\NX二次开发 改变Block UI界面的尺寸_ug二次开发 调整 对话框大小-程序员宅基地

文章浏览阅读1.3k次。改变Block UI界面的尺寸_ug二次开发 调整 对话框大小

基于深度学习的股票预测（完整版，有代码）_基于深度学习的股票操纵识别研究python代码-程序员宅基地

文章浏览阅读1.3w次，点赞18次，收藏291次。基于深度学习的股票预测数据获取数据转换LSTM模型搭建训练模型预测结果数据获取采用tushare的数据接口（不知道tushare的筒子们自行百度一下，简而言之其免费提供各类金融数据 , 助力智能投资与创新型投资。）python可以直接使用pip安装tushare!pip install tushareCollecting tushare Downloading https://files.pythonhosted.org/packages/17/76/dc6784a1c07ec040e74_基于深度学习的股票操纵识别研究python代码

中科网威工业级防火墙通过电力行业测评_电力行业防火墙有哪些-程序员宅基地

文章浏览阅读2k次。【IT168 厂商动态】 近日，北京中科网威(NETPOWER)工业级防火墙通过了中国电力工业电力设备及仪表质量检验测试中心(厂站自动化及远动)测试，并成为中国首家通过电力协议访问控制专业测评的工业级防火墙生产厂商。 　　北京中科网威(NETPOWER)工业级防火墙专为工业及恶劣环境下的网络安全需求而设计，它采用了非X86的高可靠嵌入式处理器并采用无风扇设计，整机功耗不到22W，具备极_电力行业防火墙有哪些

第十三周 ——项目二 “二叉树排序树中查找的路径”-程序员宅基地

文章浏览阅读206次。/*烟台大学计算机学院 作者:董玉祥 完成日期: 2017 12 3 问题描述：二叉树排序树中查找的路径 */#include #include #define MaxSize 100typedef int KeyType; //定义关键字类型typedef char InfoType;typedef struct node

C语言基础 -- scanf函数的返回值及其应用_c语言ignoring return value-程序员宅基地

文章浏览阅读775次。当时老师一定会告诉你，这个一个"warning"的报警，可以不用管它，也确实如此。不过，这条报警信息我们至少可以知道一点，就是scanf函数调用完之后是有一个返回值的，下面我们就要对scanf返回值进行详细的讨论。并给出在编程时利用scanf的返回值可以实现的一些功能。_c语言ignoring return value

数字医疗时代的数据安全如何保障？_数字医疗服务保障方案-程序员宅基地

文章浏览阅读9.6k次。十四五规划下，数据安全成为国家、社会发展面临的重要议题，《数据安全法》《个人信息保护法》《关键信息基础设施安全保护条例》已陆续施行。如何做好“数据安全建设”是数字时代的必答题。_数字医疗服务保障方案

推荐文章

热门文章

相关标签