微信小程序(小程序入门)

一,介绍

1、什么是小程序

     小程序是一种轻量级的应用程序,可以在移动设备上运行,不需要用户下载和安装。它们通常由企业或开发者开发,用于提供特定功能或服务。

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

2、小程序的作用


        小程序的作用很多。首先,它们提供了一种方便的方式,让用户能够直接在手机上访问特定的功能或服务,而不需要下载一个完整的应用程序。小程序还可以帮助企业或开发者降低开发和维护应用程序的成本,因为它们只需要在一个平台上进行开发,就可以在多个平台上运行。
 

3、小程序可以干什么


        小程序可以实现各种功能。例如,你可以使用小程序进行在线购物、预订餐厅、查看新闻、打开电子书、使用在线工具,甚至是玩游戏。小程序通常提供简单、直观的用户界面,使用户能够快速完成他们想要的任务。通过小程序,用户可以节省时间和精力,同时提供更加个性化的使用体验。

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

二、小程序入门

1、注册

进入小程序官网公众号 (qq.com)

然后进入我们的注册界面按照提示步骤进行注册注册页面

 

2.登录

进入我们的小程序后台,找到我们的小程序ID,后续开发需要

 3、安装开发者工具


        进入官网的开发者下载页面微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com),选择需要的版本进行下载安装。

        进去后进行登录创建,选择需要的功能进行开发。

        后端服务选择的事微信云开发是已经写好的一部分代码,可以直接运行的;选择的是不使用云服务则是自己编写代码。

 

三、入门案例

1、创建

选择不使用云服务,选择JavaScript-基础版本,确定创建,等待创建(必须要联网),出现了你登陆的账号头像就说明创建成功了。

2、目录结构

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

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

【注意】为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名

这两个代码代表了谁在前面谁就是主页面

 

3、配置文件

app.json

设置全局顶部背景样式

 

 如果我们想用不同的可以在对应的json文件里面进行配置

4、创建文件

添加你所需要的文件在在全局的app.json里面会自动生成

 4.1、json配置

在生成的json文件里面进行页面的配置

{"usingComponents": {},"navigationBarTitleText": "学生页面"
}

 4.2、数据的传递及页面的布置

如果页面不知道这么编写可以参考小程序的wxml文档小程序简介 | 微信开放文档 (qq.com),数据用{{}}来传递。

<view class="container">学生信息:{{stuName}}
</view>

js里面的data里面定义一个stuName

  data: {stuName:'我真的会谢'}

 4.3、样式

wxss文件里面写好我们需要的样式

/* pages/stu/stu.wxss */
.stuinfo{font-size: 20px;color: blue;
}

在wxml里面用class属性调用

<view class="container"  class="stuinfo">学生信息:{{stuName}}
</view>

 4.4、事件

wxml里面添加标签按钮

<!--pages/stu/stu.wxml-->
<view class="container" class="stuinfo">学生信息:{{stuName}}<button bindtap="ondian">点我</button>
</view>

js文件里面写一个方法

  // 点击ondian(){console.log('点到我了');}

 

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

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

相关文章

【算法练习Day22】 组合总和 III电话号码的字母组合

​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;练题 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 文章目录 组合总和 III剪枝 电话号码…

力扣环形链表(1)进阶环形链表(2)及环形链表的约瑟夫问题

为了加深对环形链表的理解和掌握&#xff0c;这两道题是很不错的选择。 这里所说环形链表不是一个圈圈的结构&#xff0c;而是带环链表。 链接&#xff1a;环形链表&#xff08;1&#xff09; 注意这里链表的长度 所以要注意链表是否为空 第一种方法&#xff0c;应该是比较容易…

大数据 DataX 详细安装教程

目录 一、环境准备 二、安装部署 2.1 二进制安装 2.2 python 3 支持 三、Data X 初体验 3.1 配置示例 3.1.1. 生成配置模板 3.1.2 创建配置文件 3.1.3 运行 DataX 3.1.4 结果显示 3.2 动态传参 3.2.1. 动态传参的介绍 3.2.2. 动态传参的案例 3.3 迸发设置 …

【传输层协议】UDP/TCP结构特点与原理(详解)

文章目录 1. UDP1.1 UDP结构1.2 UDP特点1. 无连接2. 不可靠3. 面向数据报4. 缓冲区5. 大小受限6. 无序性 2. TCP2.1 TCP结构2.2 TCP特点1. 有连接2. 可靠性3. 面向字节流4. 拥塞控制5. 头部开销 2.3 TCP原理1. 确认应答&#xff08;安全机制&#xff09;2. 超时重传&#xff08…

基于springboot实现家具网站设计与实现平台项目【项目源码+论文说明】

摘要 随着移动互联网技术的深入发展&#xff0c;电子商务也不断的完善&#xff0c;线上销售额不断提高&#xff0c;网络消费成为人民日常生活的一部分。并且随着电子商务的发展&#xff0c;也呈现出多元化方向&#xff0c;各种农村电商、生鲜电商、家具电商等&#xff0c;带动…

java SpringBoot基础

目录 SpringBootWeb快速入门前言需求开发步骤创建SpringBoot工程&#xff08;需要联网&#xff09;定义请求处理类运行测试 HTTP协议HTTP概述HTTP-请求协议格式GET方式的请求协议POST方式的请求协议 HTTP-响应协议格式HTTP-协议解析 WEB服务器-Tomcat简介基本使用注意事项 Spri…

新增Node.js运行环境、新增系统缓存清理功能,1Panel开源面板v1.7.0发布

2023年10月16日&#xff0c;现代化、开源的Linux服务器运维管理面板1Panel正式发布v1.7.0版本。 在这个版本中&#xff0c;1Panel新增Node.js运行环境&#xff1b;新增系统缓存清理功能&#xff1b;应用安装时支持选择远程数据库。此外&#xff0c;我们进行了40多项功能更新和…

apk和小程序渗透

apk和小程序域服务器通信使用的还是http协议&#xff0c;只是使用了加密。只要可以获取到http的请求报文&#xff0c;就可以回归到web渗透的层面。apk和小程序的渗透很复杂&#xff0c;涉及逆向时要进行脱壳&#xff0c;脱壳后反编译了&#xff0c;源代码没做加密就能直接逆向出…

阵列信号处理_对比常规波束形成法(CBF)和Capon算法

空间谱估计 利用电磁波信号来获取目标或信源相对天线阵列的角度信息的方式&#xff0c;也称测向、波达方向估计&#xff08;DOA&#xff09;。主要应用于雷达、通信、电子对抗和侦察等领域。 发展 常规波束形成&#xff08;CBF&#xff09;。本质是时域傅里叶变换在空域直接…

排序算法-基数排序法(RadixSort)

排序算法-基数排序法&#xff08;RadixSort&#xff09; 1、说明 基数排序法与我们之前讨论的排序法不太一样&#xff0c;并不需要进行元素之间的比较操作&#xff0c;而是属于一种分配模式排序方式。 基数排序法比较的方向可分为最高位优先&#xff08;Most Significant Di…

centos 里面的service自启动app.jar,出现两个java进程,app是同一个端口

当使用jps -lv查看java虚拟机进程 app.jar启动后&#xff0c;居然出现两个启动进程&#xff0c;而且他们的端口都一样&#xff0c;同一端口&#xff0c;是不允许启动两个相同app的。 使用进程ps查看进程工具 #ps -aux 参数说明&#xff1a; a: 显示跟当前终端关联的所有进…

做web自动化测试遇到Chrome浏览器老是自动更新,怎么办 ? 这里提供两个解决办法 。

web自动化安装驱动安装 进行web自动化时 &#xff0c;需要提前安装浏览器的驱动 &#xff0c;尤其是chrome浏览器 。它的更新速度很快 &#xff0c;是不是更新了新版本 。这就导致我们的驱动也要跟着变化。 1.停止自动更新 那么 &#xff0c;如何关闭chrome浏览器的自动更新…