微信小程序开发--入门

目录

前言

 一.准备阶段

1.申请账号

 2.安装开发工具

二.开发第一个小程序

1.创建项目

2.基础操作及语法

2.1目录结构

2.2 常见语法及文件类型

​编辑 3.案例演示开发

1.新建页面

 2.新建标题        

3.后端传值


前言

简介

微信小程序(WeChat Mini Program)是一种轻量级的应用程序,可以在微信平台上运行。它们是一种无需下载、即点即用的应用,用户可以直接在微信中打开和使用,无需离开微信进行安装。微信小程序提供了一种便捷的方式来访问各种服务和功能,无需占用用户手机的存储空间

特点

  1. 轻量级应用: 微信小程序相对于传统的手机应用来说更轻量,因此加载速度更快。这使得它们特别适合于提供快速访问信息或简单交互的应用场景。

  2. 无需下载和安装: 用户可以直接在微信中打开小程序,而不需要前往应用商店下载或安装。这节省了用户的时间和手机存储空间。

  3. 多种应用场景: 微信小程序可以应用于各种场景,包括新闻、社交媒体、电子商务、教育、医疗保健、旅游和游戏等。

  4. 开发语言: 微信小程序通常使用JavaScript、CSS和WXML(一种类似HTML的标记语言)进行开发。这意味着开发者可以使用熟悉的前端技术来构建小程序。

  5. 开发工具: 微信提供了一套开发工具,用于创建、调试和发布小程序。这个工具集包括代码编辑器、模拟器和调试工具。

  6. 权限控制: 微信小程序需要用户授权才能访问一些敏感信息,比如地理位置、相机、和微信支付。这有助于保护用户的隐私。

  7. 生态系统: 微信小程序生态系统包括开发者、商家和用户。开发者可以通过小程序提供各种服务,商家可以借助小程序来推广产品和提供服务,用户可以享受方便的应用体验。

  8. 小程序商店: 微信小程序可以在微信的“发现”栏目中被用户浏览和搜索。用户可以从中找到并访问他们感兴趣的小程序。

小结:微信小程序在中国和其他地区的普及度很高,对于开发者和企业来说,它们提供了一个有吸引力的平台,可以与用户互动,提供服务和推广产品。小程序的成功也激发了其他社交媒体和应用平台推出类似的轻量级应用模式 

 优点:

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

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

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

  4. 连接线上线下

  5. 开发门槛低, 成本低

官网:微信公众平台 (qq.com)

 一.准备阶段

1.申请账号

注册页官网:小程序

点击进入官网填写好个人相关信息进行注册 

根据对应步骤填写相关信息,注册好账号之后从官网扫码进行登录

 

登录成功后滑到最下面找到开发模块,这里可以查看我们的开发时的一些基本信息,在我们的后续开发中会使用到

 2.安装开发工具

官网下载地址:微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

根据自己对应的操作系统选择对应的版本,这里以win11为例,使用稳定版 Stable Build (1.06.2308310),win10同理,win7的用户则需要寻找历史版本中的1.05版本即可(点击蓝色字体即可查看历史版本)

二.开发第一个小程序

1.创建项目

安装好后双击打开开发者工具

选择创建我们的项目,创建好相应的工作区间,勾选不使用云服务,选择第二个模板,然后点击确定进行创建

 创建之后会进行一个加载,此时必须联网,当左侧出现我们的微信头像时就说明创建成功了

2.基础操作及语法

2.1目录结构

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

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

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

一个小程序页面由四个文件组成,分别是:

文件类型必需作用
js页面逻辑
wxml页面结构
json页面配置
wxss页面样式表

模拟器

微信开发者工具提供了模拟器,用于模拟各种手机型号上小程序的运行效果。

你可以在模拟器中实时查看代码的改动效果。

2.2 常见语法及文件类型

(1)JSON(JavaScript Object Notation):

JSON 文件用于配置小程序的全局配置,如project.config.jsonapp.json

用于指定小程序的页面、窗口样式、网络超时时间等设置。

(2)WXML(WeiXin Markup Language):

WXML 文件用于描述小程序的页面结构,类似于HTML。

包含视图标签、组件引用、数据绑定等。

支持小程序特有的标签和属性,如<view><text>{{}} 数据绑定等。

(3)WXSS(WeiXin Style Sheet):

WXSS 文件用于定义小程序的样式,类似于CSS。

包括样式类的定义、样式属性、样式引用等。

支持小程序特有的样式单位(rpx)、尺寸单位(rem)、样式继承等。

(4)JavaScript:

JavaScript 文件用于编写小程序的逻辑。

包括页面逻辑、事件处理、网络请求、数据处理等。

支持小程序特有的生命周期函数、事件监听、数据更新等。

(5)模板文件:

模板文件(.wxml)用于定义可复用的页面部分,可以在多个页面中引用。

可以使用<template>标签定义模板,然后在不同页面中引用该模板。

(6)页面文件:

页面文件用于定义小程序的不同页面。

每个页面通常包括一个对应的WXML、JS、WXSS文件。

小程序通过路由机制实现不同页面的切换。

(7)组件:

组件是小程序中可复用的UI元素,类似于自定义标签。

可以通过<component>标签定义组件,然后在页面中引用。

组件通常包括WXML、JS、WXSS文件。

(8)事件绑定:

可以在WXML中通过事件绑定(如bindtapbindinput)将用户的操作和JavaScript逻辑关联起来。

事件处理函数定义在JS文件中。

(9)数据绑定:

数据绑定允许将页面上的数据与JavaScript中的数据关联。

通过{{}}语法在WXML中实现数据的显示和更新。

(10)条件渲染和列表渲染:

可以使用<block>标签实现条件渲染,根据条件选择性地渲染页面元素。

使用<block wx:for>标签实现列表渲染,循环渲染数据列表。

更多语法与组件可以参考官网微信开放文档 (qq.com)

 3.案例演示开发

1.新建页面

在app.json中的添加

pages/user/user

保存后会自动生成目录

 2.新建标题        

左侧模拟器预览

3.后端传值

在前端user.wxml中编写以下代码

<view class="container"><view class="userinfo">用户信息:{{username}}</view></view>

 在user.js中的data中传值        

 模拟器预览:

今天的分享到这里就结束了,感谢各位大大的观看,各位大大的三连是博主更新的动力,感谢谢谢谢谢谢谢谢谢各位的支持!!!!! 

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

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

相关文章

蓝桥杯(七段码,C++)

思路&#xff1a; 1、把灯管的连接转为图结构&#xff0c;相邻的灯管即认为有边。 2、用深度搜索&#xff0c;去计算有多少种不同字符。 3、因为有每种字符都会重复算两遍&#xff0c;最后的结果需要数以2。 #include <iostream> using namespace std;int graph[7][7…

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

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

发货100虚拟商品自动发货系统存在SQL注入

漏洞描述 该系统存在SQL注入漏洞&#xff0c;可获取敏感信息及账号密码。 漏洞复现 构造SQL注入延时payload&#xff1a; M_id11%20AND%20(SELECT%208965%20FROM%20(SELECT(SLEEP(5)))sdhh)&typeproduct漏洞证明&#xff1a; 文笔生疏&#xff0c;措辞浅薄&#xff0c;…

ElasticSearch-Head 数据浏览406问题解决

解决方法&#xff1a; 1、打开Docker DeskTop的Containers&#xff0c;找到es-head容器 2、选择Exec Tab选项 3、编辑vendor.js文件 vim _site/vendor.js 4、显示行号 :set nu 5、修改配置 # 修改文件第6886、7574行 将"application/x-www-from-urlencodes"修改…

centos6/7 SOCKS5 堆溢出漏洞修复(RPM方式)curl 8.4 CVE-2023-38545 CVE-2023-38546

引用 https://darkdark.top/update-curl.html centos6 rpm 升级包下载&#xff1a;https://download.csdn.net/download/sinat_24092079/88425840 yum update libcurl-8.4.0-1.el6.1.x86_64.rpm curl-8.4.0-1.el6.1.x86_64.rpmcentos7 rpm 升级包下载&#xff1a;https://down…

BuyVM 挂载存储块

发布于 2023-07-13 on https://chenhaotian.top/linux/buyvm-mount-block-storage/ BuyVM 挂载存储块 参考&#xff1a; https://zhujitips.com/2653https://www.pigji.com/898.html 1 控制台操作 存储块购买完毕后&#xff0c;进入后台管理界面&#xff0c;进入对应 VPS …

多测师肖sir_高级金牌讲师_python之模块008

python之模块 一、模块的介绍 &#xff08;1&#xff09;python模块&#xff0c;是一个python文件&#xff0c;以一个.py文件&#xff0c;包含了python对象定义和pyhton语句 &#xff08;2&#xff09;python对象定义和python语句 &#xff08;3&#xff09;模块让你能够有逻辑…

【Tomcat】Apache发布两个新版本Tomcat修复多个Bug

Apache 官网发布了两个最新的 Tomcat 版本包&#xff0c;分别是&#xff1a;8.5.94、9.0.81 这两个最新版本修复了多个漏洞&#xff0c;统计信息如下表所示。有关漏洞的详细信息&#xff0c;请查阅官方相关文档&#xff08;见&#xff1a;参考&#xff09;。 严重等级漏洞说明…

卷积神经网络CNN基础知识

目录 1 前言2 卷积神经网络CNN2.1 LeNet-5相关介绍2.2 CNN基本结构2.2.1 卷积层2.2.2 池化层&#xff08;下采样层&#xff09;2.2.3 全连接层2.2.3.1激励层&#xff08;非线性激活&#xff09;2.2.3.2 线性层2.2.3.3 Dropout层2.2.3.4 总结 2.3 图像的上采样和下采样2.3.1 上采…

联盟链学习笔记-网络的创建

联盟链学习笔记 初始网络 下图是初始网络网络N的参考图 排序服务 在定义 网络 N 的时候&#xff0c;第一件事情就是定义一个 排序服务O4。O4 最初被配置并且由组织 R4 的一个管理员来启动&#xff0c;并且由 R4 管理。配置 NC4 包含了描述网络管理能力初始集合的规则。最初…

微软开源 windows-drivers-rs,用 Rust 开发 Windows 驱动程序

导读Microsoft Azure 首席技术官兼著名 Windows 软件开发人员 Mark Russinovich 在社交平台上宣布&#xff0c;启动了一个名为 windows-drivers-rs 的新开源项目。 该项目可帮助开发人员使用 Rust 开发 Windows 驱动程序&#xff0c;旨在支持 WDM (Windows Driver Model) 和 W…

【C语言】程序环境和预处理

程序环境&#xff1a; 1、C语言的任何一种实现&#xff0c;存在两个不同的环境&#xff1b; 2、翻译环境&#xff1a;将源代码转换成可执行的二进制指令&#xff08;机器指令&#xff09;&#xff1b;.c文件&#xff08;源文件——文本信息的代码&#xff09;->&#xff0…

微服务12-分布式服务理论基础+Seata的认识

文章目录 分布式服务理论基础前言微服务和分布式的区别CAP定理BASE理论 Seata流程&#xff1a;seata部署微服务集成seata 分布式服务理论基础 前言 单体架构&#xff1a; 1.项目过于臃肿&#xff0c;所有服务在一起&#xff0c;一个业务挂了&#xff0c;整个项目就不能用了&…

腾讯云我的世界mc服务器多少钱一年?

腾讯云我的世界mc服务器多少钱&#xff1f;95元一年2核2G3M轻量应用服务器、2核4G5M带宽优惠价218元一年、4核8G12M带宽轻量服务器446元一年&#xff0c;云服务器CVM标准型S5实例2核2G优惠价280元一年、2核4G配置服务器748元一年&#xff0c;腾讯云百科txybk.com分享腾讯云我的…

人事管理系统springboot42

大家好✌&#xff01;我是CZ淡陌。一名专注以理论为基础实战为主的技术博主&#xff0c;将再这里为大家分享优质的实战项目&#xff0c;本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路…

HNU-计算机网络-讨论课1

题目&#xff1a; 有关网络系统结构的讨论 一、必选问题&#xff08;每组平均每人1个&#xff09; 1、分层结构其实是世界演进形成的普遍系统结构&#xff0c;不管是自然领域还是社会领域&#xff0c;请举例说说你的理解。 2、有人说通信网络的核心技术在物理层&#xff0c…

Spring Boot 中的 TransactionTemplate 是什么,如何使用

Spring Boot中的TransactionTemplate&#xff1a;简化事务管理 事务管理是任何应用程序中至关重要的部分&#xff0c;特别是在处理数据库操作时。Spring Boot提供了多种方式来管理事务&#xff0c;其中之一是使用TransactionTemplate。本文将深入探讨TransactionTemplate是什么…

设计师都应该知道的事:极简主义家具该怎么去用

这座房子有黑暗而沉重的特征&#xff0c;包括棕色和白色的马赛克浴室瓷砖&#xff0c;弯曲的锻铁壁灯和土黄色的威尼斯石膏墙。但由于房屋与他们的风格相去甚远&#xff0c;白色&#xff0c;干净和简约&#xff0c;接下来我们就着这个方向去帮助房主进行改造。 她解释说&#x…

小谈设计模式(24)—命令模式

小谈设计模式&#xff08;24&#xff09;—命令模式 专栏介绍专栏地址专栏介绍 命令模式角色分析命令&#xff08;Command&#xff09;具体命令&#xff08;ConcreteCommand&#xff09;接收者&#xff08;Receiver&#xff09;调用者&#xff08;Invoker&#xff09;客户端&am…

生物制剂\化工\化妆品等质检损耗、制造误差处理作业流程图(ODOO15/16)

生物制剂、化工、化妆品等行业&#xff0c;因为产品为液体&#xff0c;产品形态和质量容易在各个业务环节发生变化&#xff0c;常常导致实物和账面数据不一致&#xff0c;如果企业业务流程不清晰&#xff0c;会导致系统大量的库存差异&#xff0c;以及财务难以核算的问题&#…