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

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.rhkb.cn/news/158851.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue封装组件并发布到npm仓库

1. 环境准备 因为我们此次封装的是Vue组件,所以我们直接在Vue脚手架项目里面进行封装即可。 (1)初始化Vue项目 vue create lin-vue (2)运行项目 npm run serve 2. 组件封装 新建src/components文件夹 因为我们可…

pdf处理工具 Enfocus PitStop Pro 2022 中文 for mac

Enfocus PitStop Pro 2022是一款专业的PDF预检和编辑软件,旨在帮助用户提高生产效率、确保印刷品质量并减少错误。以下是该软件的一些特色功能: PDF预检。PitStop Pro可以自动检测和修复常见的PDF文件问题,如缺失字体、图像分辨率低、颜色空…

常用的软件项目管理工具一览

软件项目管理工具是帮助团队成功管理和完成软件开发项目的软件程序和应用程序。根据项目及其规模和复杂性,可以使用各种各样的这些工具来协助完成任务,从任务跟踪和调度,到项目报告,到版本控制和协作。 项目经理对软件项目的整体成…

CA与区块链之数字签名详解

CA与区块链验证本质上都是数字签名,首先,我们看一下什么是数字签名! 数字签名 数字签名是公钥密码学中的一种技术,用于验证信息的完整性和发送者的身份。简而言之,数字签名是一种确认信息来源和信息完整性的手段。它通…

【面试经典150 | 哈希表】单词规律

文章目录 写在前面Tag题目来源题目解读解题思路方法一:哈希表 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法,两到三天更新一篇文章,欢迎催更…… 专栏内容以分析题目为主,并附带一些对于本题涉及到的数据结构等内…

2023年建筑电工(建筑特殊工种)证考试题库及建筑电工(建筑特殊工种)试题解析

题库来源:安全生产模拟考试一点通公众号小程序 2023年建筑电工(建筑特殊工种)证考试题库及建筑电工(建筑特殊工种)试题解析是安全生产模拟考试一点通结合(安监局)特种作业人员操作证考试大纲和(质检局)特种设备作业人…

【从零开始学习Redis | 第二篇】Redis中的数据类型和相关命令

前言: Redis是一种快速、高效的开源内存数据库,被广泛用于构建各种类型的应用程序。其被设计成支持多种数据类型,这使得Redis在处理各种场景的数据存储和操作中非常灵活。Redis的数据类型提供了对不同数据结构的直接支持,包括字符…

第18篇ESP32platformio-arduino框架-ili9488-3.5lcd显示时间天气

第18篇ESP32platformio-arduino框架-ili9488-lcd显示时间天气 第18篇esp32ili9488lcd显示时间天气 连接方法: 修改WIFI: 关键代码 void setup() {Serial.begin(115200);WiFi.mode(WIFI_STA);WiFi.begin(ssid,password);Serial.print("\r\nConnect…

Java设计模式:Callback

介绍 回调(Callback)是一种设计模式,在这种模式中,一个可执行的代码被作为参数传递给其他代码,接收方的代码可以在适当的时候调用它。 在真实世界的例子中,当我们需要在任务完成时被通知时,我…

Qt工具开发,该不该跳槽?

Qt工具开发,该不该跳槽? 就这样吧,我怕你跳不动。 嵌入式UI,目前趋势是向着LVGL发展。QT已经在淘汰期了。很多项目还在用,但技术上已经落后。QT短期内不会全面淘汰,但退位让贤的大趋势已经很清楚了。 最近很多小伙伴…

springboot 志同道合交友网站演示

springboot 志同道合交友网站演示 liu1113625581

百度开放平台第三方代小程序开发,授权事件、消息与事件通知总结

大家好,我是小悟 关于百度开放平台第三方代小程序开发的两个事件接收推送通知,是开放平台代小程序实现业务的重要功能。 授权事件推送和消息与事件推送类型都以event的值判断。 授权事件推送通知 授权事件推送包括:推送票据、授权成功、取…

排序算法-希尔排序法(ShellSort)

排序算法-希尔排序法(ShellSort) 1、说明 我们知道当原始记录的键值大部分已排好序的情况下插入排序法非常有效,因为它不需要执行太多的数据搬移操作。希尔排序法是D.L.Shell在1959年7月发明的一种排序法,可以减少插入排序法中数…

微信小程序入门

目录 一.微信小程序简介 二. 什么是小程序? 三.小程序商城项目案例 四.小程序之入门案例 json配置 wxml模板 wxss样式 js逻辑交互 测试结果 一.微信小程序简介 微信小程序是一种运行在微信客户端内的应用程序,它以小巧、轻量、便捷的特点受到广…

androidx.appcompat.widget.Toolbar最右边设置控件不能仅靠最右边

androidx.appcompat.widget.Toolbar最右边设置控件不能仅靠最右边 Android Toolbar左、中、右对齐-CSDN博客Android Toolbar左、中、右对齐默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的…

推荐几款简单易用的协作化项目管理工具

您是否正在寻找一种有效且简单的项目管理工具来帮助您与团队成员协作?项目管理工具在当今的商业世界中已经变得必不可少,因为它们帮助团队保持组织和生产力。找到合适的工具是困难的,因为有太多的选择。有些工具是为特定类型的项目设计的,而…

腾讯云国际站-阿里云OSS如何迁移到腾讯云COS?腾讯云cos迁移教程

下面小编将介绍当源对象存储部署在阿里云国际版OSS 时,如何配置全托管迁移任务和半托管迁移任务,实现顺利迁移数据至腾讯云国际版COS。 准备工作 阿里云对象存储 OSS 创建 RAM 子账号并授予相关权限: 登录 RAM 控制台。选择人员管理 > …

二分查找:如何用最省内存的方式实现快速查找功能?

文章来源于极客时间前google工程师−王争专栏。 有序数据集合的查找算法:二分查找(Binary Search)算法,也叫折半查找算法。二分查找的思想非常简单,但是难掌握好,灵活运用更加困难。 问题:假设有1000万个整数数据&…

S32K1xx的MBD工具箱加载及激活

1、安装Matlab,本次使用Matlab2022b 2、打开Matlab,加载含有MBD工具的目录,如下 3、双击第一个---安装,正常安装就可以 4、双击第二个---安装,正常安装就可以 5、找到MBD的安装位置如下 C:\Users\Administrator\App…

应用在汽车发动机温度检测中的高精度温度传感芯片

汽车发动机是为汽车提供动力的装置,是汽车的心脏,决定着汽车的动力性、经济性、稳定性和环保性。根据动力来源不同,汽车发动机可分为柴油发动机、汽油发动机、电动汽车电动机以及混合动力等。 常见的车用温度传感器有进气温度传感器、变速器…