微信小程序 ——入门介绍及简单的小程序编写

news2024/10/6 4:02:33

14天阅读挑战赛
自己决定的事情,就要不动声色的一往直前!

目录

一、小程序入门

1.1 什么是小程序

1.2 小程序的优点

1.3 小程序注册

1.4 安装开发工具

1.5 创建第一个小程序

二、小程序目录结构及入门案例

2.1 目录结构

2.2 入门案例

2.2.1 创建界面

2.2.2 设置标题

2.2.3 编写WXML文件

​编辑  

2.2.4 编写JS文件

​编辑

2.2.5  编写WXSS演样式文件

2.3 案例效果演示


一、小程序入门

1.1 什么是小程序

        小程序是一种轻量级的应用程序,通常用于在移动设备上提供特定功能或服务。它们类似于手机应用程序,但不需要用户下载和安装,可以直接在支持的平台上运行。小程序通常由HTML、CSS和JavaScript等前端技术开发,可以在微信、支付宝、百度等平台上运行。

1.2 小程序的优点

  • 无需从商店下载和更新
  • 不占内存,加载速度快
  • 开发成本低、门槛低
  • 连接线上线下

它还可以与手机的硬件功能(如相机、位置信息)进行交互,并提供与用户进行实时互动的能力。

1.3 小程序注册

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

进入官方文档申请账号👉 小程序注册

1、小程序注册

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

2、激活邮箱

3、用户登记注册

  • 如果只是学习的话,注册个人小程序即可
  • 如果想商用,想使用微信支付,取用户手机号等复杂功能,可以注册企业小程序,不过企业小程序必须有营业执照才可以注册
  • 一个邮箱只能注册一个小程序
  • 一个身份证可以注册5个,个人小程序
  • 一个企业的营业执照可以注册50个企业小程序

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

我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

1.4 安装开发工具

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

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

1.5 创建第一个小程序

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

先选择一个别人写好的模版预览效果

OK,现在创建一个自己写的小程序,一定要选择js模版

预览:

二、小程序目录结构及入门案例

2.1 目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

文件必需作用
app.js  小程序逻辑
app.json  小程序公共配置
app.wxss 小程序公共样式表


一个小程序页面由四个文件组成,分别是:以后缀名结尾的(js、json、wxml、wxss) 

打开app.json公共配置文件,可看到pages数据在这里一个文件夹代表一个页面,也就是indexlogs两个页面

这里要注意配置的页面的顺序,排在第一,刚打开小程序就显示这个界面。

2.2 入门案例

2.2.1 创建界面

配置pages时保存后,左侧会自动生成页面文件。

2.2.2 设置标题

pages/user/user.json

2.2.3 编写WXML文件

参考 小程序文档WXML模版 

  

引用js文件username属性,设置一个按钮点击事件

2.2.4 编写JS文件

定义数据和点击事件方法 

 修改页面头部标题背景和字体颜色

2.2.5  编写WXSS演样式文件

为class属性值为userinfo模块设置样式 

2.3 案例效果演示

最后就呈现出一个简单的功能界面 :

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

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

相关文章

【Pytorch】pytorch中保存模型的三种方式

【Pytorch】pytorch中保存模型的三种方式 文章目录 【Pytorch】pytorch中保存模型的三种方式1. torch保存模型相关的api1.1 torch.save()1.2 torch.load()1.3 torch.nn.Module.load_state_dict()1.4 什么是state_dict()1.4. 1 举个例子 2. pytorch模型文件后缀3. 存储整个模型3…

【2024波哥讲言语视频全套】

2024波哥讲言语视频全套 有需要的同学可以通过百度网盘下载 通过百度网盘分享的文件:【38】2024… 链接:https://pan.baidu.com/s/10GMG9tu8RGrXuU2uJWaysw?pwdfpl6 提取码:fpl6 复制这段内容打开「百度网盘APP 即可获取」

PHP家教系统平台源码/请家教兼职家教网源码/自适应手机端/实测

源码简介: PHP家教系统平台源码/请家教兼职家教网源码/自适应实测,它支持兼职家教和请家教两种模式。该程序提供了完整的功能,包括家教信息发布、家教需求发布、信息匹配、在线支付等。此外,该程序还可以自适应手机端&#xff0c…

CSS之排列系列--顶部导航栏ul、li居中展示的方法

原文网址:CSS之排列系列--顶部导航栏ul、li居中展示的方法_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍CSS顶部导航栏ul、li居中展示的方法。 核心方法 ul的父层使用:text-align: center ul元素使用:display: inline-block; 示例 …

C++ 反向迭代器

反向迭代器的即正向迭代器的--,反向迭代器的--即正向迭代器的,反向迭代器和正向迭代器的很多功能都是相似的,因此我们可以复用正向迭代器作为反向迭代器的底层容器来封装,从而实现出反向迭代器,即:反向迭代…

Linux 文件系统逻辑结构图的解释

task_struct进程结构体,表示一个运行的进程。 task_struct中的fs指向fs_struct结构体。fs_struct表示这个进程支持的文件系统。 root指向根目录dentry,dentry中的d_inode指向改进程根目录在存储设备中的inode节点。 pwd指向当前进程所在的目录结构体den…

部署k8s dashboard(这里使用Kubepi)

9. 部署k8s dashboard(这里使用Kubepi) Kubepi是一个简单高效的k8s集群图形化管理工具,方便日常管理K8S集群,高效快速的查询日志定位问题的工具 部署KubePI(随便在哪个节点部署,我这里在主节点部署&#…

记录单片机编码的坑

问题描述 在使用clion调试过程中,发现使用 mbstowcs函数转换后的数组仍为原数组 因而单片机中不能直接将ascii码(此处为编写代码的格式,例如GBK格式)转换为Unicode格式,这个Bug先记录下来,后续解决了再贴上方法!

【ppt密码】ppt的密码忘了,怎么破解

PPT文件设置了保护密码,但是密码忘记了,无法打开PPT文件、无法编辑PPT文件了该怎么办?PPT文件的两种保护密码该如何解密? 首先是打开密码 网上有一种解决方法: 1、重新命名PPT文件,将其后缀改为zip格式&…

【LeetCode刷题(数据结构)】:检查两颗树是否相同

给你两棵二叉树的根节点 p 和 q ,编写一个函数来检验这两棵树是否相同 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的 输入:p [1,2,3], q [1,2,3] 输出:true 输入:p [1,2], q [1,…

一篇文章带你用动态规划解决股票购买时机问题

动态规划的解题步骤可以分为以下五步,大家先好好记住 1.创建dp数组以及明确dp数组下标的含义 2.制定递推公式 3.初始化 4.遍历顺序 5.验证结果 股票购买时机问题的解题核心思路 当天的收益是根据前一天持有股票还是不持有股票的状态决定的 那么很自然的我们就想…

Dijkstra求最短路(图解)

你好,我是Hasity。 今天分享的内容:Dijkstra求最短路这个题目 Dijkstra求最短路I 题目描述 给定一个 n个点 m 条边的有向图,图中可能存在重边和自环,所有边权均为正值。 请你求出 1 号点到 n号点的最短距离,如果无…

关于导入Maven工程项目,更新pom.xml文件仍然爆红的原因

问题描述: 在学习maven工程的时候,把从网上学习的工程导入到IDEA,发现,无论怎么更新,pom.xml文件一直报错,查看settings设置和project Structure仍然没找出问题来。 settings设置如下: 解决问…

短视频如何批量添加水印

在当今的数字时代,短视频已经成为一种非常流行的内容形式。无论是社交媒体还是视频分享网站,短视频都已经成为了一种非常有吸引力的内容。然而,对于一些拥有大量视频内容的创作者来说,添加水印可能是一项繁琐的任务。本文将介绍如…

【windows下docker安装rocketMQ】

namesrv和broker安装就不说了,见如下博客 https://blog.csdn.net/Wonderful1025/article/details/107244434/ 安装rocketMQ-console docker run -d -e "JAVA_OPTS-Drocketmq.config.namesrvAddr192.168.65.2:9876 -Drocketmq.config.isVIPChannelfalse"…

__builtin_return_address()函数的使用方法

__builtin_return_address(0) 是GCC编译器提供的内置函数,用于获取当前函数调用栈中的指定帧(frame)的返回地址。这个函数通常用于调试和性能分析,以了解程序中的函数调用关系。 下面是关于 __builtin_return_address(0) 函数的一…

SystemC入门学习-第5章 同步逻辑建模

本章重点学习同步逻辑中的触发器,锁存器的一些建模规范: 触发器建模带异步置位/复位带同步置位/复位锁存器建模 5.1 触发器建模 触发器建模的关键是敏感列表的规范。SC_MODULE的规范写法中出现过sensitive 参数列表是事件敏感, 对触发器建模…

操作系统学习笔记4-死锁问题

文章目录 1、死锁逻辑图2、死锁三胞胎3、死锁的原因及必要条件4、死锁处理策略之死锁预防5、死锁处理策略之死锁避免(银行家算法)6、死锁处理策略之死锁检测与解除 1、死锁逻辑图 2、死锁三胞胎 3、死锁的原因及必要条件 4、死锁处理策略之死锁预防 5、死…

查找组成一个偶数最接近的两个素数

一、题目 二、代码 #include <iostream> using namespace std; bool isPrime(int num)//判断素数 {if (num < 1)return false;if (num 2)return true;if (num % 2 0)return false;for (int i 3; i < num; i){if (num % i 0){return false;}}return true; } in…

win11下的VS2022+QT6+VTK9.2+PCL1.13.1联合开发环境配置及踩坑记录

准备工作&#xff1a; 安装VS2022&#xff1a;这个比较简单&#xff0c;网上随便找个教程就行 安装QT并为VS2022添加QT Creater插件&#xff1a;VS2022配置Qt6_vs2022 qt6-CSDN博客 安装PCL&#xff1a;vs2022配置pcl1.13.1_pcl配置-CSDN博客 安装PCL过程中本身也会安装VTK&…