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

一、介绍

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

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

相关文章

Linux centos安装SQL Server数据库,结合cpolar内网穿透实现公网访问

文章目录 前言1. 安装sql server2. 局域网测试连接3. 安装cpolar内网穿透4. 将sqlserver映射到公网5. 公网远程连接6.固定连接公网地址7.使用固定公网地址连接 前言 简单几步实现在Linux centos环境下安装部署sql server数据库&#xff0c;并结合cpolar内网穿透工具&#xff0…

九月 NFT 行业解读:熊市情绪仍占上风

作者: stellafootprint.network 9 月&#xff0c;著名主流媒体《滚石》&#xff08;Rolling Stone&#xff09;发表了一篇题为《你的 NFT 实际上——终于——完全不值钱了》&#xff08;Your NFTs Are Actually — Finally — Totally Worthless&#xff09;的文章&#xff0c…

Nginx正向代理,反向代理,负载均衡

Nginx正向代理&#xff0c;反向代理&#xff0c;负载均衡 Nginx当中有两种代理方式&#xff1a; 七层代理&#xff08;http协议&#xff09; 四层代理&#xff08;tcp/udp流量转发&#xff09; 七层代理&#xff1a;七层代理&#xff0c;代理的是http的请求和响应 客户端请求…

F5.5G落进现实:目标网带来的光之路

数字化与智能化的世界将走向何方&#xff1f;这个问题有着非常复杂的答案&#xff0c;但其中有一个答案已经十分清晰。那就是智能化的下一步&#xff0c;必将走向泛在万兆的世界。 网络是算力联接的底座&#xff0c;是智能演化的基础。纵观每一代数字化升级&#xff0c;都可以发…

算法-堆/归并排序-排序链表

算法-堆/归并排序-排序链表 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/sort-list/description/?envTypestudy-plan-v2&envIdtop-interview-150 1.2 题目描述 2 优先级队列构建大顶堆 2.1 思路 优先级队列构建小顶堆链表所有元素放入小顶堆依次取出堆顶…

vscode使用

vscode 快捷键1、ctrl f 文件内搜索2、ctrlp 快速打开最近打开的文件3、ctrlshiltn 打开新的编辑器窗口4、ctrlshiftw 关闭编辑器5、ctrlhome 跳转到页头6、ctrlend 跳转到页尾 插件1、Markdown Preview 参考文章 https://zhuanlan.zhihu.com/p/113222681?utm_sourcecom.tenc…

React添加文件路径时使用@符号代替src目录(非creae-react-app)

在其它项目中看到的可以用符号来代替src目录&#xff0c;那么在自己的react项目中也必须得尝试一下。本人的项目不是通过create-react-app脚手架来创建的&#xff0c;无法使用craco或者的方案来实现。 jsconfig.json配置 用的vscode进行开发&#xff0c;查看项目当中是否存在js…

QT中使用QVTKOpenGLNativeWidget的简单教程以及案例,利用PCLVisualizer显示点云

先添加一个带有ui的QT应用程序。 一、在ui界面中添加QVTKOpenGLNativeWidget控件 先拖出来一个QOpenGLWidget控件 修改布局如下&#xff1a; 然后将QOpenGLWidget控件提升为QVTKOpenGLNativeWidget控件&#xff0c;步骤如下&#xff1a; 右击QOpenGLWidget窗口&#xff0c;选…

【算法挨揍日记】day16——525. 连续数组、1314. 矩阵区域和

525. 连续数组 525. 连续数组 题目描述&#xff1a; 给定一个二进制数组 nums , 找到含有相同数量的 0 和 1 的最长连续子数组&#xff0c;并返回该子数组的长度。 解题思路&#xff1a; 本题的元素只有0和1&#xff0c;根据题目意思&#xff0c;我们可以把题目看成找一段最…

DirectX3D 正交投影学习记录

所谓正交投影变换&#xff0c;就是已知盒状可视空间内任意点坐标(x,y,z)&#xff0c;求解垂直投影到xy平面的对应点坐标。 按照这个定义&#xff0c;xyz坐标系本身就是正交坐标系&#xff0c;盒状可视空间内任意点的坐标(x,y,z)投影到(x,y)平面&#xff0c;只要简单地丢弃z坐标…

如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

SLAM从入门到精通(dwa算法)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 要说搜路算法&#xff0c;这个大家都比较好理解。毕竟从一个地点走到另外一个地点&#xff0c;这个都是直觉上可以感受到的事情。但是这条道路上机…

基于SSM的视频播放系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

NSS [GWCTF 2019]枯燥的抽奖

NSS [GWCTF 2019]枯燥的抽奖 开题让我猜字符串&#xff0c;这种题目肯定不是猜&#xff0c;应该是类似于php伪随机数。 dirsearch扫他一下。 访问/check.php得到源码。 分析一下代码。 通过PHP伪随机数从字符库$str_long1中选取20个字符组成字符串&#xff0c;返回给我们前十…

UE5 运行时生成距离场数据

1.背景 最近有在运行时加载模型的需求&#xff0c;使用DatasmithRuntimeActor可以实现&#xff0c;但是跟在编辑器里加载的模型对比起来&#xff0c;室内没有Lumen的光照效果。 图1 编辑器下加载模型的效果 图2 运行时下加载模型的效果 然后查看了距离场的数据&#xff0c;发现…

【扩散模型从原理到实战】Chapter2 Hugging Face简介

文章目录 Hugging Face的核心功能介绍Hugging Face开源库Hugging Face开源库Gradio工具介绍参考资料 Hugging Face是机器学习从业者协作和交流的平台&#xff0c;成立于2016年&#xff0c;在纽约和巴黎设有办事处&#xff0c;团队成员来自世界各地&#xff0c;远程办公。 致力于…

封装一个Element-ui生成一个可行内编辑的表格(vue2项目)

这个封装的是一个供整个项目使用的表格,可多次复用.放在一个全局使用的公共组件文件下. 大致功能介绍,封装自定义指令,点击获得焦点,显示输入框,失去焦点显示文本内容,类型是字典决定类型,图片可以显示图片名还是上传图片 子组件 <script> export default {props: {//生…

SpringCloud ---day1

认识微服务 单体架构 微服务架构 方便进行打包上线,版本的更新上线,降低项目之间的耦合度,减少代码量巨大导致的编译/打包时间长的问题 SpringCloud简介 项目熟悉 业务流程 项目模块划分 服务拆分原则 什么时候拆: 对于一个初创的项目&#xff0c;首先要做的是验证项目的可…

el-table :span-method合并单元格

<el-table :data"tableData" :span-method"objectSpanMethod" border style"width: 100%" :height"300"><el-table-column type"index" label"序号" width"50"></el-table-column>&l…

ajax同步与异步,json-serve的安装与使用,node.js的下载

20.ajax json 轻量级的数据格式做配置文件网络传输 xml 重量级的数据格式 可扩展标记语言做配置文件网络传输 现在目前主流就是大量采用json做网络传输数据格式 1.ajax的概念: 与服务器进行’通信’的一种技术,能够实现异步的刷新页面 **同步:**按照顺序一步步的执行,容易造…