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

进击的文文文

已于 2023-01-28 13:38:33 修改

阅读量644

点赞数 1

分类专栏： web 文章标签：微信小程序前端小程序

于 2023-01-06 23:50:39 首次发布

本文链接：https://blog.csdn.net/weixin_61096287/article/details/128525303

版权

web 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

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

疯狂学习微信小程序ing

js也在努力兼顾kkk

这一篇不知道为什么目录跳转有问题，所以就没加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>