微信小程序开发详解-优快云博客

本文链接：https://blog.youkuaiyun.com/zzzlln/article/details/122924632

本文介绍了微信小程序的定义、发展史、优势与劣势，详细讲解了小程序的开发框架、数据绑定、样式、事件处理等方面，强调了小程序在用户体验、成本效益方面的优势，并探讨了其在包大小、审核和微信限制等方面的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、小程序是什么

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

二、小程序的发展史

1. 随着微信越来越流行，微信逐渐成为移动互联网中一个主要的入口。

2.微信基于WebView实现了前端界面的渲染，为了丰富微信中H5页面的功能，微信提供了

JS-SDK。

3.JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。

1.用户在访问网页的时候，在浏览器开始显示之前都会有一个的白屏过程，

在移动端，受限于设备性能和网络速度，白屏会更加明显。

2.除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在两个

方面：页面切换的生硬和点击的迟滞感。

三、微信小程序的优势和劣势

优势

1.微信助理，容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。

2.使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。

3.体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。

4.成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

劣势

1.单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是16M（这个值一直在变化，以官网为准）。

2.需要像app一样审核上架，这点相对于H5的发布要麻烦一些。

3.处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。

三、官方文档

微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/

四、项目目录结构

wxml：编写小程序界面结构的地方

wxss：编写小程序样式的地方

json：编写界面配置的地方

js：编写界面逻辑的地方

utils：编写工具类的地方

app.js：创建程序实例的位置

app.json：编写全局样式的地方

project.config.json：项目的配置文件

sitemap.json：配置哪些网站可以被检索到

五、数据绑定

数据定义

 data: {
msg:"hello world",
num: 18,
  },

引用数据

通过{{}}的方式可以引用数据。

除了引用数据之外，这里还可以进行一些计算，最终显示的结果是计算之后得到的结果

<view>{{msg}},{{num + 10}}</view>

小程序中任何需要获取数据的地方都需要用{{}},包括标签内的属性。

逻辑渲染

WXML中，使用wx：if"{{condition}}"来判断是否需要渲染该代码块：

<view wx:if="{{condition}}"> True </view>

使用wx：elif 和 wx：else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性

判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在

上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候

会删除掉对应的DOM，hidden属性则是通过display属性设置为none

来进行条件渲染。

<view hidden="{{condition}}">
隐藏
</view>

列表渲染

在组件上使用wx：for控制属性绑定一个数组，即可以使用数组中各

项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index

，数组当前项的变量名默认为item。

<!-- array 是一个数组 -->
<view wx:for="{{array}}">
  {{index}}: {{item.name}}
</view>

<!-- 对应的脚本文件
Page({
  data: {
    array: [{
      name: 'xxxx',
    }, {
      name: 'aaaa'
    }]
  }
})
-->

使用wx：for-item 指定数组当前元素的变量名，使用wx：for-index

指定数组当前下标的变量名。

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.name}}
</view>

六、Key

列表中的项目保持自己的特征和状态，需要使用 wx:key 来指定

列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：

1.字符串，代表在for循环的array中item的某个property，该property

的值需要是列表中唯一的字符串或数字，且不能动态改变。

2.保留关键字this代表在for循环中的item本身，这种表示需要item本身

是一个唯一的字符串或者数字

带有key的组件。框架会让他们重新排序，而不是重新创建。以确保使

组件保持自身的状态，提高列表渲染的效率。

Template

WXML提供模板（template），可以在模板定义代码，在不同地方调用

。使用name属性，作为模板的名字。然后在<template/>内定义代码

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

<!-- msgList:[
      {
        index: 0,
        msg: '这是一段模板',
        time: '2020-10-10'
      }
    ] -->
<view wx:for="{{msgList}}">
  <template is="msgItem" data="{{...item}}"></template>
</view>

引用

WXML提供两种文件引用方式 import 和 include

Import

可以在该文件中使用目标文件定义的 template

在item.wxml中定义了一个叫 item 的 template

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在index.wxml中引用了item.wxml，就可以使用item模板：

<import src="item.wxml"/>

<template is="item" data="{{text: '测试'}}"/>

需要注意的是import有作用域的概念，即指挥import目标文件

中定义的template，而不会import目标文件中import的template，简

言之就是import不具有递归的特性。

C引用B，B引用A，但是C不能使用A定义的template

include

include可以将目标文件中除了<template/> <wxs/>外的整个代码

引入，相当于拷贝到了include位置。

index.wxml

<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>
<include src="footer.wxml"/>

header.wxml

<!-- header.wxml -->
<view> header </view>

footer.wxml

<!-- footer.wxml -->
<view> footer </view>

七、小程序样式wxss

WXSS==>CSS

尺寸单位

WXSS中，引入rpx尺寸单位。

1rpx = （屏幕宽度/750）px

在iphone6手机下，屏幕宽度是375px，所以1rpx=0.5px

样式的导入

在小程序的引用是这样写的：

@import './test_0.wxss'

由于WXSS最终会被编译打包到目标文件中，用户只需要下

载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。

小程序中的样式选择器

八、小程序中的JS

小程序中的js和浏览器中的node的区别

浏览器中js：

DOM

BOM

Node中得JS:

NPM

Native

小程序中的JS：

小程序框架

小程序API

小程序中js的模块化

在小程序中实现js模块化，和node中、ES6中是一致的，大家

还可以使用值钱的方式进行JS的模块化编程。

小程序中js的甲在执行顺序

小程序执行入口是app.js。并且会根据其中国require模块顺序

决定文件的运行顺序。

小程序中js的执行环境

小程序目前可以运行在三大平台

1.iOS平台，包括iOS9，iOS10、iOS11

2.Android平台

3.小程序IDE

九、小程序中的数据渲染

小程序和浏览器中有什么不同

1.浏览器中渲染是单线程的。

2.而在小程序中的运行环境分成渲染层和逻辑层，第2章提

到过WXML模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

小程序如何渲染

WXML模板使用view标签，其子节点用{{}}语法绑定一个msg变量

<view>{{ msg }}</view>

在 JS 脚本使用 this.setData 方法把 msg 字段设置成 “Hello World”。

Page({
  onLoad: function () {
    this.setData({ msg: 'Hello World' })
  }
})

总结三点

1.渲染层和数据相关

2.逻辑层负责产生、处理数据

3.逻辑层通过Page实例的setData方法传递数据到渲染层。

小程序中通讯模型

小程序的渲染层和逻辑层分别由2个线程管理：

渲染层的界面使用了WebView 进行渲染；

逻辑层采用JsCore线程运行JS脚本。

一个小程序存在多个界面，所以渲染层存在多个WebView线程，这

两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信

客户端）做中转，逻辑层发送网络请求也经由Native转发。

数据驱动的思想

通常情况下视图和变量的状态是相关联的，如果有某种方法可以让

状态和视图绑定在一起，那就可以让我们省去修改视图的工作，这个方

法就叫做数据驱动。

在有了框架之后，我们一般很少会采用直接去修改视图的方式，更

新界面了，绝大多数情况，都会通过操作数据的方式，来更新视图。

通过数据去驱动视图渲染。

十、程序和界面

程序

“小程序”指的是产品层面的程序，而“程序”指的是代码层面的程序实

例，为了避免误解，下文采用App来代替代码层面的“程序”概念。

App({
  onLaunch: function(options) {},
  onShow: function(options) {},
  onHide: function() {},
  onError: function(msg) {},
  globalData: 'I am global data'
})

宿主环境提供了 App() 构造器用来注册一个程序App，需要留意的是

App() 构造器必须写在项目根目录的app.js里，App实例是单例对象，

在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。

onLaunch: 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onShow：当小程序启动，或从后台进入前台显示，会触发onShow

onHidwe：当小程序从前台进入后台，会触发onHide

onError：当小程序发生脚本错误，或者API调用失败时，会触发onError，

并报错

其他字段：可以添加任意的函数或数据到Object参数中，在App实例回调

用this可以访问。

小程序全局数据

我们在前面说到小程序的JS脚本是运行在JsCore的线程里，小程序的每

个页面各自有一个WebView线程进行渲染，所以小程序切换页面时，小

程序逻辑层的JS脚本运行上下文依旧在同一个JsCore线程.

在上文中说道App实例是单例的，因此不同页面直接可以通过App实例下

的属性来共享数据。App构造器可以传递其他参数作为全局属性以达到全

局共享数据的目的。

在其他JS中可以通过getApp()获取App实例，之后可以获取到定义在App

实例上的数据.

Page

一个小程序可以有很多页面，每个页面承载不同功能，页面之间可以互相

跳转。

页面构造器

Page({
  data: { text: "This is page data." },
  onLoad: function(options) { },
  onReady: function() { },
  onShow: function() { },
  onHide: function() { },
  onUnload: function() { },
  onPullDownRefresh: function() { },
  onReachBottom: function() { },
  onShareAppMessage: function () { },
  onPageScroll: function() { }
})

生命周期

onLoad：生命周期函数--监听页面加载，触发时机遭遇onShow和onReady

onReady：生命周期函数--监听页面初次渲染完成

onShow：生命周期函数--监听页面初次渲染完成

onHide：生命周期函数--监听页面隐藏

onUnload：生命周期函数--监听页面卸载

数据

WXML可以通过数据绑定的语法绑定从逻辑层传递过来的数据字段，

这里所说的数据其实就是来自于页面Page构造器的data字段，data参数

是页面第一次渲染时从逻辑层传递到渲染层的数据。

在JS脚本中如果需要获取到data上的数据，需要通过this.data获取。

<!-- page.wxml -->
<view>{{text}}</view>

// page.js
Page({
  data: {
    text: '天亮教育',
  },
onLoad(){
      console.log(this.data.text)
}
})

如果涉及到更新，这里可以调用Page实例提供的setData把数据传递

给渲染层，从而达到更新界面的目的。由于小程序的渲染层和逻辑层

分别在两个线程中运行，所以setData传递数据实际是一个异步的过程

，所以setData的第二个参数是一个callback回调，在这次setData对界

面渲染完毕后触发。

setData其一般调用格式是 setData(data, callback)，其中data是由多个

key: value构成的Object对象。

// page.js
Page({
  onLoad: function(){
    this.setData({
      text: 'change data'
    }, function(){
      // 在这次setData对界面渲染完毕后触发
    })
  }
})

注意事项：

直接修改Page实例的this.data而不调用this.setData是无法改变页面的

状态的，还会造成数据不一致。

由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设

置的数据不应超过1024kB。

不要把data中的任意一项的value设为undefined，否则可能会有引起一

些不可预料的bug。

页面用户行为：

onPullDownRefresh 下拉刷新

监听用户下拉刷新事件，需要在app.json的window选项中或页面配

置page.json中设置enablePullDownRefresh为true。当处理完数据刷新后

，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

OnReachBottom 上拉触底

监听用户上拉触底事件。可以在app.json的window选项中或页面配

置page.json中设置触发距离onReachBottomDistance。在触发距离

内滑动期间，本事件只会被触发一次。

OnPageScroll 页面滚动

监听用户滑动页面事件，参数为 Object，包含 scrollTop 字段，表示

页面在垂直方向已滚动的距离（单位px）。

OnShareAppMessage 用户转发

只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用

户点击转发按钮的时候会调用，此事件需要return一个Object，包含title

和path两个字段，用于自定义转发内容

// page.js
Page({
onShareAppMessage: function () {
 return {
   title: '自定义转发标题',
	// 自定义点击链接需要跳转的页面，默认当前页面
   path: '/page/user?id=123'
 }
}
})

十一、事件

事件定义

在小程序中绑定事件可以以bind开头然后跟上事件的类型，如bindtap

绑定一个点击事件，对应的值是一个字符串，需要在page构造器中定

义同名函数，每次触发事件之后就会执行对应函数的内容。

<view bindtap="handleTap">点击事件</view>
<view bind:tap="handleTap">另一种写法</view>


// pages/my/index.js
Page({
  handleTap(){
    console.log("执行了点击事件");
  }
})

常见的事件类型

touchstart 手指触摸动作开始

touchmove 手指触摸后移动

touchcancel 手指触摸动作被打断，如来电提醒，弹窗

touchend 手指触摸动作结束

tap 手指触摸后马上离开

longpress 手指触摸后，超过350ms在离开，如果指定了事件回调

函数并触发了这个事件，tap事件将不再被触发

longtap 手指触摸后，超过350ms在离开（推荐使用longpress代替）

transitionend会在WXSS transition 或 wx.createAnimation动画结束后

触发

animationstart 会在一个WXSS animation 动画开始时触发

animationiteration 会在一个WXSS animation 一次迭代结束时触发

animationend 会在一个WXSS animation 动画完成时触发

阻止事件冒泡

在小程序中除了通过bind之外，还可以通过catch进行事件绑定，通过

catch绑定的事件不会触发事件冒泡。

事件捕获

事件的触发分为两个阶段，首先是捕获阶段，其次是冒泡阶段。默认情

况下事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发，可

以通过capture-bind进行事件绑定。

事件传参

在小程序中进行事件传参不能像传统的Web项目中一样，在括号里写参

数。在小程序中需要在标签上通过data-方式定义事件所需的参数。

<!-- data-参数名=’参数值’ -->
<view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view>

每个事件回调触发时，都会收到一个事件对象，通过这个对象可以获取路

由传递的参数

handleTap(e){
console.log("执行了点击事件");
	// 通过currentTarget中的dataset属性可以获取时间参数
    console.log(e.currentTarget.dataset.msg);
}

type事件类型

timeStamp 页面打开到触发事件所经过的ms数

target 出发时间的组件的一些属性值集合

currentTarget 当前组建的一些属性值集合

detail 额外的信息

touches 触摸事件，当前停留在屏幕中的触摸点信息的数组

changedTouches 触摸事件，当前变化的触摸点信息的数组

这里需要注意的是target和currentTarget的区别，currentTarget为

当前事件所绑定的组件，而target则是触发该事件的源头组件。

微信开发工具(小程序)