微信小程序一、微信小程序简介和技术架构 1、小程序发展史 1.1 Native App 在智能机刚兴起的时代，网络还不是

一、微信小程序简介和技术架构

1、小程序发展史

1.1 Native App

在智能机刚兴起的时代，网络还不是很发达，网页浏览速度也很慢，以文字为主。市面上的应用以 Native App 为主。

Native App 是基于 iOS 或者安卓的原生应用，特点是开发成本高，迭代慢，但是性能和体验很好，消息推送及时，比如 qq，微信等。

1.2 H5

2014 年 HTML5 完成标准定制，他的设计目的是为了在移动设备上支持多媒体，引入了 Video、Audio 等技术。

在网页上浏览视频变得很方便，特点是开发和发布成本低，打开方便，无需下载到本地，但是性能受浏览器的处理能力的限制，相较于原生 App 来说差了一些，消息推送不及时。

1.3 Hybrid App

Hybrid App 就是混合式的 App，也就是在移动端原生应用的基础上，通过 JSBrdige 等方法，访问原生应用的 API 进行 JS 的交互，并通过 WebView 等技术实现 HTML 与 CSS 的渲染。

WebView 可以理解为嵌套了一个浏览器内核（比如 webkit）的移动端组件。

这种技术实现的应用一般都是跨平台的，并且维护起来比较容易，性能介于 H5 和原生应用之间。

1.4 小程序

官网上写的是，微信小程序是一种基于微信平台的应用程序，用户可以在微信中直接使用这些小程序，无需下载和安装，具有轻便、快速、实用等特点。

与上面相比较，更类似于Hybrid App，界面用Web渲染，原生提供接口开放客户端的原生能力，其中使用的是微信团队开发的WeixinJSBrige: JS-SDK

2、技术架构

微信小程序为了独立迭代并保证安全独立沙箱、Native 等特性，需要在 iframe 运行，并引入额外的编译器和 Web Worker 保证线程安全，Worker 线程负责计算，将结果通过 postMessage 传递给主线程，主线程负责渲染。

如果还是像js那样使用单线程的话话，小程序的性能就大大降低，所以在微信小程序中，两者是分开的，在各个运行环境及渲染非原生组件的环境也是不同的：

运行环境	逻辑层	渲染层
iOS / Mac	JSCore	WKWebView
Android	V8	Chromium 定制内核
小程序开发者工具	NWJS	Chrome WebView
PC 端（window）	Chrome 内核	Chrome 内核

这里小程序的运行环境分成渲染层（View）和逻辑层（App Service）

渲染层：界面使用了 WebView 进行渲染，小程序存在多个界面，所以渲染层存在多个 WebView 线程
逻辑层：采用 JsCore 线程运行 JS 脚本

就是说，界面用 Web 渲染，原生提供接口开放客户端的原生能力。如下图所示，渲染层和逻辑层的通信是由微信客户端（Native）中转，逻辑层的网络请求也是由 Native 转发。

1、逻辑层的作用

逻辑层是一个只能够运行 JavaScript ，不提供 DOM/BOM 操作的沙箱环境。

为了保障安全性和解决卡顿，逻辑层主要是：

缺少相关的 DOM API 和 BOM API，阻止开发者不安全的操作
web worker 来做 js 运行
js bridge 通知渲染层 WebView 更新 UI

而逻辑层的核心 JSCore 采用的是WebKit引擎里面的

WebKit 是一个开源的浏览器网页排版引擎，包含 WebCore 排版引擎和 JSCore 引擎。WebKit 是 Sfari、Chromium 等浏览器的排版引擎

其中 WebCore 是核心的渲染引擎，JavascriptCore 是 WebKit 默认内嵌的 JS 引擎。Google Chrome 的 V8、ReactNative 和 iOS 平台上的 Javascript 引擎大都是内嵌 JSCore 的。

JSCore 是 JS 解释器，给 App 提供了 JS 可以解释执行的运行环境与资源。让基于 JSCore 的 Hybrid（Bridge）能够相互调用。如下图，小程序的 JSCore 相比于浏览器缺少了 DOM/BOM，相比于 Node 缺少了 Native 的直接调用。

2、逻辑和渲染层通信

在渲染层，宿主环境会把 WXML 转化成对应的 JS 对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的 setData 方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的 Dom 树上，渲染出正确的 UI 界面

小程序的双线程模型不同于单线程，逻辑层和渲染层的数据交互需要通过 JSBridge，二者是通过发布订阅来实现数据的双向绑定，这样在逻辑层调用 setData 来改变 Model 层的数据就能够实现视图数据的异步更新。

比如说如下的小程序页面

<view class="container">

  <view class="userinfo">

   <text class="user-nickname">{{userNickName}}</text>

  </view>

</view>

微信小程序通过 wcc 工具编译 wxml 为 js，得到 Virtual DOM 结构

{

  "tag": "wx-page",

  "children": [

   {

     "tag": "wx-view",

     "attr": {

       "class": "container"

     },

     "children": [

       {

         "tag": "wx-view",

         "attr": {

           "class": "userinfo"

         },

         "children": [

           {

             "tag": "wx-text",

             "attr": {

               "class": "user-nickname"

             },

             "children": [

               ""

             ],

             "raw": {},

             "generics": {}

           }

         ],

         "raw": {},

         "generics": {}

       }

     ],

     "raw": {},

     "generics": {}

   }

  ]

}

再通过 parser 将 tag 转换为真实 DOM


<div class="container">

  <div class="userinfo">

   <span class="user-nickname">{{文字内容}}</span>

  </div>

</div>

css 也是通过 wcsc 编译 wxss 为 js，进行相应的转换后，通过 style 标签插入到文档的 head 里面。

总结下：

逻辑层调用 setData 方法
逻辑层将待传输数据转换成字符串，并拼接到特定的 JS 脚本，通 JSBridge 过将数据传输到渲染层
渲染层接收到后，WebView JS 线程会对脚本进行编译，把待更新数据放入渲染队列，等待 WebView 线程空闲时进行页面渲染
WebView 线程开始执行渲染时，待更新数据会合并到视图层保留的原始 data 数据，并将新数据套用在 WXML 片段中得到新的虚拟节点树。经过新虚拟节点树与当前节点树的 diff 对比，将差异部分更新到 UI 视图。同时将新的节点树替换旧节点树，用于下一次重渲染

3、生命周期

梳理一下 App、组件和页面相应的生命周期流程：

这是微信官方的原图，关于小程序页面的生命周期

二、微信小程序开发

注册微信开发者账号

先进入微信公众平台首页，点击 “立即注册” 按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信，选择 “小程序” 即可。

激活邮箱之后，选择主体类型为 “个人类型”，并按要求登记主体信息。主体信息提交后不可修改，该主体将成为你使用微信公众平台各项服务和功能的唯一法律主体与缔约主体，在后续开通其他业务功能时不得变更或修改。

微信开发者工具

下载微信 web 开发者工具，根据自己的操作系统下载对应的安装包进行安装即可。

1，新建项目

2，页面介绍

3，项目组成

4，page.json 文件

配置包括了：

pages

作用：注册小程序的所有页面路径，数组的第一项代表小程序的初始页面（首页）。
示例："pages/index/index" 表示 index 页面是初始页面。

requiredPrivateInfos

作用：声明小程序需要使用的用户隐私接口，如获取位置、选择地址等。
示例："getLocation" 表示需要获取用户地理位置权限。

subpackages

作用：定义小程序的分包结构，用于优化加载性能（按需加载）。
字段说明：
- root：分包根目录。
- name：分包别名（可省略）。
- pages：分包中的页面路径。
示例：packageStreamMedia 分包包含直播相关的页面。

window

作用：设置小程序窗口的全局样式和行为。
常用字段：
- navigationBarBackgroundColor：导航栏背景色。
- navigationBarTitleText：导航栏标题文字。
- onReachBottomDistance：页面上拉触底事件触发距离（单位：px）。

tabBar

作用：定义小程序底部的标签栏（Tab Bar）。
常用字段：
- list：Tab 列表，包含 pagePath（页面路径）、iconPath（未选中图标）、selectedIconPath（选中图标）等。
- color / selectedColor：文字默认和选中颜色。
示例：配置了首页、分类、购物车等 5 个 Tab。

permission

作用：声明需要用户授权的隐私接口，并配置提示文案。
示例：scope.userLocation 用于获取最近门店，desc 是授权时的说明文字。

usingComponents

作用：声明小程序中使用的全局自定义组件和第三方组件（如 Vant Weapp）。
示例："van-button": "@vant/weapp/button/index" 引入了 Vant 的按钮组件。

sitemapLocation

作用：指定小程序搜索索引的配置文件路径（用于微信搜索收录）。
示例："sitemap.json" 是默认的索引配置文件。

5，页面构成

页面包含了：

start.wxml 模板文件
start.js 业务逻辑
start.wxss 样式
start.json 页面配置

再去app.json里注册新建的页面，默认第一个就作为首页

页面配置：

"enablePullDownRefresh": true,  允许下拉刷新
"backgroundTextStyle": "dark",  背景文字颜色
"backgroundColor":"#f70", 	      背景颜色
"usingComponents":{}            组件

三，基本语法

小程序的模板语法约等于 vue 的模板语法

1，文本渲染

{{ msg}}可以执行简单的js表达式
{{2+3}}
{{msg.length}}

2，条件渲染

wx:if=""
wx:elif=""
wx:else

3，列表渲染

wx:for="{{list}}"
wx:key="index"
	{{item}}
	{{index}}

4，自定义列表渲染

定义item与index的名称
wx:for="{{list}}}"
wx:for-item="myitem"
wx:for-index="myidx"
{{myidx}}
{{myitem}}

5，导入

（不常用）

import
只能导入 template 内容
template/utils.wxml
< template name=“userCart”> 用户名：{{name}} < /temlate>
home.wxml
< import src=“/template/utils.wxml”>
< tempate is=“userCart” data=“{{…u1}}”>

include
只能导入非 template 内容
template/foot.wxml < view> {{内容}} </ view>
home.wxml < include src=“/template/foot.wxml”>

6，wxss

默认单位是rpx
750rpx 等于一个屏幕的宽
375就是50%的宽

7，事件

bindInput     表单输入时
bindconfirm   表单输入确认
bindtap       点击时候

8，内置组件

view         组件块组件
text         组件行内组件
button       组件按钮
input        组件表单

9，事件的传参

<button data-msg="xxx" bindtap="tapHd">
获取事件的参数  e.target.dataset.msg

10，表单的绑定

<input value="{{s1}}" bindinput="inputHd">
inputHd(e){
 this.setData({s1:e.detail.value})
}
表单的值获取：e.detail.value

11，内置的 api

显示提示

showToast

本地存储

wx.setStorageSync(key,value)

本地取

wx.getStorageSync(key)
wx.request 网络请求

四，页面切换

1，< navigator></ navigator >标签

需要注意，该方法不能跳转 tabbar 页面.

格式为:

 <navigator url="........"></navigator>
 <navigator url="/pages/event/event">前往event</navigator>

2，wx.navigateTo.

通过构造 js 函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转 tabbar 页面.

格式为:

//<!**wxml文件**>
<view class="select_calculator" bindtap="next_calculator">
//js文件
next_calculator:function () {
    wx.navigateTo({
      url: '/pages/calculator/calculator',
    })

3，wx.redirectTo.

关闭当前页面，跳转到应用内的某个页面(不能跳转 tabbar 页面)。类似于 html 中的 window.open(‘…’);\

格式为:

<view>
  <navigator open-type="redirect" url="/pages/event/event">跳转并替换</navigator>
</view>

4，wx.switchTab.

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；该方法只能跳转 tabbar 页面.

  post_calculator:function () {
    wx.switchTab({
      url: '/pages/calculator/calculator',
    })
  },

})

5，wx.reLaunch.

关闭所有页面，打开到应用内的某个页面。

格式为:

<view>
  <navigator open-type="reLaunch">重启</navigator>
</view>

五，tabBar 全局配置

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。
小程序中通常将其分为：
1，底部 tabBar
2，顶部 tabBar

1，注意：

tabBar 中只能配置最少 2 个、最多 5 个 tab 页签
当渲染顶部 tabBar 时，不显示 icon，只显示文本

2，tabBar 的 6 个组成部分

① backgroundColor：				tabBar 的背景色

② selectedIconPath：			        选中时的图片路径

③ borderStyle：					tabBar 上边框的颜色

④ iconPath：					未选中时的图片路径

⑤ selectedColor：				        tab 上的文字选中时的颜色

⑥ color：					        tab 上文字的默认（未选中）颜色

3， tabBar配置案例：

{
  "pages": [
    "pages/home/home",
    "pages/usercenter/index",
    "pages/usercenter/person-info/index",
    "pages/usercenter/address/list/index",
    "pages/usercenter/address/edit/index",
    "pages/goods/list/index",
    "pages/goods/details/index",
    "pages/goods/category/index",
    "pages/goods/search/index",
    "pages/goods/result/index",
  ],
  "tabBar": {
  // 是否自定义 tabBar（true 表示使用自定义组件）
  "custom": true,
  // 未选中 tab 时的字体颜色（16进制颜色值）
  "color": "#666666",
  // 选中 tab 时的字体颜色
  "selectedColor": "#FF5F15",
  // tabBar 的背景色
  "backgroundColor": "#ffffff",
  // tabBar 顶部边框的颜色，只支持 black / white
  "borderStyle": "black",
  // tab 项的列表，最多支持 5 个
  "list": [
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页"
      },
      {
        "pagePath": "pages/goods/category/index",
        "text": "分类"
      },
      {
        "pagePath": "pages/cart/index",
        "text": "购物车"
      },
      {
        "pagePath": "pages/usercenter/index",
        "text": "我的"
      }
    ]
  },
  "requiredPrivateInfos": ["chooseAddress"],
  "lazyCodeLoading": "requiredComponents",
  "usingComponents": {},
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

六，页面传参

wxml 代码如下：

<view>
  <navigator open-type="navigate" url="/pages/event/event?name=mumu&age=18">事件event</navigator>
</view>
<view>
  <navigator open-type="redirect" url="/pages/event/event?name=曾庆林&age=33">跳转并替换</navigator>
</view>

js 代码如下：

/**
   * 页面的初始数据
   */
  data: {
    num:null,
  },
  goEvent(e){
    // 获取到传递的参数type
    var type = e.target.dataset.type;
    // 如果type值是redirect 替换跳转
    if(type=="redirect"){
      wx.redirectTo({
        url: "/pages/event/event",
      })
    }else{
      // 否则就普通跳转
      wx.navigateTo({
        url: '/pages/event/event',
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 更新导航栏的标题
    wx.setNavigationBarTitle({
      title: '导航与跳转',
    })

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({num:app.globalData.num})
  },

页面传递的参数

<view>页面传递的参数</view>
<view>
姓名：{{name}}，年龄{{age}}
</view>

七，封装 request

// 基础的url
const URI = {
  baseURL:"http://dida100.com"
}
// {name:"mumu",age:18} => name=mumu&age=18
function tansParams(obj){
  var  str = "";
  for(var k in obj){
    str+=k+"="+obj[k]+"&";
  }
  //移除最后一个&
  return str.slice(0,-1);
}
function request(option){
  var url = option.url;
  // 01 可以添加baseURL
  // 是不是以http开头的，是用url不是加上baseURL
  url = url.startsWith("http")?url:URI.baseURL+url;
  // 选项里面有params（get传入的参数）
  if(option.params){
    // 如果有参数，把参数转换为url编码形式加入
    url+="?"+tansParams(option.params);
  }

  // 02 可以添加请求头
  var  header = option.header||{};
  header.Authorization ="Bearer "+wx.getStorageSync('token');

  // 03 可以添加加载提示
  if(option.loading){
    wx.showToast({
      title: option.loading.title,
      icon:option.loading.icon,
    })
  }
  // 返回一个promise
  return new Promise((resolve,reject)=>{
      wx.request({
        // 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrL
        url: url,
        method:option.method||"GET",//请求的方法 默认get
        data:option.data, //post出入的参数
        header,
        success(res){
          // 请求成功
          resolve(res.data);
        },
        fail(err){
          // 04 对错误进行处理
          wx.showToast({title:"加载失败",icon:"none"})
          // 请求失败
          reject(err);
        },
        complete(){
          // 关闭加载提示
          wx.hideToast();
        }
      })
  })
}
// 定义get简易方法
request.get= (url,config)=>{
  return request({url,method:"get",...config})
}
// 定义post简易方法
request.post= (url,data,config)=>{
  return request({url,method:"post",data,...config})
}
// 导入request
module.exports={request}

八，Vant Weapp 轻量、可靠的小程序 UI 组件库

介绍

Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。

步骤一通过 npm 安装

使用 npm 构建前，请先阅读微信官方的 npm 支持

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

步骤二修改 app.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

注意：

由于目前新版开发者工具创建的小程序目录文件结构问题，npm 构建的文件目录为 miniprogram_npm，并且开发工具会默认在当前目录下创建 miniprogram_npm 的文件名，所以新版本的 miniprogramNpmDistDir 配置为 ‘./’ 即可

步骤三构建 npm 包

打开微信开发者工具，点击工具 -> 构建 npm，并勾选使用 npm 模块选项，构建完成后，即可引入组件。

步骤四 typescript 支持

如果你使用 typescript 开发小程序，还需要做如下操作，以获得顺畅的开发体验。

安装 miniprogram-api-typings

# 通过 npm 安装
npm i -D miniprogram-api-typings

# 通过 yarn 安装
yarn add -D miniprogram-api-typings

在 tsconfig.json 中增加如下配置，以防止 tsc 编译报错。
请将 path/to/node_modules/@vant/weapp 修改为项目的 node_modules 中 @vant/weapp 所在的目录。

{
  ...
  "compilerOptions": {
    ...
    "baseUrl": ".",
    "types": ["miniprogram-api-typings"],
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    },
    "lib": ["ES6"]
  }
}

2，使用

引入组件

以 Button 组件为例，只需要在 app.json 或 index.json 中配置 Button 对应的路径即可。
所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}

// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

3，其他

在开发者工具中预览示例小程序


# 将项目克隆到本地
git clone git@github.com:youzan/vant-weapp.git

# 安装项目依赖
cd vant-weapp && npm install

# 执行组件编译
npm run dev

接着打开微信开发者工具，导入 example 目录的项目就可以预览示例了。

九、小程序跨端框架介绍

框架	核心特点	支持平台	技术栈	适用场景
原生小程序开发	官方提供的开发方式，直接使用平台 API，无需额外框架	微信、支付宝、抖音、百度、QQ 等小程序平台	WXML、WXSS、JS	简单项目，追求稳定性或官方能力
Taro	多端统一开发，React 风格，支持多个平台，提供丰富插件和生态	微信、支付宝、百度、抖音、H5、RN 等	React 或 Vue	跨平台项目，想实现多端同时输出
uni-app	基于 Vue 的框架，支持多端输出，生态完善，HBuilderX 提供强大支持	微信、支付宝、百度、抖音、H5、APP、快应用等	Vue	面向 Vue 开发者，复杂应用的开发
WePY	微信小程序增强框架，类似 Vue 风格，简化了小程序开发	微信小程序	类 Vue 的语法	专注于微信小程序开发
mpVue	基于 Vue.js 的小程序框架，早期流行框架，已不再活跃	微信小程序、支付宝小程序	Vue	基于 Vue 语法的小程序，适合老项目维护
Remax	基于 React 语法，支持多个小程序平台	微信、支付宝、百度、抖音、头条小程序等	React	React 开发者，想要支持多平台
Flutter + 小程序插件	使用 Flutter 开发小程序，通过编译生成小程序代码	微信、支付宝、H5、APP	Dart	有 Flutter 技术栈的团队，适合跨平台开发
QingYan	京东推出的小程序框架，专注多端（如微信小程序、京东小程序等）	微信、京东、支付宝等小程序平台	类 Vue 语法	京东小程序开发或简单跨平台项目

1. 原生小程序开发

特点：
- 使用官方工具和 API 开发，没有任何额外抽象。
- 性能最佳，无需额外的框架适配。
- 不同小程序平台（如微信、支付宝）之间代码不可复用。
优点：
- 官方支持，稳定可靠。
- 学习成本低，适合简单项目。
缺点：
- 多平台开发需重复编写代码，复用性差。
- 工程化和开发效率较低。
适用场景：
- 只面向单一平台的小程序。
- 小型项目或需要充分利用平台原生能力的项目。

2. Taro

特点：
- 由京东开发，支持多端统一开发（微信、支付宝、百度、H5、RN 等）。
- 提供 React 风格的开发方式，同时支持 Vue。
- 强大的 CLI 工具和丰富的插件生态。
优点：
- 一套代码可输出多端（小程序、H5、RN）。
- 支持 TypeScript，工程化程度高。
- 生态完善，社区活跃。
缺点：
- 需要适应框架语法，部分复杂场景可能需要手动适配不同平台。
- 编译体积可能比原生代码稍大。
适用场景：
- 有 React 技术栈的团队，想实现多端开发的项目。
- 跨平台项目（如微信、支付宝、H5）。

3. uni-app

特点：
- DCloud 团队开发，基于 Vue.js 的多端框架。
- 支持绝大多数平台（微信、支付宝、百度、抖音、H5、APP）。
- 提供官方 IDE（HBuilderX），提升开发效率。
优点：
- 一套代码多端输出，支持 H5 和原生 APP。
- 生态丰富，支持插件市场和大量第三方库。
- 支持 Vue3 和 Composition API。
缺点：
- 定制化程度较高，复杂项目可能遇到兼容性问题。
- 部分场景可能需要手动适配平台差异。
适用场景：
- 有 Vue 技术栈的团队。
- 想要覆盖多个平台（微信小程序、H5、APP）。
- 中大型项目或需要多端统一的应用。

4. WePY

特点：
- 提供类似 Vue 的开发方式，用于增强微信小程序开发体验。
- 支持组件化开发、代码分离和模块化。
优点：
- 对微信小程序开发体验的提升明显。
- 语法简单易学，适合 Vue 开发者。
缺点：
- 只支持微信小程序。
- 社区和官方支持逐渐减弱。
适用场景：
- 专注于微信小程序开发，喜欢 Vue 风格的开发者。

5. mpVue

特点：
- 早期由美团开发的 Vue 小程序框架，基于 Vue 2.x。
- 编译后运行在小程序环境中。
优点：
- 提供 Vue 风格的语法，降低了开发门槛。
- 对 Vue 开发者友好。
缺点：
- 不支持 Vue3。
- 维护逐渐停滞，社区不够活跃。
适用场景：
- 需要维护老项目的团队。
- 单纯基于 Vue 的小程序项目。

6. Remax

特点：
- 基于 React 语法的小程序框架。
- 支持微信、支付宝、百度等多种小程序平台。
- 与 React 社区生态高度兼容。
优点：
- React 技术栈，学习成本低。
- 强大的 React 生态支持。
- 跨平台支持好。
缺点：
- 不适合复杂跨平台需求（如同时输出 H5）。
- 社区规模相对较小。
适用场景：
- 有 React 技术栈的团队。
- 想开发多个小程序平台的应用。

7. Flutter + 小程序插件

特点：
- 使用 Flutter 编写应用，通过插件将 Flutter 代码编译成小程序代码。
- 支持小程序、H5 和原生 APP。
优点：
- 通过 Flutter 的高性能渲染，实现更优的跨平台体验。
- 适合复杂 UI 和高性能应用场景。
缺点：
- 学习曲线较高，需要掌握 Dart 和 Flutter。
- 小程序支持度相对有限，调试复杂。
适用场景：
- 有 Flutter 技术栈的团队。
- 想实现高性能跨平台项目。

8. QingYan（京东轻颜）

特点：
- 京东推出的小程序框架，专注京东小程序和微信小程序的开发。
- 支持类 Vue 的语法。
优点：
- 与京东小程序生态集成好。
- 语法简单，适合初学者。
缺点：
- 平台覆盖有限。
- 社区不够活跃。
适用场景：
- 主要开发京东或微信小程序的团队。
- 需要简单跨平台支持的小型项目。

框架选择建议

单平台开发（如微信小程序）：
- 简单项目：直接使用原生开发。
- 中大型项目：选择 WePY 或 Taro 提升开发体验。
多平台开发：
- Vue 技术栈：选择 uni-app。
- React 技术栈：选择 Taro 或 Remax。
跨平台统一开发（小程序 + H5 + APP）：
- 推荐 uni-app 或 Flutter。
老项目维护：
- 基于 Vue：继续使用 mpVue。
- 基于 React：继续使用 Remax 或原生开发。

总结

原生开发 是小程序开发的基础，但对于复杂场景和多端支持，使用框架可以显著提升效率。
如果团队熟悉 Vue.js，可以优先选择 uni-app 或 Taro。
如果团队熟悉 React.js，可以选择 Taro 或 Remax。
根据需求和项目复杂度，合理选择框架可以降低开发成本并提升代码复用率。

微信小程序

一、微信小程序简介和技术架构

1、小程序发展史

1.1 Native App

1.2 H5

1.3 Hybrid App

1.4 小程序

2、技术架构

1、逻辑层的作用

2、逻辑和渲染层通信

3、生命周期

二、微信小程序开发

注册微信开发者账号

微信开发者工具

1，新建项目

2，页面介绍

3，项目组成

4，page.json 文件

5，页面构成

页面配置：

三，基本语法

1，文本渲染

2，条件渲染

3，列表渲染

4，自定义列表渲染

5，导入

6，wxss

7，事件

8，内置组件

9，事件的传参

10，表单的绑定

11，内置的 api

四，页面切换

1，< navigator></ navigator >标签

2，wx.navigateTo.

3，wx.redirectTo.

4，wx.switchTab.

5，wx.reLaunch.

五 ，tabBar 全局配置

1， 注意：

2，tabBar 的 6 个组成部分

3， tabBar配置案例：

六，页面传参

wxml 代码如下：

js 代码如下：

页面传递的参数

七，封装 request

八，Vant Weapp 轻量、可靠的小程序 UI 组件库

介绍

步骤一 通过 npm 安装

步骤二 修改 app.json

注意：

步骤三 构建 npm 包

步骤四 typescript 支持

2，使用

引入组件

使用组件

3，其他

在开发者工具中预览示例小程序

九、小程序跨端框架介绍

1. 原生小程序开发

2. Taro

3. uni-app

4. WePY

5. mpVue

6. Remax

7. Flutter + 小程序插件

8. QingYan（京东轻颜）

框架选择建议

总结

五，tabBar 全局配置

1，注意：

步骤一通过 npm 安装

步骤二修改 app.json

步骤三构建 npm 包