【微信小程序】初入微信小程序

news2025/1/15 20:34:51

大家好我依旧是山鱼🐟，对于初入小程序的同学来说本篇依旧是你的不二选择，它详细的介绍了小程序及小程序&开发者工具的使用，大家快快学起来吧！

目录

一，小程序简介

1.1 什么是微信小程序

1.2小程序与普通网页开发的区别

二，开发小程序前准备

2.1注册账号

2.2获取小程序ID

三，安装小程序开发工具

四，文件配置 

JSON 配置文件

app.json全局配置文件

页面的 .json 配置文件

project.config.json 文件

sitemap.json 文件

五，本地设置

e1455c9338fc42edb23133fb17faf125.jpeg

 一，小程序简介

1.1 什么是微信小程序

微信小程序是一种可以通过扫码或搜索即可进入使用的应用，减少了下载安装的环节，实现用户对于应用“触手可及、用完即走”的理想需求。在微信公众平台，小程序是与服务号、订阅号、企业微信并行的体系点开微信“发现-小程序”栏，你就能看到近期使用过的小程序；或者下拉微信聊天页面，你也能看到自己用过的小程序。如果你没有用过任何小程序，那么可以扫码进入小程序页面，或者点击好友分享的小程序卡片进入小程序。

3bc602378c7342c9b76605e83df78a11.png

 

1.2小程序与普通网页开发的区别

1. 运行环境不同
网页运行在浏览器环境中
小程序运行在微信环境中
2. API 不同
由于运行环境的不同，所以小程序中，无法调用 DOM 和 BOM 的 API。
但是，小程序中可以调用微信环境提供的各种 API，
例如：地理,定位,扫码支付
3. 开发模式不同
网页的开发模式：浏览器 + 代码编辑器
小程序有自己的一套标准开发模式：
①申请小程序开发账号②安装小程序开发者工具③创建和配置小程序项目

二，开发小程序前准备

2.1注册账号

1acb1e27f73b4f39a4c807e42b4f5236.png

点击注册填写信息

bb90e9feae904f2d9d862553da467b88.png

 点击激活

e030f6e684ae439ca7c9038622fda1dc.png

选择主体类型进行登记（一般个人开发就选择个人即可）

2.2获取小程序ID

对于我们开发者来说，在进行一个小程序项目的搭建开发时小程序ID时必不可少的，所以我们先要获取到ID在进行相应的开发

点击设置（我们的小程序主页面）

2cb19b2c976048d4ac6656c393ffd485.png

 点开之后我们会看到我们账号的相关信息，往下滑就能看到该ID

a05e4c8e7dc24f8f86dec4af8b35edb6.png

三，安装小程序开发工具

万事俱备只欠东风，小程序开发的前奏已经结束，接下来就是安装开发工具

去下载开发工具

也可以在小程序主页进行开发工具的获取

6179711357534ab7afd72aa9f0c61c95.png 9379d00829f4416ba9ec3ee36a53aa6a.png

下载完成后，进行傻瓜式安装即可 

为什么要使用小程序开发者工具：

①快速创建小程序项目

②代码的查看和编辑

③对小程序功能进行调试

④小程序的预览和发布

 创建完毕

d2746ede0cc447bda93800543f8a7ee8.png

 可分为三大部分（工具栏，即时浏览栏，开发专用栏）

d8b68db22bc046f68647c1656819af3c.png

 文件组成部分

1. pages 用来存放所有小程序的页面
2. utils 用来存放工具性质的模块
3. app.js 小程序项目的入口文件
4. app.json 小程序项目的全局配置文件
5. app.wxss 小程序项目的全局样式文件
6. project.config.json 项目的配置文件
7. sitemap.json 用来配置小程序及其页面是否允许被微信索引

一个基本的小程序组成页面包括这四部分

1. .js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）
2. .json 文件（当前页面的配置文件，配置窗口的外观、表现等）
3. .wxml 文件（页面的模板结构文件）
4. .wxss 文件（当前页面的样式表文件）

5c9599ab4e1d4310ba322661b4f4cf20.png

四，文件配置 

JSON 配置文件

JSON是一种数据格式，在实际开发中，JSON 总是以配置文件的形式出现。小程序项目中也不例外：通过不同的.json 配置文件，可以对小程序项目进行不同级别的配置。
小程序项目中有 4 种 json 配置文件，分别是：
1. 项目根目录中的 app.json 配置文件 2. 项目根目录中的 project.config.json 配置文件 3. 项目根目录中的 sitemap.json 配置文件 4. 每个页面文件夹中的 .json 配置文件

app.json全局配置文件

05e431cb359948d0a38f5d5db6aed822.png1. pages：用来记录当前小程序所有页面的路径
2. window：全局定义小程序所有页面的背景色、文字颜色等
3. style：全局定义小程序组件所使用的样式版本
4. sitemapLocation：用来指明 sitemap.json 的位置

页面的 .json 配置文件

小程序中的每一个页面，可以使用 .json 文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json 的 window 中相同的配置项。

project.config.json 文件

228d1dca4f9e46bd97d8ac0e89ac7d6a.png

 project.config.json 是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置，例如：
1. setting 中保存了编译相关的配置
2. projectname 中保存的是项目名称
3. appid 中保存的是小程序的账号 ID

sitemap.json 文件

微信现已开放小程序内搜索，效果类似于 PC 网页的 SEO。sitemap.json文件用来配置小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面将可能展示在搜索结果中。注：sitemap 的索引提示是默认开启的，如需要关闭 sitemap 的索引提示，可在小程序项目配置文件project.config.json 的 setting 中配置字段 checkSiteMap 为 false

五，本地设置

首先我们呢要打开详情页面的本地设置

6dafbb69540548dfa76255505f0817ed.png

 进行配置的勾选

a8cf623695bd47fa9d55bbc41367362a.png

 该设置会使我们的开发过程更加顺利

本文我们详细介绍了什么是微信小程序，为什么要使用微信小程序开发者工具，如何使用开发者工具，我们还了解了一个新项目里的文件配置，以及如何配置本地的开发者工具，初入WX小程序结束，再见！🚀嗖~~~

 

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

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

相关文章

前端实现一个名言生成器

前端实现一个名言生成器

The sand accumulates to form a pagoda✨ 写在前面✨ JS是什么？✨ 名言生成器✨ 页面搭建✨ 功能实现✨ 写在前面 在上周我们通过HTML、CSS实现了一个简单的‘我的相册‘页面的搭建，很多伙伴呢跟我说难道前端就只能做一些页面搭建的工作吗？…
阅读更多...
Vue3 京东到家项目实战第一篇（首页及登录功能开发） 进阶式掌握vue3完整知识体系

Vue3 京东到家项目实战第一篇（首页及登录功能开发） 进阶式掌握vue3完整知识体系

目录 项目首页开发 项目准备✌️ 样式开发👍 防抖👊 底部横条✌️ 登陆注册功能开发 样式编写 👐 路由守卫实现基础登录校验功能☝️ 使用 axios 发送登录 Mock 请求👈 请求函数的封装🙌 通过代码拆分增加逻…
阅读更多...
html基本标签

html基本标签

目录 1，标题标签h1-h6 2，段落标签p 3，换行标签br 4，水平线标签hr 5，图片标签img及路径详解(绝对/相对路径) 6，超文本链接标签a 7，超本文链接之锚点 8，div标签 9&#xff0c…
阅读更多...
JS-获取网页滑动距离，并实时监听

JS-获取网页滑动距离，并实时监听

介绍 本文主要介绍通过JS获取网页滑动距离，并实时监听的方法。分析document.body.scrollTop、document.documentElement.scrollTop、window.pageYOffset 三者之间的区别。 一、获取网页滑动距离 JS方法： console.log(网页被卷去的高：, doc…
阅读更多...
05-ES6语法：解构赋值

05-ES6语法：解构赋值

本文我们介绍ES6中解构赋值。ES6的解构赋值语法是一种JS表达式。解构赋值语法是一种JS表达式，通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。 下面我们具体来看看解构赋值是什么？以及是如何使用的？ …
阅读更多...
Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】

Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】

制作个人简历网页 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title><meta name"viewport"content"widthdevice-width,initial-scale1,minimum-scale1,maximum-scale1,u…
阅读更多...
移动端H5网页开发必备知识

移动端H5网页开发必备知识

简介 工欲善其事必先利其器&#xff0c;今天这篇文章主要讲解移动端H5开发必备的一些基础知识以及移动端适配和布局方案。如果已经看过这篇文章了或者已经掌握了移动端基础的话可以看笔者写的 移动端H5网页开发常见问题汇总 移动端开发必备知识-Hybrid App 像素 像素即一个…
阅读更多...
在Vue中获取DOM元素的实际宽高

在Vue中获取DOM元素的实际宽高

最近使用 D3.js 开发可视化图表&#xff0c;因为移动端做了 rem 适配&#xff0c;所以需要动态计算获取图表容器的宽高&#xff0c;其中涉及到一些原生DOM API的使用&#xff0c;避免遗忘这里总结一下。 一、获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素。 为了…
阅读更多...
【Vue】Vue 项目前端响应式布局及框架搭建

【Vue】Vue 项目前端响应式布局及框架搭建

文章目录Vue 项目前端响应式布局及框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景图2、设置标题文字3、页面主体部分&#xff08;1&#xff09…
阅读更多...
Request请求转发getRequestDispatcher

Request请求转发getRequestDispatcher

文章目录一、getRequestDispatcher理解二、RequestDispatcher.forward()方法与HttpServletResponse.sendRedirect()方法的区别三、实现步骤1.编写index.jsp登录页面2.编写跳转页面success.jsp页面3.编写LoginServlet.java类四、运行示例一、getRequestDispatcher理解 request.g…
阅读更多...
Vue项目使用百度地图api

Vue项目使用百度地图api

目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证 进入百度地图开放平台 官网&#xff0c;&#xff08;认证需要身份证号码&#xff0c;人脸识别&#xff0c;手机百度APP&#xff0c;邮箱地址&#xff09; 注册登录完成&#xff0c;…
阅读更多...
vue中devTools插件安装教程

vue中devTools插件安装教程

vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试&#xff0c;除了传统的浏览器自带的 debug 工具以外&#xff0c;我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 vue-devTools插件&#xff1a;点击下载 插件安装教程&#xff1a;https://chrome.zzzmh.cn…
阅读更多...
js深拷贝方法

js深拷贝方法

一、ES6中扩展运算符 ES6中的扩展运算符&#xff08;如果只是一层数组或者对象就是深拷贝&#xff0c;多层就是浅拷贝&#xff09; var obj {name : "海绵宝宝",age: 18,sayHello (){console.log("比奇堡早上好");}}var newObj {...obj}console.log(&q…
阅读更多...
Vue中的跨域解决方案

Vue中的跨域解决方案

前言 跨域是因为浏览器存在对不同源页面数据接收的限制。这种限制就是浏览器的同源策略。 同源策略是浏览器的安全机制&#xff0c;跨域的原理就是通过各种方式避开浏览器的安全机制 使用 在项目开发时&#xff0c;对跨域的概念仅限于了解&#xff0c;所以没有注重过程&#xf…
阅读更多...
Vue全新一代状态管理库 Pinia【一篇通】

Vue全新一代状态管理库 Pinia【一篇通】

文章目录前言1. Pinia 是什么&#xff1f;1.1 为什么取名叫 Pinia?1.2. 为什么要使用 Pinia ?2. 安装 Pinia2.1.创建 Store2.1.1. Option 类型 Store2.1.2 Setup 函数类型 Store2.1.3 模板中使用3. State 的使用事项&#xff08;Option Store &#xff09;3.1 读取 State3.2 …
阅读更多...
命令行 cnpm install 报错： Install fail Error: Unsupported URL Type: npm:vue-loader@^15.9.7

命令行 cnpm install 报错： Install fail Error: Unsupported URL Type: npm:vue-loader@^15.9.7

是不是在 进行 cnpm install 报了同款错误呢&#xff01; G:\Git\owl-read-admin>cnpm install Install fail! Error: Unsupported URL Type: npm:vue-loader^15.9.7 Error: Unsupported URL Type: npm:vue-loader^15.9.7at parseUrl (C:\Users\Lenovo\AppData\Roaming\np…
阅读更多...
@DateTimeFormat注解

@DateTimeFormat注解

DateTimeFormat注解 前言 前言在使用DateTimeFormat进行格式化注解时&#xff0c;总是不能匹配前端传入的。格式总是报错 我这里使用的是pattern进行解析的的但是前端是给我传入的ISO类型的导致不能匹配所以总是报错。后来我们进行查看源码得到了答案。 源码解析 看下源码解析…
阅读更多...
vue实现在线预览office文件

vue实现在线预览office文件

最近在做电子档案&#xff0c;后端提供了文件的华为云的oss链接。已经实现了点击下载文件的功能。但是呢&#xff0c;他们又希望常规的文件&#xff0c;可以直接点击预览&#xff0c;不需要下载。 按道理说&#xff0c;做文件的在线预览&#xff0c;买个第三方服务什么的&…
阅读更多...
前端工程师都在用的 VSCode 常用插件

前端工程师都在用的 VSCode 常用插件

文章目录前言一、VSCode常用的插件1.Chinese (Simplified) (必备)2.Auto Rename Tag3.One Dark Pro 颜色主题4.格式化代码&#xff08;vscode系统自带&#xff09;5.open in browser 浏览器预览页面6. Live Server 实时预览&#xff08;推荐&#xff09;7. vscode-icons 设置文…
阅读更多...
Vue用户管理（增删改查）功能详情

Vue用户管理（增删改查）功能详情

1、最终实现效果&#xff1a; Users.vue: <template><div><!--面包屑导航区域--><el-breadcrumb separator-class"el-icon-arrow-right"><el-breadcrumb-item :to"{ path: /home }">首页</el-breadcrumb-item><el…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023