程序员经验分享-hwhale

微信小程序基础

2023-05-16

文章目录

    • 一、微信小程序介绍
      • 1、为什么是微信⼩程序
      • 2、官⽅微信⼩程序体验
    • 二、微信小程序准备工作
      • 1、注册账号
      • 2、登录小程序
      • 3、获取APPID
      • 4、开发工具
    • 三、第⼀个微信⼩程序
      • 1、打开微信开发者⼯具
      • 2、新建⼩程序项⽬
      • 3、填写项⽬信息
      • 4、成功
      • 5、微信开发者⼯具介绍
    • 四、⼩程序结构⽬录
      • 1、⼩程序⽂件结构和传统web对⽐
      • 2、基本的项⽬⽬录

一、微信小程序介绍

微信⼩程序，简称⼩程序，英⽂名 Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现 了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤

1、为什么是微信⼩程序

  • 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
  • 推⼴app 或公众号的成本太⾼；
  • 开发适配成本低；
  • 容易⼩规模试错，然后快速迭代；
  • 跨平台。

2、官⽅微信⼩程序体验

⼩程序⽰例源码

在这里插入图片描述

二、微信小程序准备工作

1、注册账号

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

在微信公众平台官网首页（https://mp.weixin.qq.com/）点击右上角的“立即注册”按钮

这里需要营业执照来注册，这里我就不演示，如有需要请查看官网：注册小程序账号说明

2、登录小程序

完成注册后，在微信公众平台官网首页（https://mp.weixin.qq.com/）的登录入口直接登录。

在这里插入图片描述

3、获取APPID

如果企业已经加入你的微信号成为小程序的开发者，步骤如下：

绑定开发者：登录微信公众平台小程序，进入用户身份-开发者，新增绑定开发者。

  • 个人主体小程序最多可绑定5个开发者，10个体验者。
  • 未认证的组织类型小程序最多可绑定10个开发者，20个体验者
  • 已认证的小程序最多可绑定20个开发者，40个体验者。

公司开发微信小程序的管理员需要把你的微信号加入开发管理中，这样你用微信扫描就可以登录查看自己的AppID。

在这里插入图片描述

由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的 APPID ，所以在注册成功后， 可登录，然后获取APPID。

然后复制你的APPID，悄悄的保存起来，不要给别⼈看到。

在这里插入图片描述

如果单纯为了学习选择测试账号，步骤如下：

为方便开发者开发和体验小程序、小游戏的各种能力，开发者可以申请小程序或小游戏的测试号，并使用此帐号在开发者工具创建项目进行开发测试，以及真机预览体验。

（1）申请测试号

申请测试号的过程非常简单。只需访问 申请地址，并使用微信扫描二维码，即可获得为自己分配好的小程序和小游戏测试账号。

（2）登录测试号

申请成功后，进入 微信公众平台首页，扫描登录二维码，选择已有的小程序测试号或小游戏测试号登录即可。

（3）获取AppID

在这里插入图片描述

4、开发工具

为了帮助开发者简单和高效地开发和调试微信小程序，我们在原有的公众号网页调试工具的基础上，推出了全新的 微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

下载地址：根据自己电脑版本选择：

在这里插入图片描述

微信⼩程序⾃带开发者⼯具，集 开发 预览 调试 发布 于⼀⾝的 完整环境。 但是由于编码的体验不算好，因此 建议使⽤ vs code + 微信小程序编辑工具 来实现编码。vs code 负责敲代码， 微信编辑工具 负责预览。

三、第⼀个微信⼩程序

1、打开微信开发者⼯具

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

在这里插入图片描述

2、新建⼩程序项⽬

在这里插入图片描述

3、填写项⽬信息

在这里插入图片描述

4、成功

在这里插入图片描述

5、微信开发者⼯具介绍

详细的使⽤，可以查看官网

在这里插入图片描述

四、⼩程序结构⽬录

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP体验的服 务。⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻 辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

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

结构传统web微信⼩程序
结构HTMLWXML
样式CSSWXSS
逻辑JavascriptJavascript
配置无JSON

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

2、基本的项⽬⽬录

在这里插入图片描述

如果有收获！！！ 希望老铁们来个三连，点赞、收藏、转发。
创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序基础 的相关文章

  • JDK下载安装及环境变量配置（图片详解）

    一 下载并安装JDK 1 下载 搜索 jdk官方下载 或是直接进入Sun公司的官网 xff08 https www oracle com xff09 下面是JDK版本下载页面 xff1a https www oracle com java

  • 谷粒商城 - 项目环境搭建

    文章目录 1 安装 linux 虚拟机2 安装docker3 docker安装mysql4 docker安装redis5 开发环境统一1 Maven2 Idea amp VsCode 插件3 安装配置git 6 创建git仓库7 创建对应项

  • 《阿里云服务器搭建》------ 安装jdk

    1 首先查看我们linux服务器的操作系统 执行命令 xff1a cat proc version 备注这里是 xff08 x86 64 xff09 表示64位 2 登录Oracle官网 xff0c 下载JDK JDK官网下载 xff1a

  • IDEA连接mysql又报错！Server returns invalid timezone. Go to ‘Advanced‘ tab and set ‘serverTimezone‘

    错误界面 IDEA连接mysql xff0c 地址 xff0c 用户名 xff0c 密码 xff0c 数据库名 xff0c 全都配置好了 xff0c 点测试连接 xff0c 咔 xff01 不成功 xff01 界面是这样的 xff0c 翻译

  • 《阿里云服务器搭建》------ 安装maven

    一 下载压缩包 http maven apache org download cgi 或者百度网盘链接 xff1a https pan baidu com s 1A7bkSGomTrPLtYFq3t5WzQ 提取码 xff1a nro9 二

  • 《阿里云服务器搭建》------ 安装docker

    到docker官网找到对应环境的安装方式如 xff1a https docs docker com engine install centos 1 卸载掉旧版本 yum remove docker span class token punc

  • VM中安装Centos6.8详细步骤（图文）

    目录 1 检查BIOS虚拟化支持2 新建虚拟机3 新建虚拟机向导4 创建虚拟空白光盘5 安装Linux系统对应的CentOS版6 虚拟机命名和定位磁盘位置7 处理器配置 xff0c 看自己是否是双核 多核8 设置内存为2GB9 选择IO控制

  • Ubuntu18:使用CMake-gui编译OpenCV3源码的详细过程

    目录 一 卸载原来的opencv 二 准备工作 三 编译过程 四 测试过程 由于之前安装的OpenCV4与我的代码有多处不兼容 xff0c 所以要重新装一个OpenCV3 xff0c 顺便记录一下过程吧 OpenCV版本 xff1a ope

  • 基于音形码的中文字符串相似度算法(转)

    转自 https blog csdn net chndata article details 41114771 字符串相似度算法是指通过一定的方法 xff0c 来计算两个不同字符串之间的相似程度 通常会用一个百分比来衡量字符串之间的相似程度

  • VMware15中安装Centos7详细步骤（图文）

    文章目录 1 检查虚拟化是否开启2 新建虚拟机3 新建虚拟机向导4 创建虚拟空白光盘5 安装Linux系统对应的CentOS版6 虚拟机命名和定位磁盘位置7 处理器配置 xff0c 看自己是否是双核 多核8 设置内存为2GB9 选择IO控制

  • 设置CentOS7的网卡开机自启动

    1 可以试试这条命令 xff1a CentOS7的网卡开机启动应该是 xff1a systemctl enable network 2 若设置了始终还没有开机启动网络服务 xff0c 最好只好去改配置文件 vim etc sysconfig

  • 谷粒商城 - 架构图

    商城项目地址 xff1a 后端项目源码 xff1a https gitee com StarSea007 gulimall parent 前端项目源码 xff1a https gitee com StarSea007 gulimall vu

  • 牛客网经典120道Java面试常见题（试题+答案）

    牛客网提供了120道Java面试题 xff0c 这里整理出重点的内容 xff0c 而且对答案有疑惑 xff0c 补充了解释内容 xff0c 便于理解 1 什么是Java虚拟机 xff1f 为什么Java被称作是 平台无关的编程语言 xff1

  • Redis面试题（2021最新）

    文章目录 概述什么是RedisRedis有哪些优缺点为什么要用 Redis 为什么要用缓存 为什么要用 Redis 而不用 map guava 做缓存 Redis为什么这么快 数据类型Redis有哪些数据类型Redis的应用场景 持久化什么

  • Java基础知识面试题（2021最新）

    文章目录 1 Java概述什么是Javajdk1 5之后的三大版本JVM JRE和JDK的关系什么是跨平台性 xff1f 原理是什么 xff1f Java语言有哪些特点什么是字节码 xff1f 采用字节码的好处是什么 什么是Java程序的主

  • vagrant up下载centos7慢的解决办法

    安装完vagrant后 执行命令 vagrant init centos 7 进行初始化 会出现一个Vagrantfile文件 然后执行 vagrant up 命令下载centos 7会很慢 将红线里的地址复制到浏览器 xff0c 通过浏览

  • SpringCloud Alibaba 全部组件说明

    文章目录 一 微服务1 系统架构的演变1 xff09 单体应用架构2 xff09 垂直应用架构3 xff09 分布式架构4 xff09 SOA架构5 xff09 微服务架构 2 微服务架构常见的问题3 常见微服务架构 二 SpringClo

  • 前后端分离项目解决跨域问题

    1 跨域概念 跨域 xff1a 指的是浏览器不能执行其他网站的脚本 它是由浏览器的同源策略造成的 xff0c 是 浏览器对javascript施加的安全限制 同源策略 xff1a 是指协议 xff0c 域名 xff0c 端口都要相同 xff

  • ElasticSearch 入门检索的语法和实例【图文】

    文章目录 简介一 基本概念1 Index 索引 2 Type 类型 3 Document 文档 4 倒排索引 二 Docker安装 Es1 下载镜像文件2 创建实例 三 初步检索1 CAT2 索引一个文档 xff08 保存 xff09 3

  • 使用VSCode对libtorch有关的代码cmake时报错：fatal error: torch/script.h: No such file or directory

    最近在Ubuntu上做用libtorch部署深度学习网络的工作 使用IDE是VSCode xff0c 并用cmake进行编译 xff0c 在写demo过程中莫名地出现了如题所示的bug卡了两天 xff0c 今天突然发现问题所在T T xff

随机推荐

  • ConcurrentHashMap实现原理及源码分析

    ConcurrentHashMap是Java并发包中提供的一个线程安全且高效的HashMap实现 xff08 若对HashMap的实现原理还不甚了解 xff0c 可参考我的另一篇文章 HashMap实现原理及源码分析 xff09 xff0c

  • 如何保障mysql和redis之间的数据一致性？

    需求起因 在高并发的业务场景下 xff0c 数据库大多数情况都是用户并发访问最薄弱的环节 所以 xff0c 就需要使用redis做一个缓冲操作 xff0c 让请求先访问到redis xff0c 而不是直接访问MySQL等数据库 这个业务场景

  • SpringCloud（九）GateWay服务网关

    文章目录 1 概述简介1 官网2 是什么3 能干嘛4 微服务架构中网关在哪里5 有Zuul了怎么有出来gateway 2 三大核心概念3 Gateway工作流程4 入门配置1 新建Module2 POM文件3 YML4 主启动类5 9527

  • SpringSecurity框架介绍

    文章目录 1 概要2 历史3 同款产品对比1 Spring Security2 Shiro 4 模块划分 1 概要 Spring 是非常流行和成功的 Java 应用开发框架 xff0c Spring Security 正是 Spring 家

  • SpringSecurity入门案例

    文章目录 1 入门案例演示1 创建一个Springboot项目2 引入相关依赖3 编写Controller进行测试4 运行项目 2 权限管理中的相关概念1 主体2 认证3 授权 3 SpringSecurity 基本原理4 UserDeta

  • SpringSecurity Web 权限方案

    文章目录 1 设置登录系统的账号 密码2 实现数据库认证来完成用户登录1 准备sql2 添加依赖3 编写实体类4 整合 MybatisPlus 制作 mapper5 编写登录实现类6 测试访问 3 自定义设置登录页面 xff0c 不需要认证

  • SpringSecurity 微服务对权限的整合

    文章目录 1 微服务认证与授权实现思路2 权限管理数据模型3 项目结构和功能说明3 核心业务1 代码结构图说明2 创建认证授权相关的工具类 xff08 1 xff09 DefaultPasswordEncoder xff1a 密码处理工具类

  • Idea配置热部署

    一 概念 热部署就是正在运行状态的应用 xff0c 修改了他的源码之后 xff0c 在不重新启动的情况下能够自动把增量内容编译并部署到服务器上 xff0c 使得修改立即生效 热部署为了解决的问题有两个 xff0c 一是在开发的时候 xff0

  • Vue CLI（脚手架）

    文章目录 一 Vue CLI21 Vue CLI使用前提 xff0c 需要安装NodeJS和Webpack2 Vue CLI的使用3 Vue CLI2详解4 Runtime Compiler和Runtime only的区别5 使用 npm

  • vue-router 详解

    文章目录 1 认识vue router2 安装和使用vue router3 路由的默认路径4 HTML5的History模式5 router link属性介绍6 路由代码跳转7 动态路由8 路由懒加载9 嵌套路由实现10 传递参数的方式11

  • LibTorch对tensor的索引/切片/掩码操作：对比PyTorch

    目录 一 通过索引获取值 二 通过索引设置值 三 掩码操作 在PyTorch C 43 43 API xff08 libtorch xff09 中对张量进行索引的方式与Python API的方式很相似 诸如None integer bool

  • 小米商城项目（springboot+thymeleaf）

    starsea mall 项目是一套电商系统 xff0c 包括 starsea mall 商城前台系统及商城后台系统 xff0c 基于 Spring Boot 2 X 及相关技术栈开发 前台商城系统包含首页登录 商品分类 新品上线 首页轮播

  • Idea解决SVN的代码冲突

    解决冲突 当B用户代码提交发生冲突后 xff0c 可以再次选择更新 xff1a 选择OK xff1a 弹窗如下 xff1a 如果选择Merge xff0c 则弹出版本差异的窗口 xff0c 让用户自行查看差异后再选择以哪个版本的修改为准 x

  • Axiso解决跨域访问

    首先请检查下你的 Vue 版本 xff0c Vue2 和 Vue3 跨域方式不同 xff1a vue V 2 X or 3 X 一 Vue2 版本 这里以访问 Ve2x 的一个公告API为例 xff0c 直接访问如下 xff1a span

  • SpringBoot集成Spring Security（1）——入门程序

    本篇文章环境 xff1a SpringBoot 2 0 43 Mybatis 43 Spring Security 5 0 注意 xff1a SpringSecurity 5 0 43 版本变动较多 xff0c 且不兼容之前版本 xff0c

  • Windows下MongoDB 3.x 的安装及配置

    一 登录Mongodb官网 https www mongodb com try download community 下载安装包 二 安装MongoDB 安装比较简单 xff0c 类似于QQ xff0c 微信等软件 xff0c 中间主要是选

  • 如何获取 OSS AccessKeyId、AccessKeySecret

    开通阿里云oss xff1a https www aliyun com 1 点击概览 AccessKey oss控制台官网链接 xff1a https oss console aliyun com overview 2 出现下图 xff0c

  • vscode怎么使用git

    1 clone代码库 在vscode中输入快捷键 Ctrl 43 Shift 43 P 打开vscode的命令框 xff0c 在框中输入 git clone 并回车 xff0c 然后在文本框中输入git代码库的地址 2 修改clone下来的

  • Json与Java对象相互转化

    出现问题的原因 xff1a 在做项目中 xff0c 我们使用Hutool工具的Http请求调用远程服务器的接口 xff0c 返回Json字符串 xff0c 现在要把Json字符串转化为对象进行存储 xff0c 传给前端vue 访问远程返回的

  • 微信小程序基础

    文章目录 一 微信小程序介绍1 为什么是微信 程序2 官 微信 程序体验 二 微信小程序准备工作1 注册账号2 登录小程序3 获取APPID4 开发工具 三 第 个微信 程序1 打开微信开发者 具2 新建 程序项 3 填写项 信息4 成功5

热门标签