【web】微信小程序笔记小结（简介）

news2025/1/13 10:18:10

   准备参加计算机设计大赛owo 

  疯狂学习微信小程序ing 

  js也在努力兼顾kkk  

写完想搞个目录结果老是跳转有问题orz，所以这一篇没有目录了qwq

来源：黑马程序员前端微信小程序开发教程

I. 小程序与普通网页的区别

① 运行环境

网页 → 浏览器环境   小程序 → 微信环境

② API

由于运行环境不同，小程序中无法调用DOM和BOM的API

但是，小程序中可以调用微信环境提供的API，例如：地理定位、扫码、支付

③ 开发模式

网页：浏览器+代码编辑器

小程序：1）申请小程序开发账号

                2）安装小程序开发者工具

                3）创建和配置小程序项目

II. 创建第一个小程序

① 注册账号

打开 微信公众平台  → 点击 立即注册 → 点击 小程序 → 填信息即可

② 获取 AppID

登录后点击 开发管理 即可看到

③ 安装开发者工具

※※ 推荐工具

微信开发者工具是官方推荐使用的小程序开发工具，它提供的主要功能如下：

1）快速创建小程序项目

2）代码的查看和编辑

3）对小程序功能进行调试

4）小程序的预览和发布

※※ 下载网址

微信开发者工具·（稳定版）网址

※※ 新建小程序设置

直接点“+”后按下图设置即可（原来想用自己的图的，结果不知道为什么违规了T^T）

III. 小程序代码的组成

① 项目基本组成结构

② 页面的组成部分

小程序官方建议把所有小程序的页面，都存放在  pages 目录 中，以 单独的文件夹 存在

其中，每个页面由 4个基本文件 组成，分别是：                     1） . js 文件（页面的脚本文件，存放页面的数据、事件处理函数等）                                                                                             2） . json 文件（当前页面的配置文件，配置窗口的外观、表现等）                                                                                        3） .wxml 文件（页面的模板结构文件）                                4） .wxss 文件（当前页面的样式表文件）

※※ JSON 配置文件

※※※※ app. json 文件

※※※※ project.config.json 文件

※※※※ sitemap. json 文件

※※※※ 页面的 . json 配置文件

※※※※ 新建小程序页面

※※※※ 修改项目首页

※※ WXML 模板

※※※※ 概念

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

※※※※ 区别

※※ WXSS 样式

※※※※ 概念

 WXSS（WeiXin Style Sheets）是一套样式语言，用于描述WXML的组件样式，类似于 网页开发中的 CSS 

※※※※ 区别

※※ JS 逻辑交互

※※※※ . js 文件概念

处理用户的操作，比如响应点击、获取位置等

※※※※ . js 文件分类

IV. 小程序的宿主环境

① 概念

  宿主环境（ host environment ）指的是程序运行 所必须的依赖环境 ，脱离了宿主环境的软件是没有任何意义的

② 小程序的宿主环境

③ 包含内容

※※ 通信模型

※※※※ 通信的主体

※※※※ 小程序的通信模型

※※ 运行机制

※※※※ 启动过程

1）把小程序的代码包下载到本地

2）解析 app. json 全局配置文件

3）执行 app. js 小程序入口文件，调用 App () 创建小程序实例

4）渲染小程序首页

5）小程序启动完成

※※※※ 页面渲染过程

1）加载解析页面的 . json 配置文件

2）加载页面的 .wxml 模板和 .wxss 样式

3）执行页面的 . js 文件，调用 Page () 创建页面实例

4）页面渲染完成

※※ 组件

※※※※ 分类 → 常用标红

小程序中的组件也是 由 宿主环境提供 的，开发者可以基于组件快速搭建出漂亮的页面结构

官方把小程序的组件分为了9大类，分别是：

1）视图容器

2）基础内容

3）表单组件

4）导航组件

5）媒体组件

6）map 地图组件

7）canvas 画布组件

8）开放能力

9）无障碍访问

※※※※ 视图容器组件

1) view 组件的基本使用

※※※※❀ 效果图

※※※※❀ 代码

刚开始直接用的 container 发现不行，查了查才知道它是个关键字，改了就成功了orz

<!--index.wxml-->
<view class="container1">
<view>
  1
</view>
<view>
  2
</view>
<view>
  3
</view>
  </view>

/**index.wxss**/
.container1 view {
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  margin-top: 50px;
}

.container1 view:nth-child(1) {
  background-color: aqua;
}

.container1 view:nth-child(2) {
  background-color: cornflowerblue;
}

.container1 view:nth-child(3) {
  background-color: violet;
}

.container1 {
  display: flex;
  justify-content: space-around;
}

2） scroll-view 组件的基本使用

※※※※❀ 效果图

※※※※❀ 代码 

之前那个直接修改一下就行，目前感觉还挺简单的，就是知识了迁移一下

<!--index.wxml-->
<scroll-view class="container1" scroll-y>
<view>
  1
</view>
<view>
  2
</view>
<view>
  3
</view>
</scroll-view>

/**index.wxss**/
.container1 view {
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
}

.container1 view:nth-child(1) {
  background-color: aqua;
}

.container1 view:nth-child(2) {
  background-color: cornflowerblue;
}

.container1 view:nth-child(3) {
  background-color: violet;
}

.container1 {
  height: 100px;
  width: 80px;
  margin:0 auto;
  border: 2px black solid;
}

※※※※✿ 拓展：横向滚动效果图及代码

虽然没讲，但是研究了一下发现也不是很难~

主要修改点： ① view里 → display:inline-block  →   把块元素改成行内元素 

                         ② .container1里：white-space:nowrap → 强制内容不换行输出 

<!--index.wxml-->
<scroll-view class="container1" scroll-x>
<view>
  1
</view>
<view>
  2
</view>
<view>
  3
</view>
</scroll-view>

/**index.wxss**/
.container1 view {
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  display: inline-block;
}

.container1 view:nth-child(1) {
  background-color: aqua;
}

.container1 view:nth-child(2) {
  background-color: cornflowerblue;
}

.container1 view:nth-child(3) {
  background-color: violet;
}

.container1 {
  white-space:nowrap;
  height: 80px;
  width: 75px;
  margin:0 auto;
  border: 2px black solid;
}

 3）swiper 和 swiper-item 组件的基本使用

※※※※❀ 效果图

※※※※❀ 代码

<!--index.wxml-->
<swiper class="container1" indicator-dots>
  <swiper-item>
    <view>
      1
    </view>
  </swiper-item>
  <swiper-item>
    <view>
      2
    </view>
  </swiper-item>F
  <swiper-item>
    <view>
      3
    </view>
  </swiper-item>
</swiper>
/**index.wxss**/
.container1 view {
  height: 80px;
  line-height: 80px;
  text-align: center;
}

swiper-item:nth-child(1) {
  background-color: aqua;
}

swiper-item:nth-child(2) {
  background-color: cornflowerblue;
}

swiper-item:nth-child(3) {
  background-color: violet;
}

.container1 {
  height: 80px;
  width: 100px;
  margin: 10px auto;
  border: 2px black solid;
}

※※※※ 基础内容组件 

1) text 组件的基本使用

※※※※❀ 效果图

突然发现其实可以只截一半图的orz

感觉之前的自己好傻hhh

※※※※❀ 代码

<!--index.wxml-->
<view>
  支持长按选中
  <text selectable>178487964134897</text>
</view>

2) rich-text 组件的基本使用

※※※※❀ 效果图

※※※※❀ 代码 

<!--index.wxml-->
<rich-text nodes="<h1 style='color:blue'>标题</h1>"/>

※※※※ 其他常用组件

1) button 按钮的基本使用

※※※※❀ 效果图

※※※※❀ 代码 

<!--index.wxml-->
<view>通过type指定按钮类型</view>
  <button>默认按钮</button>
  <button type="primary">主色调按钮</button>
  <button type="warn">警告按钮</button>
<view>size="mini”小尺寸按钮</view>
  <button size="mini">默认按钮</button>
  <button type="primary" size="mini">主色调按钮</button>
  <button type="warn" size="mini">警告按钮</button>
<view>plain 镂空按钮</view>
<button size="mini" plain>默认按钮</button>
<button type="primary" size="mini" plain>主色调按钮</button>
<button type="warn" size="mini" plain>警告按钮</button>

2) image 组件的基本使用

懒得找图所以没写owo

※※※※✿ mode 属性 

※※ 小程序 API 的分类

 V. 协同工作和发布（感觉没什么用）

① 协同工作

 

 ② 成员管理

 

③ 版本

 ④ 发布上线

※※ 一般步骤

※※※※ 上传代码

※※※※  提交审核

※※※※ 发布

※※ 小程序码推广

 ※※ 运营数据

恭喜看到这的小伙伴，你已经完成微信小程序简介部分的学习了~！！

寒假在家玩的太嗨了，正值加速恢复学习状态qwq

下一篇在这里 (｡･∀･)ﾉﾞ → 还没写完 

 欢迎点赞评论收藏嘿嘿嘿~ ！

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

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

相关文章

自定义指令binding参数

自定义指令binding参数

除了核心功能默认内置的指令 (v-model 和 v-show)&#xff0c;Vue 也允许注册自定义指令。注意&#xff0c;在 Vue2.0 中&#xff0c;代码复用和抽象的主要形式是组件。然而&#xff0c;有的情况下&#xff0c;你仍然需要对普通 DOM 元素进行底层操作 如果想注册局部指令&#…
阅读更多...
自定义viewGroup

自定义viewGroup

案例分析&#xff1a;继承自extends LinearLayoutpublic class MainTabBarView extends LinearLayout实现3个方法public MainTabBarView(Context context) {this(context, null);}public MainTabBarView(Context context, Nullable AttributeSet attrs) {this(context, attrs, …
阅读更多...
Kettle--MySQL生产数据库千万、亿级数据量迁移方案及性能优化

Kettle--MySQL生产数据库千万、亿级数据量迁移方案及性能优化

一、Kettle环境搭建 一、Windows主要用于可视化创建数据迁移用到的ktr转换脚本、kjb作业脚本&#xff0c;以及脚本需要配置的DB2信息、读写性能优化信息等&#xff0c;也可直接在客户端完成不同数据库之间的数据迁移。 测试库表及数据 &#xff08;1&#xff09;创建测试库表…
阅读更多...
PVE安装win10并开启远程桌面

PVE安装win10并开启远程桌面

接上一篇一、win10安装镜像最新版下载下载地址&#xff1a;https://next.itellyou.cn/现在的win10最新版时22h2,文件名为zh-cn_windows_10_business_editions_version_22h2_updated_dec_2022_x64_dvd_cde06342.iso如果对更新有要求&#xff0c;建议每月跟踪下载一次二、上传win…
阅读更多...
IRCNN-FPOCS 代码解读（1）：整体框架

IRCNN-FPOCS 代码解读（1）：整体框架

0 前言 按照自己实现论文代码的思路&#xff0c;去研究作者的代码&#xff0c;找到自己的知识盲区和不足&#xff0c;提升编码技能。 本模块主要介绍代码实现思路。细节分析详见后续博客。 1、合成地震数据 利用波动方程&#xff1f;&#xff1f;&#xff1f;合成数据&…
阅读更多...
JavaScript的“神奇”之处

JavaScript的“神奇”之处

JavaScript 是一门很棒的语言。它的语法简单&#xff0c;生态系统也很庞大&#xff0c;最重要的是&#xff0c;它拥有最伟大的社区力量。我们知道&#xff0c;JavaScript 是一个非常有趣的语言&#xff0c;但同时也充满了各种奇怪的行为。让我们一起来看一下吧~ example 数组…
阅读更多...
Weston 窗口管理(2)

Weston 窗口管理(2)

窗口管理(2) 本文基于 weston 分支 10.0.2 进行描述. 五、概述 本文为窗口管理(1)的续章,更多站在开发者角度,以 weston 的代码实现讲解窗口管理(1)中所实现的部分业务场景. 六、数据结构 在窗口管理(1)中曾经描述过 weston 具体的分层逻辑,如下: 再进一步可以把 WESTON_LAY…
阅读更多...
关于grpc的第一次尝试

关于grpc的第一次尝试

自己瞎琢磨的&#xff0c;有错勿怪。 一、rpc理解 微服务会在不同的端口使用不同的语言提供相异的服务&#xff0c;端口之间的通信就使用rpc。这边的grpc的“g”我原先意味是golang&#xff0c;后来发现是google。 在golang关于rpc的官方包中&#xff0c;rpc主要有使用http/…
阅读更多...
（7）Qt中的自定义槽（函数）

（7）Qt中的自定义槽（函数）

目录 槽函数定义的规则 关联信号与槽错误的示例 类成员函数函数做槽函数使用 静态类成员函数做槽函数使用 全局函数做槽函数使用 lambda表达式做槽函数使用 使用lambda表达式的注意事项 注意事项一&#xff1a; 注意事项二&#xff1a; 槽函数定义的规则 1.槽函数返回值…
阅读更多...
多图解析KMP算法原理

多图解析KMP算法原理

KMP是什么 KMP是一种字符串匹配算法&#xff0c;能够判断字符串s2&#xff0c;是否为字符串s1的子串 例如&#xff1a;s1 "abd123def"&#xff0c;s2 "123"&#xff0c;KMP会返回4&#xff0c;代表s2是s1的子串&#xff0c;第一个匹配的下标为3 假设s…
阅读更多...
线程池及源码分析

线程池及源码分析

目录 1 java构建线程的方式 2 线程池的7个参数 3 线程池属性标识&线程池的状态 3.1 核心属性 3.2 线程池的状态 4 线程池的执行流程 5 添加工作线程的流程 6 Worker的封装&后续任务的处理 1 java构建线程的方式 一般就3~4种&#xff1a; 继承Thread&#xff…
阅读更多...
迎接新年，暂且用Python绘制几个中国结吧

迎接新年，暂且用Python绘制几个中国结吧

前言 今天就来分享几个用python绘制的图案吧 马上就要迎来新年了 就绘制了几个中国结&#xff0c;嘿嘿 话不多说&#xff0c;直接展示一下代码和效果图吧 更多学习资料与源码点击文章末尾名片领取 1. 效果图&#xff1a; 代码展示 import turtle turtle.screensize(600,…
阅读更多...
GPDB插件安装工具之gppkg

GPDB插件安装工具之gppkg

gppkg命令gppkg是一个python3编写的打包脚本&#xff0c;在整个集群中安装.gppkg格式的Greenplum数据库扩展&#xff08;例如PL/Java、PL/R和MADlib&#xff09;及其依赖项&#xff0c;位于/usr/local/cloudberry-db/bin/gppkg(自己安装的gpdb目录)&#xff0c;安装到$GPHOME里…
阅读更多...
1个寒假能学多少网络安全知识？

1个寒假能学多少网络安全知识？

现在可以看到很多标题都声称三个月内就可以转行网络安全领域&#xff0c;并且成为月入15K的网络工程师。那么&#xff0c;这个寒假的时间能学多少网络安全知识&#xff1f;是否能入门网络安全工程师呢&#xff1f; 答案是肯定的。 虽然网络完全知识是一门广泛的学科&#xff…
阅读更多...
ccc-sklearn-13-朴素贝叶斯（1）

ccc-sklearn-13-朴素贝叶斯（1）

朴素贝叶斯 一种直接衡量标签和特征之间概率关系的有监督学习算法&#xff0c;专注分类的算法&#xff0c;基于概率论和数理统计的贝叶斯理论。在计算的过程中&#xff0c;假设特征之间条件独立&#xff0c;不进行建模&#xff0c;采用后验估计。 sklearn中的朴素贝叶斯 类含…
阅读更多...
1-选择题练手

1-选择题练手

1.采用递归方式对顺序表进行快速排序&#xff0c;下列关于递归次数的叙述中&#xff0c;正确的是 A.每次划分后&#xff0c;先处理较长的分区可以减少递归次数 B.递归次数与初始数据的排列次序无关 C.每次划分后&#xff0c;先处理较短的分区可以减少递归次数 D.递归次数与…
阅读更多...
DaVinci：键 - 外部蒙版

DaVinci：键 - 外部蒙版

调色页面&#xff1a;键Color&#xff1a;Key在调色页面&#xff0c;可以轻松地从媒体池将某个片段拖至节点面板中&#xff0c;以作为外部蒙版。或者&#xff0c;在节点上右击选择“添加蒙版” Add Matte。若无附加&#xff0c;则可以选择本节点片段的明度信息作为外部蒙版。当…
阅读更多...
hbase2.x orphan regions on filesystem（region丢失）问题修复

hbase2.x orphan regions on filesystem（region丢失）问题修复

问题描述&#xff1a;orphan regions on filesystem 可以通过主master web页面的HBCK Report查看 也可以通过hbck2工具查看 # 查看指定表 hbase hbck -j $HBASE_HOME/lib/hbase-hbck2-1.3.0-SNAPSHOT.jar addFsRegionsMissingInMeta default:tableName # 查看命名空间下所有…
阅读更多...
Yolov5+TensorRT-生成dll-python/c++调用dll

Yolov5+TensorRT-生成dll-python/c++调用dll

YOlov5-6.0TensorRTdllpython/c调用简介1.项目环境2.TensorRT验证1.在tensorrtx-yolov5-v6.0\yolov5目录下新建build目录2.编写CMake.txt,根据自己目录更改2&#xff08;OpenCV_DIR&#xff09;、3&#xff08;TRT_DIR&#xff09;、10&#xff08;Dirent_INCLUDE_DIRS&#xf…
阅读更多...
LabVIEW网络服务器何使用，有哪些不同

LabVIEW网络服务器何使用，有哪些不同

LabVIEW网络服务器何使用&#xff0c;有哪些不同NI有几款不同的Web服务器&#xff0c;可使用不同的产品并覆盖不同的用例。它们具有非常相似的名称&#xff0c;可以互换使用&#xff0c;但每个都提供不同的功能。应用程序Web服务器描述&#xff1a;NI应用Web服务器加载使用LabV…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023