小程序入门——详细教程

news2024/10/6 6:46:48

                                                   🎬 艳艳耶✌️:个人主页

                                                  🔥 个人专栏 :《Spring与Mybatis集成整合》《Vue.js使用》

                                                   ⛺️ 生活的理想,为了不断更新自己 ! 
 

1.微信小程序 入门

1.1什么是小程序?

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

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

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

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

1.2小程序可以干什么?

  • 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用
  • 通过扫一扫或者在微信搜索即可下载
  • 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选
  • 连接线上线下
  • 开发门槛低, 成本低

前期准备:

微信开发者工具下载地址:

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信小程序开发文档:

微信开放文档微信开发者平台文档icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/index.html

2.注册微信小程序

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

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

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

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

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

  • 使用限制:测试号只能用于在开发测试阶段使用,而正式号则可以发布上线供用户使用。
  • 功能限制:测试号的功能相对比较受限,如不支持微信支付、部分接口调用等功能,而正式号可以尽可能地满足开发者的需求。
  • 可操作性差异:测试号的操作相对更容易,无需经过严格的审核流程和申请手续,而正式号需要经过微信官方的审核才能上线使用。
  • 用户量限制:测试号的用户数有一定的限制,而正式号没有限制,可以随时增加用户量。

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

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

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

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

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

3.安装微信开发者工具

3.1下载微信开发者工具

可以在微信开放文档中选择对应版本,然后下载对应的安装包

3.2登录微信开发者工具

首次启动开发者工具,则需要微信账号扫码登录

登录微信开发者工具

4.第一个小程序的创建

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

5.目录结构介绍 

  1. js文件:页面脚本文件,存放页面数据、事件处理函数等。——处理用户操作
  • app.js文件:整个项目的入口文件,通过调用App()函数启动项目。
  • 页面.js文件:页面入口文件,调用Page()函数,创建并运行页面。
  • 普通.js文件:普通功能模块文件,用来封装公共的函数或属性供页面使用
  1. json文件:当前页面配置文件,配置窗口的外观、表现等。
  2. wxml文件:页面的模板结构文件。(WXML模板类网页HTML)
  3. wxss文件:当前页面的样式表文件。(WXSS:一套样式语言,用于描述WXML局部或全局的组件样式,类网页CSS)

整个项目的目录结构分析

  • pages:【文件夹】存放所有小程序的页面
  • index文件—首页文件
  • logs文件—日志文件
  • utils:【文件夹】用来存放工具性质模块[如:格式化时间的自定义模块]
  • app.js:项目入口文件
  • app.json:项目全局配置文件 
  • pages——页面路径[在此输入“pages/list/list”则工具自动创建新页面、替换其中数组的顺序可修改项目的首页]
  • window——全局定义所有页面样式
  • style——全局定义小程序组件所使用的样本
  • sitemapLocation——指明sitemap.json的位置

                                                   今日分享到此结束! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1092379.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

BUUCTF pwn1_sctf_2016 1

代码分析 查看文件信息然后进行反汇编 关键信息 32位栈不可执行 IDA反汇编 说实话,这个应该是C编写的程序,C基础还是不行,我硬是没看懂这个代码 我查了一下字符串 这里的get_flag是函数,另一个应该就是执行的一个命令了 到IDA…

【LeetCode刷题(数据结构)】:翻转二叉树

方法一:递归 思路与算法 这是一道很经典的二叉树问题。显然,我们从根节点开始,递归地对树进行遍历,并从叶子节点先开始翻转。如果当前遍历到的节点 root\textit{root}root 的左右两棵子树都已经翻转,那么我们只需要交…

【入门】.Net Core 6 WebApi 项目搭建

一、创建项目 1.1.创建新项目:打开开发工具>创建新项目>搜索API>选择C#语言的ASP.NET Core Web API 1.2.配置新项目:**自定义项目信息以及存储路径 1.3.其他信息:这里框架必须选择.NET 6.0,其他配置默认勾选即可,也可以根…

SystemVerilog Assertions应用指南 第一章(1.24章节 “or”运算符)

二进制运算符“or”可以用来逻辑地组合两个序列。只要其中一个序列成功,整个属性就成功。序列s29a和s29b是两个独立的序列。属性p29将两者用“or运算符组合起来。当其中任一序列成功时,属性就成功。 sequence s29a;(posedge clk) a##[1:2] b; endsequencesequence s29b;(posed…

Hadoop3教程(六):HDFS中的DataNode

文章目录 (63)DataNode工作机制(64)数据完整性(65)掉线时限参数设置参考文献 (63)DataNode工作机制 DataNode内部存储了一个又一个Block,每个block由数据和数据元数据组…

2024年计算机专业Java选题推荐✅(最新、最全、最容易通过的选择)

文章目录 前言选题和具体实现详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#x…

USDR脱锚事件:稳定币碰上房地产,双重buff想不崩都难!

10月11日,一种名为Real USD(USDR)的稳定币脱锚,在几个小时内迅速从1美元跌至0.5美元,而这无疑是一场典型的挤兑,主要由该稳定币的高流动性债务与其低流动性抵押物之间存在期限错配所致。 USDR是一种流通量为…

链表oj (7.29)

203. 移除链表元素 - 力扣(LeetCode) 思路1:使用结构体指针 cur 遍历链表,遇到值为 val 时删除,删除之前需要判断是头删还是正常的删除,头删需要改变头指针; 正常的删除需要 cur(待删除节点&am…

爬虫 | 基础模块了解

文章目录 📚http协议📚requests模块📚re模块🐇 re.I 或 re.IGNORECASE🐇re.M或 re.MULTILINE🐇re.S 或 re.DOTALL🐇 re.A 或 re.ASCII🐇 re.X 或 re.VERBOSE🐇特殊字符类…

嵌入式学习笔记(55)LCD简介

12.1.1什么是LCD (1)Liquid Crystal Display,俗称液晶显示 (2)液晶是一种材料,液晶这种材料具有一种特点:可以在电信号的驱动下液晶分子进行旋转,旋转时会影响透光性,因此我们可以在整个液晶面板后面用白光照&#x…

SystemVerilog Assertions应用指南 第一章(1.25章节 “first_match”运算符)

任何时候使用了逻辑运算符(如“and”和“or”)的序列中指定了时间窗,就有可能出现同一个检验具有多个匹配的情况。“ first match”构造可以确保只用第一次序列匹配,而丢弃其他的匹配。当多个序列被组合在一起,其中只需时间窗内的第一次匹配来检验属性剩余的部分时,“ first ma…

2023年09月 C/C++(七级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C编程(1~8级)全部真题・点这里 Python编程(1~6级)全部真题・点这里 第1题:红与黑 有一间长方形的房子,地上铺了红色、黑色两种颜色的正方形瓷砖。你站在其中一块黑色的瓷砖上,只能向相邻的黑色…

闲鱼的商品结构化是如何演进的

闲鱼商品结构化和淘宝/天猫最大的区别在于闲鱼卖家都是个人用户,无论是专业程度还是行动力远不及淘宝卖家。为了不阻碍商品发布,闲鱼一直倡导轻发布,理想状况用户拍完照片输入一段描述即可完成发布。但是这和商品结构化相悖:卖家输…

基于php+thinkphp+vue的校园二手交易网站

运行环境 开发语言:PHP 数据库:MYSQL数据库 应用服务:apache服务器 使用框架:ThinkPHPvue 开发工具:VScode/Dreamweaver/PhpStorm等均可 项目简介 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发…

Folium 笔记:使用PopUp突出subzone的空间分布

0 效果图 点开某一个区域后,内容是这个区域的用地类型分布 1 读取数据 import folium import matplotlib.pyplot as plt import re import geopandas as gpd subzonegpd.read_file(MasterPlan2019PlanningAreaBoundaryNoSea.geojson) subzone 2 提取subzone 信息 …

thinkphp6

unexpected , expecting case (T_CASE) or default (T_DEFAULT) or } 在模板中应用{switch}{/switch}标签,报错,其实是switch的问题,模板解析后,switch:和第一个case:之间不能有有输出的,一个空格也不行,所以第一个要紧跟着 Thi…

【LeetCode刷题(数据结构)】:对称二叉树

给你一个二叉树的根节点 root 检查它是否轴对称 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false 提示&#xff1a; 树中节点数目在范围 [1, 1000] 内 -100 < Node.val < 100 对称二叉…

芯片学习记录AM26LS31INSR

AM26LS31INSR 芯片介绍 AM26LS31 系列器件是四路互补输出线路驱动器&#xff0c;可 满足 ANSI TIA/EIA-422-B 和 ITU &#xff08;原 CCITT &#xff09;建议 V.11 的要求。三态输出可提供用于驱动双绞线或平行 双线传输线路等平衡线路的高电流&#xff0c;并在断电情况下处…

C# 解决从其他地方迁移项目,引用中大多数包是感叹号的问题

当在 Visual Studio 中复制别人的 C# 项目时&#xff0c;遇到许多包冒感叹号的问题通常是因为缺少相关的 NuGet 包或引用不正确导致的。这会在解决方案资源管理器中的引用下显示感叹号。 解决办法如下&#xff1a; 在 Visual Studio 中打开项目。 在解决方案资源管理器中&…

Ubuntu 上传项目到 GitHub

一、前言 GitHub 作为时下最大的开源代码管理项目&#xff0c;广泛被工程和科研人员使用&#xff0c;本文主要介绍如何如何将自己的项目程序上传到 GitHub 上。 要上传本地项目到 GitHub 上&#xff0c;主要分为两步&#xff0c;第一步是 二、创建 SSH keys 首先登录 GitHu…