程序员经验分享-hwhale

微信小程序超详细入门简介和使用

2023-10-30

微信小程序

介绍: 微信小程序,简称小程序,英文名Mini Program, 是一种不需要下载安装即可使用的应用,它实现了应用"触手可及的梦想",用户扫一扫或搜一下即可打开应用

 

微信小程序做项目的必备基础

  • 小程序的前世今生
  • 小程序开发者工具
  • 小程序原生框架
  • 小程序模板语法
  • 小程序内置组件
  • 小程序生命周期
  • 小程序自定义组件

 

我们为什么要学习微信小程序

  1. 微信有海量的用户, 而且粘性很高, 在微信里开发产品更容易触达用户;
  2. 从零开始推广app或者公众号的成本太高
  3. 因为微信小程序帮你做好了很多的跨平台操作,所以它的开发适配成本低
  4. 容易规模试错, 然后快速迭代,优化
  5. 微信小程序帮你做好了跨平台操作
     

其他的小程序

  1. 支付宝小程序
  2. 百度小程序
  3. QQ小程序
  4. 今日头条 + 抖音小程序

 

微信小程序的环境准备

开发微信小程序之前, 必须要准备好相应的环境

1.1 注册账号

注意: 建议使用全新的邮箱, 没有注册过的其他小程序或者公众号的.

点击此处进行小程序注册点击注册

在这里插入图片描述

注意: 填写邮箱时, 最好选一个和微信没有任何关联的新邮箱

然后跳到这个页面后, 根据页面上的提示来填写,注册
 

1.2 获取AppID(小程序ID)

为什么要获取这个AppID(小程序ID)?

因为由于后期调用微信小程序的接口功能, 需要索取开发者的小程序中的 AppID ,所以在注册成功后, 登录, 然后获取 AppID

注册完后进行登录, 你就会进入首页, 向下拉, 点击设置, 再向下拉就会看到你的 AppID(小程序ID)

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

 

1.3 微信小程序的开发工具

下载地址, 进入页面后根据个人的系统, 来安装对应的工具

注意: 安装微信小程序的开发工具时最好选择安装在D盘

在这里插入图片描述

我的是 Windows 64 系统, 所以我就安装这个系统对应的工具

然后双击你刚刚下载的应用, 一直下一步就好了, 安装完后你就会在桌面上看见一个名称为 微信开发者工具 的图标, 出现这个图标就说明你安装成功了

在这里插入图片描述

微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀⾝的 完整环境。

但是由于编码的体验不算好，因此 建议使⽤ vs code + 微信小程序编辑工具来实现编码

vs code 负责敲代码， 微信编辑工具 负责预览
 

微信小程序初体验

1.1 打开微信开发者工具

注意: 第⼀次登录的时候 需要扫码登录

在这里插入图片描述

1.2 新建小程序项目

在这里插入图片描述

1.3 填写我们的项目信息

在这里插入图片描述

项目名称:顾名思义是你整个项目的名称

目录:你的项目要放在电脑的那个地方

AppID:上面拿到的你的AppID, AppID是在你产品上线的时候要用的, 在这里暂时不需要, 最后的时候可以在加上, 这里我们点击测试号, 暂时用测试号来开发

开发者模式:你要开发什么东西, 是小程序还是其他的东西

后端服务:云服务就是微信小程序给你提供的更加高级的服务

语言:你要用什么语言开开发你的项目

点击测试号后的页面:

在这里插入图片描述

注意: 使用测试号时, 不支持云开发, 因此默认为不使用云开发

1.4 成功后进入的页面

在这里插入图片描述

 

微信开发者⼯具介绍

这里我们简单的介绍一下微信开发者⼯具, 详细信息请移步官网

在这里插入图片描述

 

⼩程序⽬录结构

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验服务

⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS , 以及 JavaScript ,并在视图层与逻 辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

1.1 ⼩程序⽂件结构和传统web对⽐

结构 传统web 微信⼩程序
结构 HTML WXML
样式 CSS WXSS
逻辑 Javascript Javascript
配置 ⽆ JSON

通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序 是四层结构，多了⼀层 配置.json

1.2 基本的项⽬⽬录

在这里插入图片描述

 

注意

  1. 注册账号时, 建议使用全新的邮箱, 没有注册过的其他小程序或者公众号的.
  2. 安装微信小程序的开发工具时最好选择安装在D盘
  3. 第⼀次打开微信开发者工具, 登录的时候 需要扫码登录
  4. 使用测试号时, 不支持云开发, 因此默认为不使用云开发

 

总结

本篇文章主要详解了微信小程序的介绍, 注册小程序账号, 微信开发者⼯具的安装和简介

如有任何疑问, 请上官方的网站进行查询, 官方的网站有最详细的教程, 也可以询问度娘

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序

javascript

微信游戏

前端

js

微信小程序超详细入门简介和使用 的相关文章

  • 在 React 组件中动态创建元素

    我创建了一个辅助函数 当我单击按钮时 它可以在组件中动态创建元素 但是它没有显示我尝试附加到父 div 的 html 的一半 它正确地将标签添加为 html 但其余部分只是纯文本 谁能明白为什么吗 用于动态创建内容的函数 function

  • { ...obj1, obj2 } 到底做什么[重复]

    这个问题在这里已经有答案了 假设我们有两个对象 const state fishes some obj data animals some obj data const animals some NEW data 在Vuex中有一个方法re

  • 如何使用react-native-router-flux在模态中进行导航

    我需要在我的反应本机应用程序中的模式中进行导航 使用新版本的react native router flux 似乎不可能做到这一点 我可以创建一个垂直动画来显示下一个场景 这与场景顶部的模态不同

  • 将全局样式表与故事书和角度结合使用 - SassError：SassError：预期“{”

    几天来 我一直在尝试将全局样式表集成到故事书中 我已经从 sass 支持文档中集成了 webpackFinal 配置 在 storybook 目录中 我创建了一个 scss loader scss 文件 该文件应该加载全局样式表 在 pre

  • Javascript dispatchEvent click 在 IE9 和 IE10 中不起作用

    我正在尝试在 ExtJs 中构建应用程序时模拟鼠标事件 例如单击 鼠标悬停等 我使用下面的代码来模拟点击 function triggerEvent element eventName if document createEvent var

  • JavaScript 事件循环：队列、消息队列、事件队列

    阅读了大量 JavaScript 事件循环教程 我看到了不同的术语来标识当调用堆栈为空时准备由事件循环获取的队列存储消息 Queue 消息队列 事件队列 我找不到规范术语来识别这一点 甚至 MDN 似乎也对此感到困惑事件循环页面 https

  • 添加/更改 URL 参数并重定向到新 URL

    If the view allURL 中不存在参数 我需要将其与值一起添加到 URL 的末尾 如果它确实存在 那么我需要能够仅更改该值而不创建新的 URL 因为它之前可能有也可能没有其他参数 我找到了这个功能 但我无法让它工作 https

  • JavaScript switch 语句是线性的还是恒定时间的？

    我的网站上有以下 JavaScript 以便在执行某些特定搜索时 答案会被硬编码到特定页面 function redirect var input document getElementById searchBox value toLowe

  • Javascript 搜索并替换包含方括号的字符序列

    我正在尝试在字符串 Nationality EN ESP 中搜索 EN 我想从字符串中删除它 所以我使用替换方法 代码示例如下 var str Nationality EN ESP var find EN var regex new Reg

  • 如何通过 Web-Workers 传递自定义类实例？

    由于 Web Worker JSON 在线程之间序列化数据 因此这样的方法不起作用 worker js function Animal Animal prototype foobar function self onmessage func

  • 从 Web 浏览器控件读取 Javascript 变量

    我正在尝试读取从表单上的 WebBrowser 控件加载和调用的 Javascript 变量的值 Example index html 引用名为 test js 的 javascript 在 test js 上 创建并填充了几个变量 然后i

  • Svg 点击事件无法正常工作

    我试图让我的 SVG 看起来像一个 饼形 看起来一切都很好 此外 我希望它们每个都有不同的点击事件 function one alert 1 function two alert 2 function three alert 3 funct

  • 用角度js中的字母过滤列表

    我在表格中显示了一个列表 我需要使用名称的第一个字母来过滤结果 在列表上方我有一个字母 A B C D 等等 单击后 字母列表将按名字过滤 例如 列表详细信息是Apple Boy Bridge点击后A Apple将显示 我必须过滤国家名称以

  • 如何根据父网格的标题复选框选择/取消选择所有子复选框

    我正在开发一个 Web 应用程序 其中包含嵌套在另一个数据网格中的数据网格 在父网格中 我在标题模板中有一个复选框 在子网格中的项目模板中有另一个复选框 功能是 1 如果我单击父复选框 则应检查子网格中的所有项目 反之亦然 2 我的子网格中

  • Google Calendar API：获取指定日期的空闲时段列表

    我需要获取我的谷歌日历中的免费时段列表 现在我只是获取事件列表 我在用谷歌日历 https www npmjs com package google calendar npm google calendar events list calO

  • jquery ui 自动完成添加跨度

    我在 div 上使用 jQuery 自动完成 但我得到了 jquery 自动添加的额外范围 span class ui helper hidden accessible search test span 如何防止创建此跨度 我通过添加 CS

  • JSON 数据的动态表单（不同类型）

    我尝试使用 JSON 中的数据在 AngularJS 中创建动态表单 我有这个工作 HTML p p

  • 理解“窗口”对象[重复]

    这个问题在这里已经有答案了 可能的重复 JS 窗口全局对象 https stackoverflow com questions 10035771 js window global object 如何window对象工作 我知道它是顶级对象并

  • Google Maps JavaScript API v3 方向功能

    我使用 Google Maps js API v3 我可以根据路径点显示方向this http code google com intl hu apis maps documentation directions Waypoints 我想要

  • 未终止的字符串文字

    我有一个 php 脚本 可以在我的服务器上上传 mp3 文件 我使用 上传 有一个事件 onSelect 文档 http www uploadify com documentation events onselect 当文件上传时调用 使用

随机推荐

  • 如何编辑简单打字游戏

    先来简单看一下要求 一 我们可以先编写Player类 先把属性定义好 然后进行封装 public class Player private String name 定义姓名 private int lvlNo 1 定义级别编号为1 priv

  • 华为OD机试真题- 去除多余空格【2023Q1】【JAVA、Python、C++】

    题目描述 去除文本多余空格 但不去除配对单引号之间的多余空格 给出关键词的起始和结束下标 去除多余空格后刷新关键词的起始和结束下标 条件约束 1 不考虑关键词起始和结束位置为空格的场景 2 单词的的开始和结束下标保证涵盖一个完整的单词 即一

  • priority_queue 优先队列概念以及常见用法

    目录 1 priority queue简单介绍 2 priority queue代码测试 1 priority queue简单介绍 在优先队列中 元素被赋予优先级 按约定的函数来赋予优先级 底层通过堆来实现 当访问元素时 具有最高优先级的元

  • Pandas小白入门散记(3)---Series.str--源代码定位问题

    文章目录 问题点 原因解释 碰到了 一个错误 debug才定位到问题 记录一下 本次最大收获是 pandas果然代码逻辑复杂 一个小小的异常捕捉 处处是门道 希望本次浅显的代码阅读过程 给你有小小的启发 愿您多读复杂代码 提升自我 问题点

  • Targan 算法[有向图强连通分量]

    有向图强连通分量 在有向图G中 如果两个顶点间至少存在一条路径 称两个顶点强连通 stronglyconnected 如果有向图G的每两个顶点都强连通 称G是一个强连通图 非强连通图有向图的极大强连通子图 称为强连通分量 strongly

  • 标题hadoop源码编译报错

    标题hadoop源码编译报错 最近在学习hadoop的过程中 遇到了许多问题在这里记录下 没想到在源码编译的时候就卡了好久 现在简单说下我的问题 这是我编译hadoop所安装的jar包 网上的教程一搜一大堆 我也是按照文档一步步进行的 没想

  • 机器学习之决策树（实战）

    决策树 什么是决策树 信息增益 熵 基尼指数 熵 基尼指数 CART 算法模型实战 分类树 树的可视化 回归树 总结 什么是决策树 决策树是一种树形结构 其中每个内部节点表示一个属性上的判断 每个分支代表一个判断结果的输出 最后每个叶节点代

  • jpa limit查询_spring data jpa 分页查询

    法一 本地sql查询 注意表名啥的都用数据库中的名称 适用于特定数据库的查询 public interface UserRepository extends JpaRepository Query value SELECT FROM USE

  • 带圈圈的数字1~50，求50以上，不要word的

    带圈圈的数字1 50 求50以上 不要word的 posted on 2018 04 25 16 07 jony413 阅读 评论 编辑 收藏 转载于 https www cnblogs com jony413 p 8945365 html

  • 微信小程序悬浮框实现

    最近在公司负责微信小程序 小程序相比html JavaScript更加简单 很多接口直接就给了 所以我们直接利用就好了 下面说正题 微信小程序悬浮框实现 效果图如下 做了一个随时拨打客服电话的悬浮框 1 第一种 目录结构如下 index j

  • 关于golang性能调试及pprof可视化

    golang支持使用pprof进行可视化性能检测 打开powershell 在需要性能可视化的文件夹下输入 go test bench cpuprofile cpu out 得到一个 out文件 接着输入 go tool pprof cpu

  • 计算机网络知识点汇总（考研用）——第一章：计算机网络体系结构

    计算机网络知识点汇总 考研用 第一章 计算机网络体系结构 本文参考于 2021年计算机网络考研复习指导 王道考研 计算机网络 思维导图 文章目录 计算机网络知识点汇总 考研用 第一章 计算机网络体系结构 1 计算机网络体系结构 1 1 计算

  • 145句经典诗句

    1 知我者 谓我心忧 不知我者 谓我何求 诗经 王风 黍离 释义 了解我心情的人 认为我心中惆怅 不了解我心情的 还以为我呆在这儿有什么要求呢 2 人而无仪 不死何为 诗经风相鼠 释义 人活着如果不重视礼仪 那么就如同死人 3 言者无罪 闻

  • 关于工牌（必须5-10个字）

    今天蹲坑 低头看了下工牌觉得挺有意思 我从啥时候起也不排斥将工牌挂在脖子上了 工牌 一个标识 不仅标识了你 也标识了你所在的群体 如果你认可这个群体 佩戴它那是一种荣誉 荣耀 如果你不认可这个群体 佩戴它就是耻辱 羞辱 尤其挂到脖子上 那不

  • 使用机器学习算法预测航班价格

    一 前言 机票价格的预测一直是航空业和旅行者关注的重要问题之一 随着航空业的快速发展和市场竞争的加剧 正确预测机票价格对于航空公司的利润最大化和旅行者的预算规划至关重要 在过去 人们通常依靠经验和市场趋势来预测机票价格 但这种方法往往存在不

  • Qt宏定义

    1 QT BEGIN NAMESPACE 在qglobal h中 我们可以看到以下两句胡宏定义 define QT BEGIN NAMESPACE namespace QT NAMESPACE define QT END NAMESPACE

  • Java中有关锁的面试题

    sychronized修饰普通方法和静态方法的区别 什么是可见性 对象锁是用于对象实例方法 或者一个对象实例上的 类锁是用于类的静态方法或者一个类的class对象上的 类的对象实例可以有很多个 但是每个类只有一个class对象 所以不同对象

  • 静态成员（static）

    今天整理了一下关于静态的一些知识点 可能有些没有整理到 或者理解有纰漏 大家不妨看看 不足之处 恳请大家斧正 在静态类中 静态类中不能调用非静态类的实例成员 静态类中不能有非静态构造函数 但是可以有静态构造函数 静态构造函数也可以存在于非静

  • D361周赛复盘：模拟分割整数⭐+变为整除的最小次数⭐

    文章目录 2843 统计对称整数的数目 模拟 分割整数为两部分 思路 1 整数换成字符串版本 2 直接用整数的版本 2844 生成特殊数字的最小操作 模拟 x能被Num整除的条件 思路 完整版 2843 统计对称整数的数目 模拟 分割整数为

  • 微信小程序超详细入门简介和使用

    微信小程序 介绍 微信小程序 简称小程序 英文名Mini Program 是一种不需要下载安装即可使用的应用 它实现了应用 触手可及的梦想 用户扫一扫或搜一下即可打开应用 微信小程序做项目的必备基础 小程序的前世今生 小程序开发者工具 小程

热门标签