【微信小程序】6天精准入门(第1天:小程序入门)

news2024/11/24 18:28:44

一、介绍

1、什么是小程序

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

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

2、小程序的作用

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

3、小程序可以干什么

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

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

二、小程序入门

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.coloradmin.cn/o/1091815.html

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

相关文章

设备巡检管理系统—动态化管理设备

为进一步夯实设备基础管理&#xff0c;提高设备运行的可靠性&#xff0c;做到及时发现设备故障隐患&#xff0c;并根据检查结果分析提出预防性维修计划&#xff0c;从而使用凡尔码搭建设备管理系统来管理设备&#xff0c;该系统能最大限度地减少设备故障停机&#xff0c;杜绝设…

【git】gitlab常用命令

gitlab官网 官网&#xff1a;官网 中文官网&#xff1a;中文官网 默认的gitlab安装目录 /opt/gitlab/bin 启动 gitlab-ctl start 查看状态 gitlab-ctl status 停止 gitlab-ctl stop 重启GitLab gitlab-ctl restart 查看gitlab的配置文件 配置的路径是&#xff1a;/…

【Java】jvm 元空间、常量池(了解)

JDK1.8 以前的 HotSpot JVM 有方法区&#xff0c;也叫永久代&#xff08;permanent generation&#xff09;方法区用于存放已被虚拟机加载的类信息&#xff0c;常量、静态遍历&#xff0c;即编译器编译后的代码JDK1.7 开始了方法区的部分移除&#xff1a;符号引用&#xff08;S…

Zotero同步坚果云

实用教程 无意之中发现的Zotero同步坚果云的教程&#xff0c;简直和自己当时看视频&#xff0c;搜经验贴做的步骤一模一样&#xff0c;十分赞&#xff01;值得收藏&#xff01;只是忘记当时在哪保存的图片了&#xff0c;所以没法引用&#xff01;只能在这借花献佛&#xff0c;…

二叉树学习笔记

1、链表实现二叉树 // 树节点类 class Bitreenode {char data;Bitreenode* ls, * rs, * fa; // ls为左儿子节点&#xff0c;rs为右儿子节点&#xff0c;fa为父节点 public:Bitreenode() {data 0;ls rs fa nullptr;}void set_ls(Bitreenode *p) {ls p;}void set_rs(Bitre…

ONNX推理流程

文章目录 python版API推理流程 python版API推理流程 使用netron工具查看onnx网络结构 如下图&#xff0c;可以看出此次要使用的网络输入为&#xff1a; 输入名称&#xff1a;input输入形状&#xff1a;[1, 3, 256, 256]输入数据类型&#xff1a;float32 网络的输出为&#xff1…

如何利用IP地址定位保护网络安全?

通过IP地址定位可以在一定程度上增强网络安全&#xff0c;但它并不是唯一的安全措施。以下是如何利用IP地址定位来保护网络安全的一些方法&#xff1a; 异常检测和入侵检测&#xff1a;监控网络上的IP地址流量&#xff0c;定位异常活动&#xff0c;如大规模的连接尝试、不寻常的…

习题1. 31

话不多说 先上代码 (defn product [ term a nxt b](defn iter [a result](if (> a b)1 (* (term a) (iter (nxt a) result))))(iter a 1)) 跟习题1.30比较起来&#xff0c;就是两个地方不同 乘法不能乘0 必须是1。难度来讲&#xff0c;跟1.30难度是一样的。增加了迭代过…

Qt之submodule编译

工作中会遇到这样一种情况&#xff1a;qt应用程序在运行时提示找不到某个qt的动态库。我遇到的是缺少libQt5Websocket.so&#xff0c;因为应用程序是在x86平台银河麒麟v10上开发&#xff0c;能够正常编译运行&#xff0c;然后移植到rk3588&#xff08;aarch64架构&#xff09;上…

阿里云/腾讯云/华为云国际版实名账号:亚太已发展超2500个本地生态伙伴 超50%收入由伙伴创造

华为全联接大会2022在泰国开幕&#xff0c;以“创新无限&#xff0c;一切皆服务”为主题的华为云峰会成功举办&#xff0c;华为云亚太地区部总裁曾兴云、华为云首席产品官方国伟以及多位客户伙伴发表主旨演讲。会上&#xff0c;华为云发布《云原生2.0架构白皮书》并联合CNCF&am…

OpenResty安装

OpenResty 是一个基于 Nginx 的 Web 平台&#xff0c;它将 Nginx 和 Lua 脚本语言结合起来&#xff0c;提供了更强大的 Web 应用开发和部署能力。OpenResty 仓库是 OpenResty 项目的官方仓库&#xff0c;包含了 OpenResty 的源代码、文档、示例等资源。 OpenResty 仓库地址是&…

【C++】位图及其应用

&#x1f680;write in front&#x1f680; &#x1f4dc;所属专栏&#xff1a; C学习 &#x1f6f0;️博客主页&#xff1a;睿睿的博客主页 &#x1f6f0;️代码仓库&#xff1a;&#x1f389;VS2022_C语言仓库 &#x1f3a1;您的点赞、关注、收藏、评论&#xff0c;是对我最大…

【算法-动态规划】钢条切割问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

python一行命令搭建web服务,实现内网共享文件

python一行命令搭建web服务&#xff0c;实现内网共享文件 有时候我们在本地电脑访问自己的虚拟机的时候&#xff0c;可能因为某些原因无法直接CV文件到虚拟机。但此时我们又想上传文件到虚拟机&#xff0c;如果虚拟机和本地电脑可以互通。那么我们可以直接通过python来启动一个…

安全巡检管理系统—隐患排查治理

安全管理越来越重要&#xff0c;每个生产企业都需要一个安全隐患排查治理小程序&#xff01;利用凡尔码平台搭建安全巡检管理系统主要有以下四个功能 1、制定巡检计划&#xff1a;安全巡检管理系统可以帮助用户制定巡检计划&#xff0c;用户可以根据需要创建不同的计划&#xf…

浅谈MDK, IAR,CLANG和GCC的局部变量字节对齐处理差异(2023-10-13)

视频&#xff1a; https://www.bilibili.com/video/BV1CB4y1Z7kA 浅谈MDK, IAR, CLANG和GCC的局部变量字节对齐处理差异 问题由来&#xff1a; 早期这个帖子里面的局部变量对齐仅测试了MDK AC5&#xff0c;但项目中使用AC6发现了新问题&#xff0c;看来AAPCS规约研究的还是不…

Discuz大气游戏风格模板/仿lol英雄联盟游戏DZ游戏模板GBK

Discuz大气游戏风格模板&#xff0c;lol英雄联盟游戏模板&#xff0c;DZ游戏娱乐模板GBK。模板名称&#xff1a;lol英雄联盟游戏&#xff08;m0398_lol&#xff09; 下载地址&#xff1a;https://bbs.csdn.net/topics/617408069

多维高斯分布(多元正态分布)的概率密度函数和最大似然估计

多元高斯分布的概率密度函数 f μ , Σ ( x ) 1 ( 2 π ) D / 2 1 ∣ Σ ∣ 1 / 2 e x p { − 1 2 ( x − μ ) T Σ − 1 ( x − μ ) } f_{\mu, \Sigma}(x)\frac{1}{(2 \pi)^{D/2}} \frac{1}{|\Sigma|^{1/2}} exp\{-\frac{1}{2}(x-\mu)^T \Sigma ^{-1}(x-\mu)\} fμ,Σ​(x)…

车载电子电器架构 —— 车载芯片技术简介

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c;多看一眼都是你的不…

芯片制造:一颗芯片到底是如何诞生的(下)

目录 背景 芯片制造&#xff1a;晶圆厂的王国 上游&#xff1a;晶圆材料准备 中游&#xff1a;晶圆加工过程 下游&#xff1a;封装与测试 产业链分工视角&#xff1a;设计、制造、封装、测试的分工合作 小结 背景 上一讲&#xff0c;我带你从市场需求分析开始&#xff0…