当前位置: 首页 > news >正文

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

目录

一、小程序入门

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.lryc.cn/news/393106.html

相关文章:

  • ubuntu20.04安装lio-sam
  • Kafka系列之Kafka知识超强总结
  • 第32讲:K8S集群与Cephfs文件系统集成
  • 服务器数据恢复—DS5300存储raid5阵列数据恢复案例
  • 使用Ubuntu 22.04安装Frappe-Bench【二】
  • MySQL增删改查
  • Java跳出循环的四种方式
  • 直播预告|飞思实验室暑期公益培训7月10日正式开启,报名从速!
  • 3-2 梯度与反向传播
  • 【qt】如何获取本机的IP地址?
  • 芯片的PPA-笔记
  • 2024阿里巴巴全球数学竞赛决赛中的数列题解析(分析与方程方向第4题)
  • 学java的第3天 后端商城小程序工作
  • DevOps实战:使用GitLab+Jenkins+Kubernetes(k8s)建立CI_CD解决方案
  • Apache Seata配置管理原理解析
  • 深入理解C# log4Net日志框架:功能、使用方法与性能优势
  • BDD 100K dataset 的标签数据结构(json文件)
  • AcWing 1550:完全二叉搜索树
  • 使用kali Linux启动盘轻松破解Windows电脑密码
  • Vue2中跨组件共享公共属性的方法、优缺点与实现
  • 2024亚太杯数学建模竞赛(B题)的全面解析
  • 【PWN · ret2syscall | GoPwn】[2024CISCN · 华中赛区]go_note
  • 关于学习方法的优化
  • 万界星空科技MES系统中的排版排产功能
  • kubeadm离线部署kubernetesv1.30.0
  • 【PYG】dataloader和densedataloader
  • 完美解决ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: NO)
  • ForkJoinPool 简介
  • 复现YOLO_ORB_SLAM3_with_pointcloud_map项目记录
  • Docker:Docker网络