微信小程序教程看这篇就够了！

一朵好运莲

已于 2024-12-30 16:07:18 修改

阅读量1.3k

点赞数 26

CC 4.0 BY-SA版权

文章标签：微信小程序小程序

于 2024-11-29 16:19:45 首次发布

本文链接：https://blog.csdn.net/xiaolouuuu/article/details/144127804

本篇适合有一定框架开发基础的友友快速上手和复习，里面包含微信小程序重点知识，详细配置，API请看官网。

一、安装

请看官方文档：开始 | 微信开放文档

二、基本配置

1、切换成`WebView 渲染模式`

为什么切换？

1. 基础库版本兼容性

Skyline 渲染模式 是较新的渲染方式，通常会提供更好的渲染性能和效果，但前提是用户的微信客户端必须更新到支持这个模式的版本（即基础库 2.29.2 及以上）。
如果你的用户使用的是较旧的微信版本，Skyline 渲染模式 可能无法正常工作。为了确保小程序在所有用户的设备上都能正常展示，微信会自动切换到 WebView 渲染模式。

2. WebView 渲染模式的兼容性

WebView 渲染模式 基于 Web 技术（即 HTML/CSS/JavaScript），它在所有基础库版本中都得到广泛支持，确保了小程序在低版本的微信客户端中可以正确渲染。
对于不支持 Skyline 渲染模式 的设备，WebView 是一个通用的回退选项，确保小程序仍能运行，虽然性能和效果可能不如 Skyline 渲染模式。

打开app.json删掉，即可切换成`WebView 渲染模式`：

renderer: "skyline"：指定使用 Skyline 渲染模式，如果删掉这个配置，默认会使用 WebView 渲染模式
defaultDisplayBlock 和 defaultContentBox：这些配置是为了确保 Skyline 模式下，某些组件的渲染表现符合预期，尤其是布局相关的默认行为。
tagNameStyleIsolation: "legacy"：这个配置控制了组件的样式隔离行为，在 Skyline 渲染模式下，可能会采用更严格的样式隔离策略。

三、新建页面

1、新建文件夹

点击新建page，输入名字不写后缀直接回车：

2、快捷创建

在app.json中：

四、全局配置

1、page

pages 字段:用来指定小程序由哪些页面组成，用于让小程序知道由哪些页面组成以及页面定义在哪个目录。

没指定 entryPagePath 时，数组的第一项代表小程序的初始页面
可以在page里面删除或增加页面，page文件夹也会随之改动。
entryPagePath可以指定启动页面

2、 window

window 字段:用于设置小程序的状态栏、导航条、标题、窗口背景色

常用的window配置：

3、 tarBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

五、页面配置

页面中配置项在当前页面会覆盖 app.json 中相同的配置项。

六、配置less，sass预编译语言

在创建项目的时候，每个项目的根目录生成两个 confg.json 文件，用于保存开发者在工具上做的个性化配置，例如和编译有关的配置。

project.config.json:项目配置文件，常用来进行配置公共的配置

project.private.config.json:项目私有的配置，常用来配置个人的配置

在详情中勾选：

在project.config.json中：

"useCompilerPlugins": ["less"] 是一个配置项，用来指定小程序使用 编译插件，其中 "less" 表示启用 LESS 编译插件。

七、rpx

为了解决屏幕适配的问题，微信小程序推出了rpx 单位

rpx:它可以根据不同设备的屏幕宽度进行自适应缩放，小程序规定任何型号手机:屏幕宽都为 750rpx。

开发建议:
开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准，iPhone6 的设计稿一般是 750px如果用 iPhone6 作为视觉稿的标准量取多少 px ，直接写多少 rpx 即可，开发起来更方便，也能够适配屏幕的宽度。

八、全局样式和局部样式

全局样式:指在 app.wxss 中定义的样式规则，作用于每一个页面，例如:设置字号、背景色、宽高等全局样式

局部样式:指在 page.wxss 中定义的样式规则，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

九、组件

具体看：icon | 微信开放文档

特别讲一个组件，容易有面试题。

navigator

<navigator> 是一个用于跳转页面的组件，它支持多种 open-type 属性值，用来指定不同的跳转行为。

navigate：默认的跳转方式，跳转到指定的小程序页面。

redirect：跳转到指定页面，并关闭当前页面。

switchTab：跳转到小程序中的 tabBar 页面

reLaunch：关闭当前所有页面并打开目标页面。

navigateBack：返回到上一个页面。

携带参数：

接收：

十、icon图标

挑好图标后：

点击链接：

生成文件并导入：

全局注册，让每个文件都可以使用：

使用类名：

报错解决：

在阿里巴巴中：

然后复制新生成的代码替换就可以了。

十一、事件绑定

第一种方式:bind:事件名，bind 后面需要跟上冒号，冒号后面跟上事件名，例如:

<view bind:tap="inName"></view>

第二种方式:bind事件名，bind 后面直接跟上事件名，例如:

<view bindtap="fnName”></view>

1、阻止冒泡

使用 bind 绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用 catch 来绑定事件。

十二、自定义数据mark

特性	`data-`	`mark`
用途	用于存储自定义数据，绑定在元素上，触发事件时传递信息	用于性能分析，标记代码执行的开始和结束时间，监控性能
影响	影响页面的数据和事件处理逻辑	影响性能分析，不直接影响视图或数据显示
实现方式	通过 `data-` 属性在 WXML 中定义并通过 `dataset` 获取	用 `wx.startBenchmark()` 和 `wx.stopBenchmark()` 记录性能数据
应用场景	传递额外的、与页面显示无关的数据，事件绑定等	性能调试和分析，帮助开发者优化小程序性能

小程序进行事件传参的时候，除了使用 data-*属性传递参数外，还可以使用 mark 标记传递参数

在组件上使用 mark:自定义属性的方式将数据传递给事件处理函数

例如:

<view mark:id=“100"bindtap="handler” />

传参：

接收：

十三、双向绑定

在 WXML中，普通属性的绑定是单向的，例如:<input value="{{value}}"/>

如果希望用户输入数据的同时改变 data 中的数据，可以借助简易双向绑定机制。在对应属性之前添加 model: 前缀即可:

 <input model:value="{{value}}" />

注意：绑定的值不能写对象或数组

十四、列表渲染

十五、条件渲染

wx:if 和 hidden 二者的区别:

wx:if :当条件为 true 时将结构展示出来，否则结构不会进行展示，通过 移除/新增节点 的方式来实现
hidden:当条件为 tue 时会将结构隐藏，否则结构会展示出来，通过 display 样式属性来实现的

十六、小程序运行机制

小程序启动可以分为两种情况，一种是冷启动，一种是热启动

冷启动:如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动
热启动:如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态

前台和后台状态
小程序启动后，界面被展示给用户，此时小程序处于「前台」状态。当用户「关闭」小程序时，小程序并没有真正被关闭，而是进入了「后台」状态，当用户再次进入微信并打开小程序，小程序又会重新进入「前台」状态

挂起：小程序进入「后台」状态一段时间后(5秒)，微信停止小程序JS 线程执行，小程序进入「挂起」状态当开发者使用了后台播放音乐、后台地理位置等能力时，小程序可以在后台持续运行，不会进入到挂起状态

销毁：如果用户很久没有使用小程序，或者系统资源紧张，小程序会被销毁，即完全终止运行。当小程序进入后台并被「挂起」后，如果很长时间(目前是 30分钟)都未再次进入前台，小程序会被销毁当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。

十七、生命周期

应用生命周期是指应用程序进程从创建到消亡的整个过程

小程序的生命周期指的是小程序从启动到销毁的整个过程

一个小程序完整的生命周期由 应用生命周期、页面生命周期 和 组件生命周期 三部分来组成

1、应用生命周期

应用生命周期伴随着一些函数，我们称为应用生命周期函数，应用生命周期函数需要在 app.js 文件的 App() 方法中进行定义
App()方法必须在 app.js 中进行调用，主要用来注册小程序。应用生命周期函数由 onLaunch、onShow、onHide 三个函数组成

2、页面生命周期

页面生命周期函数需要在 Page()方法中进行定义

标签栏页面之间相互切换，页面不会被销毁
点击左上角，返回上一个页面，会销毁当前页面

十八、API

1、网络请求

`wx.request` 发送 GET 请求

wx.request({
  url: 'https://api.example.com/data', // 请求的 URL
  method: 'GET',                       // 请求方法
  success(res) {
    if (res.statusCode === 200) {
      console.log('请求成功:', res.data);
      // 处理成功的返回数据
    } else {
      console.error('请求失败:', res.errMsg);
    }
  },
  fail(err) {
    console.error('请求失败:', err);
  }
});

wx.request 发送 POST 请求

wx.request({
  url: 'https://api.example.com/submit',  // 请求的 URL
  method: 'POST',                        // 请求方法
  data: {                                // 发送的数据
    username: 'Tom',
    password: '123456'
  },
  header: {                              // 请求头部
    'content-type': 'application/json'   // 默认是 application/json，表示发送 JSON 数据
  },
  success(res) {
    if (res.statusCode === 200) {
      console.log('提交成功:', res.data);
      // 处理成功的返回数据
    } else {
      console.error('提交失败:', res.errMsg);
    }
  },
  fail(err) {
    console.error('请求失败:', err);
  }
});

2、loading

wx.showLoading()显示loading 提示框

wx.hideLoading()关闭 loading 提示框

wx.showLoading({
  title: '加载中...',   // 加载框的提示文字
  mask: true           // 是否显示透明蒙层，防止用户触摸背景内容
});

3、模态对话框、信息提示框

wx.showModal():模态对话框，常用于询问用户是否执行一些操作例如:询问用户是否退出登录、是否删除该商品等

wx.showModal({
  title: '提示',               // 标题
  content: '你确定要删除这个项目吗？',  // 内容
  showCancel: true,            // 是否显示取消按钮，默认为 true
  cancelText: '取消',          // 取消按钮的文字
  confirmText: '确定',         // 确定按钮的文字
  success(res) {
    if (res.confirm) {
      // 用户点击了确定
      console.log('用户点击了确定');
    } else if (res.cancel) {
      // 用户点击了取消
      console.log('用户点击了取消');
    }
  },
  fail(err) {
    console.error('出现错误:', err);
  }
});

wx.showToast():消息提示框，根据用户的某些操作来告知操作的结果例如:退出成功给用户提示，提示删除成功等

wx.showToast({
  title: '操作成功',     // 提示的内容
  icon: 'success',       // 图标类型，支持 'success'（成功）、'loading'（加载中）、'none'（无图标）
  duration: 2000,        // 提示框显示的时间，单位为毫秒，默认为 1500 毫秒
  success() {
    console.log('提示框显示成功');
  },
  fail(err) {
    console.error('提示框显示失败:', err);
  }
});

4、本地存储

1、同步

存储数据：wx.setStorageSync

// 存储数据
wx.setStorageSync('userInfo', { name: '小明', age: 25 });

获取数据：wx.getStorageSync

// 获取数据
const userInfo = wx.getStorageSync('userInfo');
console.log(userInfo);  // 输出: { name: '小明', age: 25 }

删除数据：wx.removeStorageSync

// 删除指定的存储数据
wx.removeStorageSync('userInfo');

清空所有存储数据：wx.clearStorageSync

// 清空所有存储数据
wx.clearStorageSync();

2、异步

存储数据：wx.setStorage

// 存储数据（异步）
wx.setStorage({
  key: 'userInfo',
  data: { name: '小李', age: 28 },
  success: function() {
    console.log('数据已存储');
  },
  fail: function() {
    console.log('存储失败');
  }
});

获取数据：wx.getStorage

// 获取数据（异步）
wx.getStorage({
  key: 'userInfo',
  success: function(res) {
    console.log('获取到的用户信息:', res.data);
  },
  fail: function() {
    console.log('没有找到该用户信息');
  }
});

删除数据：wx.removeStorage

// 删除数据（异步）
wx.removeStorage({
  key: 'userInfo',
  success: function() {
    console.log('数据已删除');
  },
  fail: function() {
    console.log('删除失败');
  }
});

清空所有数据：wx.clearStorage

// 清空所有存储数据（异步）
wx.clearStorage({
  success: function() {
    console.log('已清空所有存储数据');
  }
});

5、上拉加载

上拉加载是小程序中常见的一种加载方式，当用户滑动页面到底部时，会自动加载更多的内容

在 app.json 或者 page.json 中配置距离页面底部距离: onReachBottomDistance，默认 50px
在页面.js 中定义 onReachBottom 事件监听用户上拉加载

6、下拉刷新

在 app.json 或者 page.json 中开启允许下拉，同时可以配置窗口、loading 样式等
在页面.js 中定义 onPullDownRefresh 事件监听用户下拉刷新

十九、路由通信

在小程序中实现页面的跳转，有两种方式:
1.声明式导航:navigator 组件
2.编程式导航:使用小程序提供的 API

二十、自定义组件

开发中常见的组件主要分为 公共组件 和 页面组件 两种，因此注册组件的方式也分为两种:

全局注册:在 app.json 文件中配置 usingComponents 进行注册，注册后可以在任意页面使用
局部注册:在页面的json 文件中配置 usingComponents进行注册，注册后只能在当前页面使用

二十一、properties

Properies 是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和 data 一同用于组件的模板渲染

二十二、slot

1、创建自定义组件并定义插槽

首先，在小程序的components目录下创建一个自定义组件，例如my-component

<!-- my-component.wxml -->
<view>
  <slot name="header"></slot>
  <slot></slot>
  <slot name="footer"></slot>
</view>

2. 在页面中使用自定义组件并插入内容

<!-- index.wxml -->
<view>
  <my-component>
    <view slot="header">这是头部内容</view>
    <view>这是默认插槽的内容</view>
    <view slot="footer">这是底部内容</view>
  </my-component>
</view>

二十三、组件样式和注意事项

app.wxss 或页面的 wxss 中使用了标签名(view)选择器(或一些其他特殊选择器)来直接指定样式
这些选择器会影响到页面和全部组件，通常情况下这是不推荐的做法
组件和引用组件的页面不能使用 id 选择器(#a)、属性选择器([a])和标签名选择器，请改用 class 选择器
组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现，如遇，请避免使用
子元素选择器(.a>.b)只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。继承样式，如 font、color ，会从组件外继承到组件内。
除继承样式外，全局中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)

二十四、组件样式隔离

默认情况下，自定义组件的样式只受自身 wxss 的影响，但是有时候我们需要组件使用者的样式能够影响到组件，这时候就需要指定特殊的样式隔离选项 styielsolation，选择它支持以下取值:

isolated: 表示启用样式隔离，在自定义组件内外，使用 ciass 指定的样式将不会相互影响(一般情况下的默认值)
apply-shared: 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
shared:表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared3或 shared 的自定义组件。