微信小程序（起步）

news2024/9/27 7:24:01

微信小程序

  • 1、微信小程序--起步
    • 1.1 小程序简介
    • 1.2 小程序构成
    • 1.3 小程序的宿主环境
    • 1.4 协同工作和发布

1、微信小程序–起步

1.1 小程序简介

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

  1. 运行环境不同
    • 网页运行在浏览器中，小程序运行在微信环境中
  2. API不同
    • 小程序无法调用DOM和BOM的API，但是小程序中可以调用微信环境提供的各种APl
  3. 开发模式不同
    • 网页的开发模式:浏览器＋代码编辑器
    • 小程序有自己的一套标准开发模式:
      • 申请小程序开发账号
      • 安装小程序开发者工具
      • 创建和配置小程序项目

体验小程序

在这里插入图片描述

注册小程序开发账号

  1. 打开网站： https://mp.weixin.qq.com/ ，点击 立即注册
  2. 选择注册账号的类型为 小程序
  3. 填写账号信息
  4. 提示邮箱激活
  5. 点击链接激活账号
  6. 选择主体类型 个人，并完成主体信息登记
  7. 获取小程序的AppID，点击 开发管理 - 开发设置 - 获取开发者ID

安装开发者工具

  • 微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下:
    • 快速创建小程序项目
    • 代码的查看和编辑
    • 对小程序功能进行调试
    • 小程序的预览和发布
  • 步骤：
  1. 打开网站 微信官方文档–下载 下载即可
  2. 下载好后安装
  3. 手机微信扫码登录
  4. 设置外观和代理(不使用代理)

创建小程序项目

  1. 点击“加号”按钮
  2. 填写项目信息

在这里插入图片描述

  1. 项目创建完成
  2. 在模拟器上查看项目效果

在这里插入图片描述

在这里插入图片描述

1.2 小程序构成

基本组成结构

在这里插入图片描述

  • pages用来存放所有小程序的页面

    • .js文件(页面的脚本文件，存放页面的数据、事件处理函数等)
    • .json文件(当前页面的配置文件，配置窗口的外观、表现等)，会覆盖其他配置项
    • .wxml文件(页面的模板结构文件)
    • .wxss文件(当前页面的样式表文件)

  • utils用来存放工具性质的模块（例如:格式化时间的自定义模块)

  • app.js小程序项目的入口文件

  • app.json小程序项目的全局配置文件，包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab等

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

  • app.wxss小程序项目的全局样式文件

  • projectconfig.json项目的配置文件

    • setting中保存了编译相关的配置
    • projectname中保存的是项目名称
    • appid中保存的是小程序的账号ID

  • sitemap.json用来配置小程序及其页面是否允许被微信索引(类似网页的SEO)

  • 只需要在 app.json -> pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件

  • 只需要调整app.json -> pages数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染

WXML模板

  • WXML (Weixin Markup Language)是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页开发中的 HTML

  • WXSS和HTML的区别：

  • 标签名称不同

  • HTML (div,span, img, a)

  • WXML (view, text, image, navigator)

  • 属性节点不同

    • < a href=“#”>超链接< /a>
    • < navigator url=“/pages/home/home” > < /navigator>

  • 提供了类似于Vue中的模板语法

    • 数据绑定
    • 列表渲染
    • 条件渲染

WXSS样式

  • WXSS (WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式，类似于网页开发中的CSS
  • WXSS和CSS的区别：
  • 新增了rpx尺寸单位
    • CSS中需要手动进行像素单位换算，例如rem
    • WXSS 在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算
  • 提供了全局的样式和局部样式
    • 项目根目录中的app.wxss会作用于所有小程序页面
    • 局部页面的.wxss样式仅对当前页面生效
  • WSSS仅支持部分CSS选择器
    • .class 和#id
    • element
    • 并集选择器、后代选择器
    • after和:before 等伪类选择器

JS逻辑交互

  • 通过.js文件来处理用户的操作

  • 小程序中的JS文件分为三大类，分别是:

  1. app.js
    • 是整个小程序项目的入口文件，通过调用App()函数来启动整个小程序
  2. 页面的.js文件
    • 是页面的入口文件,通过调用Page()函数来创建并运行页面
  3. 普通的.js 文件
    • 是普通的功能模块文件,用来封装公共的函教或属性供页面使用

1.3 小程序的宿主环境

宿主环境简介

  • 宿主环境(host environment)指的是程序运行所必须的依赖环境，如Android和iOS是两个不同的宿主环境
  • 手机微信是小程序的宿主环境
  • 小程序宿主环境包含的内容：
    • 通信模型
    • 运行机制
    • 组件
    • API

通信模型

  • 小程序中通信的主体是渲染层和逻辑层，其中:
    • WXML模板和WXSS 样式工作在渲染层
    • JS脚本工作在逻辑层
    • 渲染层和逻辑层之间的通信 – 由微信客户端进行转发
    • 逻辑层和第三方服务器之间的通信 – 由微信客户端进行转发

在这里插入图片描述

运行机制

  • 小程序启动过程：
  1. 把小程序的代码包下裁到本地
  2. 解析 app.json全局配置文件
  3. 执行 app.js小程序入口文件，调用App()创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成
  • 页面渲染的过程：
  1. 加载解析页面的.json配置文件
  2. 加载页面的.wxml模板和.wxss样式
  3. 执行页面的.js文件，调用Page()创建页面实例
  4. 页面渲染完成

组件

  • 组件分类：

  1. 视图容器

    • view
      • 普通视图区域
      • 类似于HTML中的div，是一个块级元素
      • 常用来实现页面的布局效果
    • scroll-view
      • 可滚动的视图区域
      • 常用来实现滚动列表效果
    • swiper和 swiper-item
      • 轮播囤容器组件和轮播图item组件
    属性类型默认值说明
    indicator-dotsbooleanfalse是否显示面板指示点
    indicator-colorcolorrgba(0, 0, 0, .3)指示点颜色
    indicator-active-colorcolor#000000当前选中的指示点颜色
    autoplaybooleanfalse是否自动切换
    intervalnumber5000自动切换时间间隔
    circularbooleanfalse是否采用衔接滑动

  2. 基础内容

    • text
      • 文本组件
      • 类似于HTML中的span标签，是一个行内元素
    • rich-text
      • 富文本组件
      • 支持把HTML字符串渲染为WXML结构
    • button
      • 按钮组件
      • 功能比 HTML中的button按钮丰富
      • 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等)
    • image
      • 图片组件
      • image 组件默认宽度约300px、高度约240px
    mode 值说明
    scaleToFill（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
    aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
    aspectFill缩放模式，**保持纵横比缩放图片，只保证图片的短边能完全显示出来。**也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
    widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
    heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
    • navigator
      • 页面导航组件
      • 类似于HTML中的a链接

  3. 表单组件

  4. 导航组件

  5. 媒体组件

  6. map 地图组件

  7. canvas画布组件

  8. 开放能力

  9. 无障碍访问

API

  • 事件监听API
    • 特点:以on开头，用来监听某些事件的触发
    • 举例:wx.onWindowResize(function callback)监听窗口尺寸变化的事件
  • 同步API
    • 特点1:以 Sync结尾的API都是同步API
    • 特点2:同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
    • 举例: wx.setStorageSync("key’ , ‘value’)向本地存储中写入内容
  • 异步API
    • 特点:类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
    • 举例: wx.request()发起网络数据请求，通过success回调函数接收数据

1.4 协同工作和发布

协同工作

  • 出于管理需要，我们需要对不同岗位、不同角色的员工的权限进行边界的划分，使他们能够高效的进行协同工作

在这里插入图片描述

在这里插入图片描述

  • 小程序成员管理体现在管理员对小程序项目成员及体验成员的管理:

    • 项目成员:
      • 表示参与小程序开发、运营的成员可登录小程序管理后台
      • 管理员可以添加、删除项目成员，并设置项目成员的角色
    • 体验成员:
      • 表示参与小程序内测体验的成员
      • 可使用体验版小程序，但不属于项目成员管理员及项目成员均可添加、删除体验成员

  • 不同项目成员对应的权限：

权限运营者开发者数据分析者
开发者权限√
体验者权限√√√
登录√√√
数据分析√
微信支付√
推广√
开发管理√
开发设置√
暂停服务√
解除关联公众号√
腾讯云管理√
小程序插件√
游戏运营管理√
  • 可以在 微信公众平台-小程序，成员管理中添加项目成员和体验成员

小程序版本

版本阶段说明
开发版本使用开发者工具，可将代码上传到开发版本中。 开发版本只保留每人最新的一份上传的代码。 点击提交审核，可将代码提交审核。开发版本可删除，不影响线上版本和审核中版本的代码。
体验版本可以选择某个开发版本作为体验版，并且选取一份体验版。
审核版本只能有一份代码处于审核中。有审核结果后可以发布到线上，也可直接重新提交审核，覆盖原审核版本。
线上版本线上所有用户使用的代码版本，该版本代码在新版本代码发布后被覆盖更新。

发布上线

  • 步骤：
  1. 上传代码：点击开发者工具的 上传 按钮，填写版本号及备注(查看版本：登录小程序管理后台 – 管理 – 版本管理 )

在这里插入图片描述

  1. 提交审核：小程序管理后台版本管理处点击 提交审核 即可

  2. 发布：审核通过后会收到通知，在审核列表处点击 发布 即可

  • 获取小程序码 ：登录小程序管理后台 -> 设置 -> 基本设置 -> 基本信息 -> 小程序码及线下物料下载

运营数据

  • 在“小程序后台”查看

    1. 登录小程序管理后台
    2. 点击侧边栏的“统计"
    3. 点击相应的tab可以看到相关的数据

  • 使用“小程序数据助手”查看

    1. 打开微信
    2. 搜索“小程序数据助手”
    3. 查看已发布的小程序相关的数据

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

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

相关文章

【unity3d】1 界面 贴图 渲染 相机

【unity3d】1 界面 贴图 渲染 相机

一 学习背景 暴雪国服停运后&#xff0c;没有星际玩要死力 玩了一段时间[原神]感觉这个世界观和机制设定有点牛笔&#xff0c;米哈游怎么不像[魔兽世界-魔兽争霸]的关系那样&#xff0c;做个[原神争霸]捏&#xff0c;不如自己做一个耍耍 二 unity3d安装 1 官网&#xff0c;直…
阅读更多...
Kotlin DSL 实战

Kotlin DSL 实战

1. 前言Kotlin 是一门对 DSL 友好的语言&#xff0c;它的许多语法特性有助于 DSL 的打造&#xff0c;提升特定场景下代码的可读性和安全性。本文将带你了解 Kotlin DSL 的一般实现步骤&#xff0c;以及如何通过 DslMarker &#xff0c; Context Receivers 等特性提升 DSL 的易用…
阅读更多...
GORM-GEN快速上手

GORM-GEN快速上手

目录 1.什么是 GEN 2.GEN特性 3.快速使用GEN 3.1. 下载 3.2. 生成 4. 基础查询 5. 自定义 SQL 查询 6.demo源码 1.什么是 GEN 官方文档&#xff1a;Gen Guides | GORM - The fantastic ORM library for Golang, aims to be developer friendly. GEN 项目地址&#xf…
阅读更多...
「mysql是怎样运行的」第19章 从猫爷被杀说起---事务简介

「mysql是怎样运行的」第19章 从猫爷被杀说起---事务简介

「mysql是怎样运行的」第19章 从猫爷被杀说起—事务简介 文章目录「mysql是怎样运行的」第19章 从猫爷被杀说起---事务简介[toc]一、事务的起源概述原子性(Atomicity)隔离性(Isolation)一致性(Consistency)持久性(Durability)二、事务的概念一、事务的起源 概述 对于大部分程…
阅读更多...
android UI优化的基本原理和实战方法

android UI优化的基本原理和实战方法

任何Android应用都需要UI跟用户交互.UI是否好坏更是直接影响到用户的体验.如今UI的优化视乎是应用开发中一个绕不过去的话题。所以本篇文章小编带大家全面了解Android ui优化的主要知识和优化方法。 一、UI优化 UI优化知识点主要分为三部分&#xff1a; 第一部分&#xff0c…
阅读更多...
Linux简单介绍(基本涵盖日常使用到的各种shell知识点)

Linux简单介绍(基本涵盖日常使用到的各种shell知识点)

文章目录shell基础认知1. shell语言2. 脚本执行方式3. 快捷键4. 通配符5. 命令后跟的选项6. 逻辑运算 && ||7. 算术运算&#xff08;equal&#xff0c;great&#xff0c;less&#xff09;8. 目录或文件意义9. 规则10. vimshell脚本常规内容解释1. set -ex2. set -o pip…
阅读更多...
Google Brain新提出的优化器“Lion”，效果要比Adam(W)更好

Google Brain新提出的优化器“Lion”，效果要比Adam(W)更好

Google Brain新提出的优化器“Lion”&#xff0c;效果要比Adam(W)更好 论文地址&#xff1a;https://arxiv.org/abs/2302.06675代码地址&#xff1a;https://github.com/google/automl/blob/master/lion/lion_pytorch.py 1 简单、内存高效、运行速度更快 与 AdamW 和各种自适…
阅读更多...
量子计算对网络安全的影响

量子计算对网络安全的影响

量子计算的快速发展&#xff0c;例如 IBM 的 Quantum Condor 处理器具有 1000 个量子比特的容量&#xff0c;促使专家们宣称第四次工业革命即将实现“量子飞跃”。 量子计算机的指数处理能力已经受到政府和企业的欢迎。 由于从学术和物理原理到商业可用解决方案的不断转变&am…
阅读更多...
Spark Explain：查看执行计划

Spark Explain：查看执行计划

Spark SQL explain 方法有 simple、extended、codegen、cost、formatted 参数&#xff0c;具体如下 目录一、基本语法二、执行计划处理流程三、具体案例一、基本语法 从 3.0 开始&#xff0c;explain 方法有一个新的 mode 参数&#xff0c;指定执行计划展示格式 只展示物理执…
阅读更多...
都2023年了，竟然还有人问网络安全怎么入门？

都2023年了，竟然还有人问网络安全怎么入门？

工作一直忙碌&#xff0c;偶然翻了一下知乎&#xff0c;都2022年了&#xff0c;相关网课这么多了&#xff0c;还有人不知道怎么学习网络安全&#xff0c;不了解也就算了&#xff0c;竟然还有一批神仙也真敢回答&#xff0c;对这个行业了解各一知半解就当做这些萌新的启蒙老师了…
阅读更多...
UDP与TCP协议

UDP与TCP协议

目录 UDP协议 协议报头 UDP协议特点&#xff1a; 应用场景&#xff1a; TCP TCP协议报头 确认应答机制 理解可靠性 超时重传机制 连接管理机制 三次握手&#xff1a; 四次挥手&#xff1a; 滑动窗口 如何理解缓冲区和滑动窗口&#xff1f; 倘若出现丢包&#xf…
阅读更多...
05 DC-AC逆变器（DCAC Converter / Inverter）简介

05 DC-AC逆变器（DCAC Converter / Inverter）简介

文章目录0、概述逆变原理方波变换阶梯波变换斩控调制方式逆变器分类逆变器波形指标1、方波变换器A 单相单相全桥对称单脉冲调制移相单脉冲调制单相半桥2、方波变换器B 三相180度导通120度导通&#xff08;线、相的关系与180度相反&#xff09;3、阶梯波逆变器独立直流源二极管钳…
阅读更多...
Esxi NAT网络搭建

Esxi NAT网络搭建

前言 本文主要讲述如何在Esxi上只有一个公网IP情况下，实现内部虚拟机上网，以及外部对内部服务的访问，以及外网通过vpn访问内网； 环境 Esxi 6.7iKuai8 3.6.13OpenVPN 2.6一、创建虚拟路由 1.1 目的 虚拟路由，也就是常说的软路由；只有一个外网IP情况下，其他虚拟机需要上…
阅读更多...
LeetCode刷题系列 -- 429. N 叉树的层序遍历

LeetCode刷题系列 -- 429. N 叉树的层序遍历

给定一个 N 叉树&#xff0c;返回其节点值的层序遍历。&#xff08;即从左到右&#xff0c;逐层遍历&#xff09;。树的序列化输入是用层序遍历&#xff0c;每组子节点都由 null 值分隔&#xff08;参见示例&#xff09;。示例 1&#xff1a;输入&#xff1a;root [1,null,3,2…
阅读更多...
【每日阅读】JS知识（三）

【每日阅读】JS知识（三）

var声明提升 js是一个解释性语言类型&#xff0c;预解析就是在执行代码之前对代码进行通读 var关键字是&#xff0c;在内存中声明一个变量名 js在代码执行之前 会经历两个环节 解释代码 和执行代码 声明式函数 内存中 先声明一个变量名是函数 这个名代表的是函数 乘法表 // for…
阅读更多...
IP、ICMP、TCP和UDP校验和计算

IP、ICMP、TCP和UDP校验和计算

一. 前言 计算网络数据包的校验和是机器自动完成&#xff0c;不需要手动计算。但是正因为如此&#xff0c;我们往往不会去深究校验和到底是怎么计算的&#xff0c;留下这一块盲区。虽然书上有大致介绍计算的方法&#xff0c;但是&#xff0c;“纸上得来终觉浅&#xff0c;绝知此…
阅读更多...
二叉树——验证二叉搜索树

二叉树——验证二叉搜索树

验证二叉搜索树 链接 给你一个二叉树的根节点 root &#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。 节点的右子树只包含 大于 当前节点的数。 所有左子树和右子树自身必须也是二叉搜索树。 …
阅读更多...
【Proteus仿真】【51单片机】粮仓温湿度控制系统设计

【Proteus仿真】【51单片机】粮仓温湿度控制系统设计

文章目录一、功能简介二、软件设计三、实验现象联系作者一、功能简介 本项目使用Proteus8仿真51单片机控制器&#xff0c;使用声光报警模块、LCD1602显示模块、DHT11温湿度模块、继电器模块、加热加湿除湿风扇等。 主要功能&#xff1a; 系统运行后&#xff0c;LCD1602显示传…
阅读更多...
LeetCode 144. 二叉树的前序遍历

LeetCode 144. 二叉树的前序遍历

144. 二叉树的前序遍历 难度&#xff1a;easy\color{Green}{easy}easy 题目描述 给你二叉树的根节点 rootrootroot &#xff0c;返回它节点值的 前序 遍历。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,2,3]示例 2&#xff1a; 输入&#…
阅读更多...
Web前端学习：三 - 练习

Web前端学习：三 - 练习

三六&#xff1a;风筝效果 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style type"text/css">*{margin: 0;padding: 0;}.d1{width: 200px;height: 200px;background: yellow;position…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023