微信小程序入门及开发教程

这篇具有很好参考价值的文章主要介绍了微信小程序入门及开发教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言

一、小程序简介

1.什么是小程序?

2.小程序可以干什么?

二、注册微信小程序

三、安装开发工具并创建微信小程序

 四、微信小程序目录结构


前言

        随着移动互联网的发展,小程序成为了一种流行的应用形式。小程序是一种轻量级应用,能够在无需下载安装的情况下直接在手机上使用。如果你对开发小程序感兴趣,那么本篇博客将为你介绍小程序的入门知识。

一、小程序简介

1.什么是小程序?

  1. 2017年度百度百科十大热词之一

  2. 微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )

  3. 限制:同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。

  4. 2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。

  5. 官网:微信公众平台

2.小程序可以干什么?

  1. 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用

  2. 通过扫一扫或者在微信搜索即可下载

  3. 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选

  4. 连接线上线下

  5. 开发门槛低, 成本低

二、注册微信小程序

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

如果你还没有微信公众平台的账号,请先进入微信公众平台首页,点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择 “小程序” 即可。

接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序。

激活邮箱之后,选择主体类型为 “个人类型”,并按要求登记主体信息。主体信息提交后不可修改,该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体,在后续开通其他业务功能时不得变更或修改。

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

微信小程序的正式号和测试号有以下几点区别:

使用限制:测试号只能用于在开发测试阶段使用,而正式号则可以发布上线供用户使用。

功能限制:测试号的功能相对比较受限,如不支持微信支付、部分接口调用等功能,而正式号可以尽可能地满足开发者的需求。

可操作性差异:测试号的操作相对更容易,无需经过严格的审核流程和申请手续,而正式号需要经过微信官方的审核才能上线使用。

用户量限制:测试号的用户数有一定的限制,而正式号没有限制,可以随时增加用户量。

        通过测试号可以帮助开发者快速验证小程序的基本功能,调试问题,优化用户体验。当开发完成后可以申请正式号,并经过微信官方的审核上线,让更多的用户使用和体验小程序提供的服务。

进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

注册提交信息即可
微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

这样就成功啦 

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

一切 OK 就可以直接进入小程序的管理平台了。如果直接跳转失败,也可以从微信公众平台上手动登录。填写小程序的基本信息,包括名称、图标、描述等。提交成功之后,再添加开发者。开发者默认为管理员,我们也可以从这里新增绑定开发者,这是管理员才有权限的操作。

然后在左侧导航栏点击 “设置”,找到开发设置,获得小程序的 AppID。

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

测试号申请地址:微信公众平台 (qq.com)

三、安装开发工具并创建微信小程序

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》 。

打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

接下来我们直接傻瓜式安装就可以了,桌面上会有这样一个图标

打开后我们直接微信扫码登录

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

创建项目

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

新建项目选择小程序项目,选择代码存放的硬盘路径,填入刚刚申请到的小程序的 AppID,给你的项目起一个好听的名字,勾选 "不使用云服务" (注意: 你要选择一个空的目录才可以创建项目),点击新建,你就得到了你的第一个小程序了,点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

在模板选择处,我们随便选择了一个电商的模板,接下来点击工具上的编译按钮,可以在工具的左侧模拟器界面看到这个小程序的表现,也可以点击预览按钮,通过微信的扫一扫在手机上体验你的第一个小程序。

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

通过这个章节,你已经成功创建了你的第一个小程序,并且在微信客户端上体验到它流畅的表现。

 四、微信小程序目录结构

微信小程序开发简介,小程序,小程序,javascript,微信小程序,微信开放平台

  1. 根目录: 根目录下主要包含 app.js、app.json、app.wxss 三个文件以及 project.config.json 配置文件等。其中:

    • app.js 为小程序的全局js文件,用于定义小程序实例的全局变量和函数。
    • app.json 为小程序的全局配置文件,用于定义小程序的启动行为、页面路径、导航栏、底部标签栏等。
    • app.wxss 为小程序的全局样式文件,用于定义小程序各个页面公共的样式。
    • project.config.json 为小程序项目的配置文件,用于定义小程序的基本信息、开发者信息、上传代码时的设置等。
  2. 页面目录: 页面目录下主要包含一个 js 文件、一个 wxml 文件、一个 wxss 文件和一个 json 配置文件等。其中:

    • js 文件为页面逻辑文件,用于定义页面的事件处理函数和数据处理逻辑。
    • wxml 文件为小程序页面的结构文件,类似于 HTML 文件。
    • wxss 文件为小程序页面的样式文件,用于定义页面的样式。
    • json 文件为小程序页面的配置文件,用于定义页面的标题栏、导航栏、背景色等。

微信小程序开发使用可参考微信官方文档 使用文章来源地址https://www.toymoban.com/news/detail-717772.html

到了这里,关于微信小程序入门及开发教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 微信小程序入门及开发教程

    微信小程序入门及开发教程

    目录 前言 一、小程序简介 1.什么是小程序? 2.小程序可以干什么? 二、注册微信小程序 三、安装开发工具并创建微信小程序  四、微信小程序目录结构         随着移动互联网的发展,小程序成为了一种流行的应用形式。小程序是一种轻量级应用,能够在无需下载安装

    2024年02月08日
    浏览(8)
  • 【微信小程序开发】第 1 节 - 小程序简介

             欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、小程序与普通网页开发的区别 3、API 简介 4、总结         在日常生活中,我们几乎每天都在使用微信小程序,那么,这个微信小程序到底是怎么

    2024年02月07日
    浏览(7)
  • 微信小程序云开发入门详细教程

    微信小程序云开发入门详细教程

    本篇是《从零开始Python+微信小程序开发》专栏第九篇,主要介绍最新最全的云开发入门教程,微信小程序云开发,云函数,云数据库学习,微信小程序云开发扩展功能学习,希望大家能够一起学习,互相交流。 小程序云开发是微信团队联合腾讯云推出的专业的小程序开发服

    2024年02月11日
    浏览(14)
  • 微信小程序开发入门教程

    微信小程序开发入门教程

    🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《微信小程序开发实战》。🎯🎯 👉点击这里,就可以查看我的主页啦!👇👇 Java方文山的个人主页 🎁如果感觉还不错的话请给我点赞吧!🎁🎁 💖期待你的

    2024年02月08日
    浏览(11)
  • 微信小程序 | 小程序开发

    微信小程序 | 小程序开发

    🖥️ 微信小程序专栏:小程序开发 初级知识 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、认识小程序开发 什么是小程序? 各个平台小

    2024年01月24日
    浏览(38)
  • 微信小程序开发入门教程(十二)

    微信小程序开发入门教程(十二)

    上一篇文章我们讲述了微信小程序的三个基础组件 icon 、 text 和 progress 。这些基础组件主要用途是进行信息展示,微信小程序除了信息展示还需要与用户交互,而表单是应用中获取用户输入的重要手段,它对于系统极其重要,用户在应用中输入的大部分内容都是在表单元素中

    2024年02月11日
    浏览(15)
  • 微信小程序开发实践入门教程

    微信小程序开发实践入门教程

    随着微信小程序的火爆,越来越多的人开始关注 微信小程序开发 并加入开发大军中,而很多人对于如何开发微信小程序,并没有很好的思路和方法。因此,为了方便大家在学习、实践和应用的过程中能够少走弯路,本文将通过一篇关于微信小程序开发实践入门教程来为大家

    2024年02月06日
    浏览(12)
  • 微信小程序开发之微信小程序交互

    微信小程序开发之微信小程序交互

    目录 一、小程序交互 前端: 1、先在登陆界面中编写代码 2、在前端中编写js代码 后端:           1、先导入依赖:           2、定义好配置文件           3、编写好实体类           4、将帮助类进行配置           5、编写mapper类           6、定义service层以及对应的

    2024年02月09日
    浏览(9)
  • 微信小程序 -- 小程序开发能力与拓展

    微信小程序 -- 小程序开发能力与拓展

    1. 获取用户头像 当小程序需要让用户完善个人资料时,我们可以通过微信提供的头像、昵称填写能力快速完善。如图: 想使用微信提供的头像填写能力,需要两步: 将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调

    2024年04月15日
    浏览(12)
  • 【微信小程序开发】微信小程序集成腾讯位置项目配置

    【微信小程序开发】微信小程序集成腾讯位置项目配置

    腾讯位置服务官网 当然没账号的要先注册一个账号 在我的应用里创建一个新的应用,印象中需要小程序ID,去微信开发者工具里面找到自己的小程序ID填入即可 添加 key 中勾选勾选 WebServiceAPI 从官网里下载,我这里下载的是 v1.2 打开微信开发者工具 在查找小程序ID的地方下滑

    2024年02月02日
    浏览(18)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包