微信小程序入门级

目录

一.什么是小程序?

二.小程序可以干什么?

三.入门使用

3.1. 注册

3.2. 安装

3.3.创建项目

3.4.项目结构

3.5.应用

        好啦今天就到这里了,希望能帮到你哦!!!


一.什么是小程序?

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

2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。

  • 小程序是一种轻量级的应用程序,它可以在移动设备上运行,并提供类似于传统应用程序的功能和体验。小程序通常不需要下载和安装,可以直接在手机的操作系统环境中运行,如微信、支付宝等。
  • 小程序可以满足用户的特定需求,比如在线购物、餐饮外卖、新闻阅读、社交娱乐等。它们通常具有简洁的界面和快速的加载速度,以提供便捷的使用体验。
  • 与传统应用程序相比,小程序无需占用手机存储空间,升级和更新也更为方便。同时,小程序还可以实现跨平台运行,提供给开发者更广阔的用户群体。
  • 小程序是一种灵活、便捷的应用形式,为用户带来更多的便利和选择。

二.小程序可以干什么?

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

三.入门使用

相关资料  : 微信公众平台

开发小程序的第一步,你需要拥有一个小程序帐号,通过这个帐号你就可以管理你的小程序。

跟随这个教程,开始你的小程序之旅吧!!!

3.1. 注册

进入

小程序注册页icon-default.png?t=N7T8https://mp.weixin.qq.com/wxopen/waregister?action=step1根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

 小程序注册

 

完成信息的填写后会根据你输入的邮箱账号,发送链接进行激活,点击进去后进行信息的登记 (需要实名认证) ,在选择中会有个类型,选择个人即可。。 

3.2. 安装

前往

开发者工具下载页面icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看

《开发者工具介绍》icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

 以根据自己的需要进行其他版本的下载

           注 :   如果电脑系统是Windows 7 的话,需要下载1.05的版本才可以进行使用

3.3.创建项目

下载安装完成之后,打开 微信开发者工具,是个二维码话用你注册的那个微信扫码登录就可以了哦!!!

                                                     

再进行创建一个微信小程序的项目,点击中间的 +

注 : 其中有很多模板进行选择,可以多创建几个进行熟悉该开发工具的项目结构 

这里AppID是需要在自己的注册的账号中进行获取 : 

微信扫码登入后 ,进入&登录

小程序后台icon-default.png?t=N7T8https://mp.weixin.qq.com/

选中开发  -->  开发管理  -->  开发设置  

在开发设置中找到自己的AppID进行填写到创建项目的AppID上面,之后点击完成即可。

 注 : 创建项目的过程中需要稍稍等待,在左侧的模拟器中看到了自己的微信头像方可操作 

3.4.项目结构

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

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

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

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

文件类型必需作用
js页面逻辑
wxml页面结构
json页面配置
wxss页面样式表
  • .json 后缀的 JSON 配置文件
  • .wxml 后缀的 WXML 模板文件
  • .wxss 后缀的 WXSS 样式文件
  • .js 后缀的 JS 脚本逻辑文件

详细如图:

 

                        注 : 图中的user的一个页面&页面名称 

 

3.5.应用

我们创建完成项目后,会有两页面,一个是主页,一个是日志。

在左边的模拟器中可以进行查看和操作。

如图 : 

接下来我们继续入门的一个基础使用

在主体中的 app.json 文件中新创建一个页面为 : user

{"pages":["pages/user/user","pages/index/index","pages/logs/logs"],

结合我们所学的 Vue技术点 进行小程序页面的代码编写

在创建user的文件中找到 user.json ,进行页面相关的设置

{"usingComponents": {},"navigationBarBackgroundColor": "#aaa"
}

在创建user的文件中找到 user.wxss ,进行页面相关的样式设置

/* pages/user/user.wxss */
.userinfo {display: flex;flex-direction: column;align-items: center;color: #aaa;
}
.btn{
margin: 20px;
}

在创建user的文件中找到 user.js ,在Page 中进行页面Vue变量及方法的编写

  data: {userName:'爱坤'},clickMe(){console.log('用户已经点击了');},

在创建user的文件中找到 user.wxml ,进行页面的布局

<view class="container"><view class="userinfo">用户名称 : {{userName}}<button class="btn" type="primary" plain="true" bindtap="clickMe" >点击我</button></view>
</view>

打开模拟器,编辑器,调试器进行编写的一个代码测试。

 效果如图 : 

        好啦今天就到这里了,希望能帮到你哦!!!

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

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

相关文章

PyTorch 深度学习之卷积神经网络(基础篇)Basic CNN(九)

0. Revision: Fully connected Neural Network 全连接 1. Convolution Neural Network 保留空间信息 1.1 Convolution Convolution-Single Input Channel 单通道 数乘 3 input Channels 3通道 N input Channels N input Channels and M output channel M 个卷积核 1.2 conv…

npm安装依赖报错npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND、npm run dev报错记录

npm安装依赖报错npm ERR! code ENOTFOUND npm ERR! errno ENOTFOUND_得我所得&#xff0c;爱我所爱的博客-CSDN博客npm安装依赖报错今天在学习webpack的时候&#xff0c;在使用npm install来安装一个局部的webpack时候&#xff0c;报出一下错误:npm ERR! code ENOTFOUNDnpm ERR…

Python批量测试IP端口GUI程序(Tkinter)

一、实现样式 批量IP与端口中间用“,”分割&#xff0c;点击Telnet进行测试&#xff0c;前提是你电脑安装了telnet客户端&#xff0c;Clear按钮用来清空文本框。 二、核心点 1、使用Tkinter来制作桌面GUI页面 2、使用telnetlib模块测试telnet端口 三、困难点 1、测试结果…

15.项目讲解之前端页面的实现

项目讲解之前端页面的实现 本项目前端使用HBuilerX软件编写HBuilderX下载安装配置一键直达&#xff0c; uniapp框架uniapp官网&#xff0c; 使用Element-ui组件Element-ui组件网址进行前端页面的完成。 前端项目下载地址 前端项目 前端项目展示 首页 首页展示 echarts实现…

前端页面布局之【响应式布局】

目录 &#x1f31f;前言&#x1f31f;优点&#x1f31f;缺点&#x1f31f;media兼容性&#x1f31f;利用CSS3-Media Query实现响应式布局&#x1f31f;常见的媒体类型&#x1f31f;常见的操作符&#x1f31f;属性值&#x1f31f;设备检测&#x1f31f;响应式阈值选取&#x1f3…

【使用教程】在Ubuntu下PMM60系列一体化伺服电机通过SDO跑循环同步位置模式详解

本教程将指导您在Ubuntu操作系统下使用SDO&#xff08;Service Data Object&#xff09;来配置和控制PMM60系列一体化伺服电机以实现循环同步位置模式。我们将介绍必要的步骤和命令&#xff0c;以确保您能够成功地配置和控制PMM系列一体化伺服电机。 01.准备工作 在正式介绍之…

位于同一子网下的ip在子网掩码配置错误的情况下如何进行通信(wireshrak抓包分析)

前言 最近看书发现个问题&#xff0c;正好想学习下wireshark的使用&#xff0c;于是抓包做了下实验。 问题是这样的&#xff0c;假设有服务器A和服务器B&#xff0c;正确配置下两者处于同一子网&#xff1b;此时B的网络配置正确&#xff0c;而A在配置子网掩码时出了错&#xff…

PromptScript:轻量级 DSL 脚本,加速多样化的 LLM 测试与验证

TL&#xff1b;DR 版本 PromptScript 是一个轻量级的 Prompt 调试用的 DSL &#xff08;Yaml&#xff09;脚本&#xff0c;以用于快速使用、构建 Prompt。 PromptScript 文档&#xff1a;https://framework.unitmesh.cc/prompt-script Why PromptScript &#xff1f; 几个月前&…

Qtcreator console 中文 乱码

开发环境&#xff1a;windows11 x64 位&#xff1b;Qt Creator 11.0.3&#xff1b;Based on Qt 6.4.1 (MSVC 2019, x86_64) 报错内容如图所示&#xff1a; 解决方法如下&#xff1a;

unity2022版本 实现手机虚拟操作杆

简介 在许多移动游戏中&#xff0c;虚拟操纵杆是一个重要的用户界面元素&#xff0c;用于控制角色或物体的移动。本文将介绍如何在Unity中实现虚拟操纵杆&#xff0c;提供了一段用于移动控制的代码。我们将讨论不同类型的虚拟操纵杆&#xff0c;如固定和跟随&#xff0c;以及如…

关于EEGLAB安装时报错“未定义函数或者变量‘EEGLAB’”

按照其他博主写的&#xff0c;下载EEGLAB&#xff08;最新版&#xff09;&#xff0c;然后解压&#xff0c;打开matlab&#xff08;2019a&#xff09;导入路径&#xff0c;在前述步骤都正确的情况下&#xff0c;命令行输入eeglab&#xff0c;matlab提示"未定义函数或者变量…

网络原理之初识

文章目录 前言计算机网络的发展史网络互连局域网局域网组建网络的方式 广域网网络通信基础IP 地址端口号网络协议五元组协议分层OSI 七层模型TCP/IP 五层协议网络设备所在分层 封装和分用 前言 在这个信息爆炸的时代&#xff0c;计算机网络已经渗透到我们生活的方方面面&#…

算法村开篇

大家好我是苏麟从今天开始我将带来算法的一些习题和心得体会等等...... 算法村介绍 我们一步步地学习算法本专栏会以闯关的方式来学习算法 循序渐进地系统的学习算法并掌握大部分面试知识 , 期待和大家一起进步 . 索大祝大家学有所成 , 前程似锦.

ESP32网络开发实例-从SD卡加载Web页面文件

从SD卡加载Web页面文件 文章目录 从SD卡加载Web页面文件1、应用介绍2、软件准备3、硬件准备4、Web页面代码实现5、Web服务器代码实现在文中,将展示如何构建一个 Web 服务器,为存储在SD卡中的 HTML 和 CSS 文件提供服务。 我们不必将 HTML 和 CSS 文本硬编码入代码中,而是创建…

多目标水母搜索算法(Multi-Objective Jellyfish Search algorithm,MOJS)求解微电网优化--提供MATLAB代码

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、多目标水母搜索算法MOJS …

局域网上IP多播与IP单播关于MAC地址的区别

IP单播进行到局域网上的时候&#xff1a; 网际层使用IP地址进行寻址&#xff0c;各路由器收到IP数据报后&#xff0c;根据其首部中的目的IP地址的网络号部分&#xff0c;基于路由表进行查表转发。 查表转发的结果可指明IP数据报的下一跳路由器的IP地址&#xff0c;但无法指明…

数据库安全-H2 databaseElasticsearchCouchDBInfluxdb漏洞复现

目录 数据库安全-H2 database&Elasticsearch&CouchDB&Influxdb 复现influxdb-未授权访问-jwt 验证H2database-未授权访问-配置不当CouchDB-权限绕过配合 RCE-漏洞CouchDB 垂直权限绕过Couchdb 任意命令执行 RCE ElasticSearch-文件写入&RCE-漏洞Elasticsearch写…

School‘s Java test

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;那个传说中的man的主页 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;题目大解析&#xff08;3&#xff09; 目录 &#x1f449;&#x1f3fb;第四周素数和念整数 &#…

【PostgreSQL启动,停止命令(重启)】

找到 /usr/lib/systemd/system文件夹路径看是否包含 postgresql服务 关闭服务&#xff1a; systemctl stop postgresql-12.service启动服务 systemctl start postgresql-12.service重启服务 systemctl restart postgresql-12查看状态 systemctl status postgresql-12.servi…

4+1视图与UML

目录 逻辑视图过程视图开发视图物理视图&#xff08;部署视图&#xff09;用例视图 41视图&#xff0c;即逻辑视图&#xff0c;过程视图&#xff0c;实现视图&#xff0c;部署视图&#xff0c;用例视图。 为什么不用一个视图&#xff1f; 针对多个用户&#xff0c;即终端用户&a…