微信小程序入门级

目录

一.什么是小程序?

二.小程序可以干什么?

三.入门使用

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.mzph.cn/news/105056.shtml

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

相关文章

汇编经典程序——将一个字节数据以十六进制形式显示

法一&#xff1a; 由于0-9的ASCII码实际值30h&#xff0c;A-Z的ASCII码实际值37h&#xff0c;故直接加对应的数即可 ;该程序将一个字节数据以十六进制形式显示&#xff08;直接加对应数值&#xff09;.model small .stack .data hex db 4bh.code .startup;显示高位mov al,hex…

浅析倾斜摄影三维模型(3D)几何坐标精度偏差的几个因素

浅析倾斜摄影三维模型&#xff08;3D&#xff09;几何坐标精度偏差的几个因素 倾斜摄影是一种通过倾斜角度较大的相机拍摄建筑物、地形等场景&#xff0c;从而生成高精度的三维模型的技术。然而&#xff0c;在进行倾斜摄影操作时&#xff0c;由于多种因素的影响&#xff0c;导致…

解决ERROR: No query specified的错误以及\G 和 \g 的区别

文章目录 1. 复现错误2. 分析错误3. 解决问题4. \G和\g的区别 1. 复现错误 今天使用powershell连接数据库后&#xff0c;执行如下SQL语句&#xff1a; mysql> select * from student where id 39 \G;虽然成功查询除了数据&#xff0c;但报出如下错误的信息&#xff1a; my…

Hadoop+Zookeeper+HA错题总结(一)

题目3&#xff1a; 下列哪项通常是hadoop集群运行时的最主要瓶颈&#xff1f;() [单选题] A、CPU B、网络 C、磁盘 IO D、内存 【参考答案】: C 【您的答案】: D 这道题的答案取决于集群的性能&#xff0c;一般来说运行时的主要瓶颈是网络。但是如果集群的磁盘IO性能较差&am…

WuThreat身份安全云-TVD每日漏洞情报-2023-10-11

漏洞名称:Microsoft 消息队列远程代码执行漏洞 漏洞级别:严重 漏洞编号:CVE-2023-35349 相关涉及:Microsoft Windows 漏洞状态:未定义 参考链接:https://tvd.wuthreat.com/#/listDetail?TVD_IDTVD-2023-25370 漏洞名称:Microsoft写字板 信息泄露漏洞 漏洞级别:中危 漏洞编号:…

挖机技术哪家强

挖机技术哪家强&#xff0c;中国山东找蓝翔&#xff0c;开挖机是我曾经的梦想&#xff0c;每个男人心中都有一台自己的挖机&#xff0c;近半年做的项目就是关于挖机销售CRM&ERP系统&#xff0c; 今天我们聊聊关于挖机的基本知识。 注&#xff1a;此文并非广告&#xff0c;…

项目整合管理

项目整合管理概述 概述 项目的复杂性来源于组织的系统行为、人类行为以及组织或环境中的不确定性。在项目整合之前&#xff0c;项目经理需要考虑项目面临的内外部环境因素&#xff0c;检查项目的特征或属性。 作为项目的一种特征或属性&#xff0c;复杂性的含义&#xff1a; …

快速构建代理应对

今天我要和大家分享一个解决反爬策略升级问题的方法&#xff0c;那就是快速构建代理池。如果您是一位爬虫开发人员&#xff0c;一定深知反爬策略的烦恼。但是&#xff0c;通过构建代理池&#xff0c;您可以轻松地应对反爬策略的升级&#xff0c;让您的爬虫持续高效运行。接下来…

8年经验之谈 —— 如何用 JMeter 编写性能测试脚本?

Apache JMeter 应该是应用最广泛的性能测试工具。怎么用 JMeter 编写性能测试脚本&#xff1f; 1. 编写 HTTP 性能测试脚本 STEP 1. 添加 HTTP 请求 i STEP 2. 了解配置信息 HTTP 请求各项信息说明&#xff08;以 JMeter 5.1 为例&#xff09;。 如下图所示&#xff1a; W…

Vue3路由引入报错解决:无法找到模块“xxx.vue”的声明文件 xxx隐式拥有 “any“ 类型。

这类情况应该遇见过吧&#xff0c;这是因为 TypeScript只能理解 .ts 文件&#xff0c;无法理解 .vue 文件。 解决方法&#xff1a;在项目的根目录或者src文件夹下创建一个后辍为 文件名.d.ts 的文件&#xff0c;并写入一下内容&#xff1a; declare module *.vue {import { …

前端基础一:用Formdata对象来上传图片的原因

最近有人问&#xff1a;你是否能用json来传图片&#xff0c;其实应该这么理解就对了。 一、上传的数据体格式Content-Type 1.application/x-www-form-urlencoded 2.application/json 3.multipart/form-data 以上三种类型旨在告诉服务器需要接收的数据类型同事要…

OpenCV实现人脸关键点检测

目录 实现过程 1&#xff0c;代码解读 1.1 导入工具包 1.2导入所需图像&#xff0c;以及训练好的人脸预测模型 1.3 将 dlib 的关键点对象转换为 NumPy 数组&#xff0c;以便后续处理 1.4图像上可视化面部关键点 1.5# 读取输入数据&#xff0c;预处理 1.6进行人脸检测 1…

解决Win10电脑无线网卡的移动热点无法开启问题

一、目的 利用无线网卡连接网络&#xff0c;然后又用无线网卡通过移动热点分享该网络。 移动热点&#xff0c;简单地说&#xff0c;就是将台式机或笔记本的 Internet 连接转化成 WIFI 信号以供移动设备无线上网的功能&#xff0c;硬件前提是电脑须安装有无线网卡。 二、问题 …

torch.hub.load报错urllib.error.HTTPError: HTTP Error 403: rate limit exceeded

在运行DINOv2的示例代码时&#xff0c;需要载入预训练的模型&#xff0c;比如&#xff1a; backbone_model torch.hub.load(repo_or_dir"facebookresearch/dinov2", modelbackbone_name) torch.hub.load报错“urllib.error.HTTPError: HTTP Error 403: rate limit…

重拾技术写作,勿忘初心

说说这一年的学习经历 关于我 我来自湖南省的一所专科院校&#xff0c;非科班&#xff1b;当前已经是大二了。后年就要专升本了&#xff0c;不由的感叹&#xff0c;这时间为什么会这么快&#xff1f; 其实我早在大一上下学期就学完了以下知识点&#xff1a;C语言 、基础数据结…

Linux- 自定义一个ARP请求

自定义一个ARP请求或响应&#xff0c;并使用AF_PACKET套接字发送&#xff0c;需要手动创建整个以太网帧。 下面是一个简单的C代码示例&#xff0c;用于发送一个ARP请求&#xff0c;查询给定IP地址的MAC地址&#xff1a; #include <stdio.h> #include <stdlib.h> …

530. 二叉搜索树的最小绝对差

给你一个二叉搜索树的根节点 root &#xff0c;返回 树中任意两不同节点值之间的最小差值 。 差值是一个正数&#xff0c;其数值等于两值之差的绝对值。 题解&#xff1a;使用中序遍历来实现 代码如下&#xff1a; public int getMinimumDifference(TreeNode root) {int pre …

利用Python提取将Excel/PDF文件数据

使用Python来创建一个接口&#xff0c;用于接收Excel文件资源链接&#xff0c;下载文件并执行指定的操作&#xff0c;然后返回处理后的数据。以下是一个基本的示例&#xff0c;展示如何使用Flask来创建这样的接口。请注意&#xff0c;这是一个简化的示例&#xff0c;您可能需要…

JVM第三讲:JVM 基础-字节码的增强技术详解

JVM 基础-字节码的增强技术详解 本文是JVM第三讲&#xff0c;JVM 基础-字节码的增强技术。在上文中&#xff0c;着重介绍了字节码的结构&#xff0c;这为我们了解字节码增强技术的实现打下了基础。字节码增强技术就是一类对现有字节码进行修改或者动态生成全新字节码文件的技术…

人大金仓分析型数据库COPY装载数据

目录 文件装载 STDIN装载 \copy装载数据 输入格式 错误隔离 优化性能 COPY FROM将文件或标准输入中的数据复制到表中&#xff0c;并将数据附加到表内容中。 COPY是非并行的&#xff1a;使用master实例在单个进程中加载数据。建议仅对非常小的数据文件使用COPY。主机上的后…