微信小程序开发应用 实例

以下是一个简单的待办事项列表小程序。

一、创建项目

1. 首先，在微信开发者工具中创建一个新的小程序项目。你需要填写项目名称、目录等基本信息。选择一个合适的模板（可以选择“空白模板”开始）。

二、项目结构和文件说明

1. app.js

   • 这是小程序的全局逻辑文件。它用于控制小程序的生命周期，例如小程序的初始化（onLaunch）、显示（onShow）和隐藏（onHide）等操作。
   • 示例代码：

   App({onLaunch: function () {// 小程序初始化时执行的操作，比如获取用户信息等},globalData: {// 可以在这里定义全局变量，供各个页面共享userInfo: null}
   });
   

2. app.json

   • 这个文件用于配置小程序的全局设置，如页面路径、窗口样式等。
   • 例如，配置页面路径：

   {"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "待办事项","navigationBarTextStyle": "black"}
   }
   

3. app.wxss

   • 这是小程序的全局样式文件。可以在这里定义一些通用的样式，如字体、颜色等。
   • 例如：

   /* 全局字体大小设置 */
   body {font - size: 16px;
   }
   

4. 页面文件（以pages/index/index为例）

   • index.js
     • 处理页面的逻辑，如数据绑定、事件处理等。
     • 对于待办事项列表，代码可能如下：

     Page({data: {todoList: []},addTodo: function (e) {// 获取输入框的值let newTodo = e.detail.value;if (newTodo) {// 将新的待办事项添加到列表中let todoList = this.data.todoList;todoList.push(newTodo);this.setData({todoList: todoList});}}
     });
     

   • index.wxml
     • 这是页面的结构文件，类似于HTML，用于构建小程序的页面布局。
     • 示例代码：

     <view class="container"><input placeholder="添加待办事项" bindinput="addTodo" /><view wx:for="{{todoList}}" wx:key="index"><text>{{item}}</text></view>
     </view>
     

• index.wxss
  • 用于定义页面的样式，只作用于当前页面。
  • 例如：

  .container {padding: 20px;
  }
  input {border: 1px solid #ccc;padding: 10px;margin - bottom: 10px;
  }
  view {padding: 10px;border - bottom: 1px solid #eee;
  }
  

三、功能实现

1. 添加待办事项功能
   • 在index.js文件中，定义了addTodo函数来处理添加待办事项的操作。当用户在输入框中输入内容并触发输入事件（通过bindinput绑定）时，addTodo函数会获取输入框的值。
   • 如果值不为空，就将其添加到todoList数组中。然后通过this.setData方法更新数据，这会导致页面重新渲染，新的待办事项就会显示在列表中。
2. 列表显示功能
   • 在index.wxml文件中，使用wx:for指令来循环遍历todoList数组。wx:key属性用于提高列表渲染的性能，它的值应该是一个唯一标识每个列表项的字符串。对于数组中的每个元素，会创建一个<text>标签来显示待办事项的内容。

这只是一个简单的微信小程序实例，你可以根据实际需求扩展功能，如添加删除待办事项功能、分类功能、提醒功能等。

小程序生命周期 以及 各生命周期应用实例

1. 小程序生命周期概述

   • 微信小程序的生命周期是指小程序从创建到销毁的整个过程，包括应用生命周期和页面生命周期。应用生命周期主要涉及小程序的启动、显示、隐藏和销毁等阶段，而页面生命周期则侧重于单个页面的加载、初次渲染、显示、隐藏和卸载等操作。

2. 应用生命周期

   • onLaunch
     • 定义和作用：小程序初始化完成时触发，全局只触发一次。这个阶段可以进行一些初始化的操作，如获取用户的基本信息、检查登录状态、初始化全局数据等。
     • 应用实例：假设要在小程序启动时获取用户的定位信息，并且将这个信息存储在全局数据中，以便后续页面使用。在app.js文件中可以这样写：

     App({onLaunch: function () {wx.getLocation({success: (res) => {this.globalData.userLocation = res.latitude + ',' + res.longitude;}});},globalData: {userLocation: null}
     });
     

   • onShow
     • 定义和作用：小程序启动，或从后台进入前台显示时触发。可以用于更新数据显示，例如当小程序从后台切换回前台时，检查是否有新的消息或者更新某些需要实时显示的数据。
     • 应用实例：如果小程序是一个社交应用，当从后台回到前台时，需要重新获取未读消息的数量并显示。在app.js文件中：

     App({onShow: function () {// 假设这里有一个获取未读消息数量的函数const unreadMessageCount = this.getUnreadMessageCount();this.globalData.unreadMessageCount = unreadMessageCount;},globalData: {unreadMessageCount: 0}
     });
     

   • onHide
     • 定义和作用：小程序从前台进入后台时触发。可以在这个阶段暂停一些不必要的操作，如暂停定时器、停止音频播放等，以节省资源。
     • 应用实例：如果小程序中有一个正在播放的背景音乐，当小程序进入后台时，需要暂停播放。在app.js文件中：

     App({onHide: function () {const backgroundAudioManager = wx.getBackgroundAudioManager();backgroundAudioManager.pause();}
     });
     

   • onError
     • 定义和作用：小程序发生脚本错误，或者API调用失败时触发。可以用于收集错误信息，以便后续的错误修复和优化。
     • 应用实例：在app.js文件中，可以将错误信息发送到开发者的服务器进行记录：

     App({onError: function (msg) {// 假设这里有一个将错误信息发送到服务器的函数this.sendErrorToServer(msg);}
     });
     

3. 页面生命周期

   • onLoad
     • 定义和作用：页面加载时触发。一个页面只会调用一次，可以在这个阶段获取页面传过来的参数，初始化页面数据等。
     • 应用实例：假设从一个列表页跳转到详情页，需要在详情页加载时获取传递过来的商品ID，并根据这个ID获取商品详情数据。在detail.js（详情页的js文件）中：

     Page({onLoad: function (options) {const productId = options.productId;// 假设这里有一个获取商品详情的函数this.getProductDetail(productId);},data: {productDetail: null}
     });
     

   • onReady
     • 定义和作用：页面初次渲染完成时触发。代表页面已经准备好，可以和视图层进行交互。这个阶段可以获取页面中的元素节点，进行一些操作，如设置元素的样式等。
     • 应用实例：如果想在页面初次渲染完成后，设置一个元素的高度。在index.js（假设是某个页面的js文件）中：

     Page({onReady: function () {const query = wx.createSelectorQuery().in(this);query.select('#myElement').boundingClientRect((res) => {// 假设这里可以根据元素的高度进行一些操作console.log(res.height);}).exec();}
     });
     

   • onShow
     • 定义和作用：页面显示时触发。包括页面初次打开、从后台进入前台等情况。可以用于更新页面的数据显示，因为每次显示页面可能需要重新获取最新的数据。
     • 应用实例：如果页面中有一个倒计时功能，当页面从后台回到前台时，需要重新启动倒计时。在countdown.js（假设是有倒计时功能的页面js文件）中：

     Page({onShow: function () {this.startCountdown();},data: {countdownValue: 60},startCountdown: function () {const interval = setInterval(() => {if (this.data.countdownValue > 0) {this.setData({countdownValue: this.data.countdownValue - 1});} else {clearInterval(interval);}}, 1000);}
     });
     

   • onHide
     • 定义和作用：页面隐藏时触发。包括跳转到其他页面、小程序退到后台等情况。可以用于暂停页面中的一些操作，如暂停动画、暂停定时器等。
     • 应用实例：如果页面中有一个滚动动画，当页面隐藏时，需要暂停这个滚动动画。在scroll.js（假设是有滚动动画的页面js文件）中：

     Page({onHide: function () {const animation = wx.createAnimation();animation.stop();}
     });
     

   • onUnload
     • 定义和作用：页面卸载时触发。可以用于清理页面相关的数据和资源，如清除定时器、取消网络请求等。
     • 应用实例：如果页面中有一个正在进行的网络请求，当页面卸载时，需要取消这个网络请求。在request.js（假设是有网络请求的页面js文件）中：

     Page({onUnload: function () {const requestTask = wx.request({// 假设这是一个网络请求url: 'https://example.com/api',success: (res) => {//...}});requestTask.abort();}
     });
     

小程序图片 展示方案 + 小程序打包应用方案

1. 微信小程序图片大小要求

   • 尺寸方面：微信小程序本身对图片尺寸没有严格固定的要求。但为了适配不同的设备屏幕（如iPhone、安卓手机等各种屏幕尺寸），一般建议提供多种尺寸的图片或者使用响应式设计。例如，对于一些展示类图片，可以根据常见的屏幕宽度（如375px、414px等）按比例设计合适的尺寸。
   • 文件大小方面：为了保证小程序的加载速度，图片文件大小应该尽量小。虽然没有绝对的限制，但过大的图片文件会导致小程序加载缓慢。通常，对于普通的图标类图片，文件大小最好控制在几KB到几十KB之间；对于高质量的产品图片等，尽量将其压缩到几百KB以内。可以使用图像编辑工具（如Photoshop）或者在线图像压缩工具（如TinyPNG）来压缩图片。

2. 广告涉及图片资源量大的展示方案

   • 懒加载技术：对于广告图片，尤其是在页面较长且包含多个广告图片的情况下，采用懒加载是一种有效的方法。懒加载是指当图片进入浏览器的可视区域时才加载图片，而不是一次性加载所有图片。在微信小程序中，可以通过监听滚动事件，判断图片是否进入可视区域，然后动态加载图片。例如，在wxml文件中有多个广告图片：

   <view wx:for="{{adImages}}" wx:key="index"><image wx:if="{{isInView[index]}}" src="{{adImages[index].src}}" mode="aspectFit"></image>
   </view>
   

   • 在js文件中实现滚动监听和图片加载判断：

   Page({data: {adImages: [{src: 'ad1.jpg'},{src: 'ad2.jpg'},//...],isInView: []},onLoad: function () {const length = this.data.adImages.length;this.setData({isInView: new Array(length).fill(false)});},onPageScroll: function (e) {const windowHeight = wx.getSystemInfoSync().windowHeight;const scrollTop = e.scrollTop;const adImages = this.data.adImages;for (let i = 0; i < adImages.length; i++) {const imageRect = this.selectComponent(`#adImage${i}`).getBoundingClientRect();if (imageRect.top < windowHeight && imageRect.bottom > 0) {const isInView = this.data.isInView;isInView[i] = true;this.setData({isInView: isInView});}}}
   });
   

   • 图片预加载与缓存：对于一些重要的广告图片或者高概率展示的图片，可以进行预加载和缓存。预加载是指在小程序启动或者页面加载初期就提前加载部分图片，缓存则是将已经加载过的图片存储在本地，下次需要时直接从本地获取，减少网络请求。在微信小程序中，可以使用wx.getImageInfo来预加载图片，使用wx.setStorageSync和wx.getStorageSync来缓存图片信息。例如：

   Page({data: {preloadedAdImages: []},onLoad: function () {const adImages = ['ad1.jpg', 'ad2.jpg'];adImages.forEach((image) => {wx.getImageInfo({src: image,success: (res) => {const preloadedAdImages = this.data.preloadedAdImages;preloadedAdImages.push(res);this.setData({preloadedAdImages: preloadedAdImages});}});});}
   });
   

   • 使用图片CDN（内容分发网络）：将广告图片存储在CDN上，CDN会根据用户的地理位置等因素，从离用户最近的服务器节点分发图片，加快图片的传输速度。在小程序中，通过将图片的src属性指向CDN地址来实现。

3. 微信小程序打包大小限制及优化方案

   • 打包大小限制：微信小程序代码包总大小限制为2MB，单个分包大小限制为2MB。超过这个限制，小程序将无法上传和发布。
   • 优化方案
     • 代码压缩与混淆：使用工具对JavaScript代码进行压缩和混淆。压缩可以去除代码中的空格、注释等冗余内容，混淆则可以将变量名等替换为更短的、难以理解的名称，减少代码体积。在小程序开发中，可以使用如UglifyJS等工具进行代码压缩。
     • 资源优化：
       • 图片优化：如前面所述，对图片进行压缩，减少图片文件大小。还可以考虑使用SVG（可缩放矢量图形）代替部分PNG或JPEG图片，SVG文件体积小且在不同分辨率下显示效果好。
       • 音频和视频资源优化：对于音频和视频，同样要控制文件大小。可以采用合适的编码格式和压缩比例，如音频使用MP3格式并适当降低码率。
     • 分包加载策略：如果小程序功能较多，体积较大，可以采用分包加载。将小程序划分为多个分包，在需要时才加载相应的分包。在app.json文件中可以配置分包：

     {"pages":["pages/index/index","pages/logs/logs"],"subpackages":[{"root": "package1","pages":["pages/product/product","pages/category/category"]}]
     }
     

     • 代码复用：在小程序的不同页面或者功能模块之间，尽量复用代码。例如，将一些通用的函数、组件提取出来，创建公共的js文件或者自定义组件，减少代码冗余。

技术细节（分包应用实例）

1. 分包的概念和优势

   • 微信小程序分包是一种优化小程序加载性能的策略。当小程序功能复杂、代码和资源文件较多时，将整个小程序划分为多个分包，主包只包含小程序启动和展示首页所必需的资源和代码，其他功能模块放在分包中。用户在使用小程序时，主包会首先加载，当需要访问分包中的功能时，再加载相应的分包。这样可以减少小程序初始加载的时间和资源占用，提高用户体验。

2. 创建分包实例步骤

   • 项目结构规划

     • 假设我们要开发一个电商小程序，包括首页、商品列表页、商品详情页、购物车页、个人中心页等功能。我们可以将首页和购物车页放在主包中，因为这两个页面是用户经常访问的基本功能页面。将商品列表页和商品详情页划分为一个分包（用于商品展示相关功能），个人中心页划分为另一个分包（用于用户个人信息相关功能）。
     • 项目结构大致如下：
       • pages/（主包）
         • index/（首页）
           • index.js
           • index.wxml
           • index.wxss
         • cart/（购物车页）
           • cart.js
           • cart.wxml
           • cart.wxss
       • subpackages/
         • product/（商品展示分包）
           • pages/
             • list/（商品列表页）
               • list.js
               • list.wxml
               • list.wxss
             • detail/（商品详情页）
               • detail.js
               • detail.wxml
               • detail.wxss
         • user/（用户个人信息分包）
           • pages/
             • profile/（个人中心页）
               • profile.js
               • profile.wxml
               • profile.wxss

   • 配置分包

     • 在app.json文件中进行分包配置。以下是一个示例配置：

     {"pages":["pages/index/index","pages/cart/cart"],"subpackages":[{"root": "subpackages/product","name": "product","pages":["pages/list/list","pages/detail/detail"]},{"root": "subpackages/user","name": "user","pages":["pages/profile/profile"]}]
     }
     

     • 其中，root属性指定了分包的根目录，name属性是分包的名称（可选，但推荐设置，方便引用），pages属性列出了该分包中的页面路径。

   • 分包引用和加载

     • 当用户在主包页面（如首页）通过导航跳转到分包中的页面（如商品列表页）时，小程序会自动加载对应的分包。例如，在首页的index.js文件中，通过wx.navigateTo函数跳转到商品列表页：

     Page({toProductList: function () {wx.navigateTo({url: '/subpackages/product/pages/list/list'});}
     });
     

     • 当执行这个跳转操作时，小程序会检查商品展示分包是否已经加载，如果没有加载，则会先加载该分包，然后再打开商品列表页。

   • 分包中的资源引用

     • 在分包页面中引用资源（如图片、样式文件等）时，相对路径是相对于分包的根目录的。例如，在商品详情页detail.wxml中引用一张位于分包目录下的图片：

     <image src="images/product_detail.jpg" mode="aspectFit"></image>
     

     • 这里的images/product_detail.jpg是相对于subpackages/product/这个分包根目录下的images/文件夹的路径。

   • 分包大小限制和注意事项

     • 每个分包大小限制为2MB。在开发过程中，要注意控制分包的大小，避免超过限制。同时，主包和分包之间也可以共享一些公共的资源和代码。例如，可以将一些通用的工具函数、自定义组件等放在主包中，在分包中通过合适的方式进行引用，以减少代码冗余。

技术细节（压缩处理）

以下是一个更详细的微信小程序项目压缩实例，涵盖了对代码（JavaScript、WXML、WXSS）以及图片资源等多方面的压缩操作：

一、准备工作

确保已经安装好微信小程序开发环境（微信开发者工具）以及 Node.js 环境，因为我们会借助一些基于 Node.js 的工具来进行压缩。

二、JavaScript 代码压缩

1. 安装 UglifyJS
   在命令行中，进入小程序项目的根目录，执行以下命令安装 UglifyJS 工具（用于压缩 JavaScript 代码）：

npm install uglify-js -g

2. 创建压缩脚本文件
   在项目根目录下创建一个名为 compress.js 的脚本文件，内容如下：

const fs = require('fs');
const uglify = require('uglify-js');
const path = require('path');// 压缩单个 JavaScript 文件的函数
function compressJsFile(filePath) {const content = fs.readFileSync(filePath, 'utf8');const compressed = uglify.minify(content).code;fs.writeFileSync(filePath, compressed);
}// 压缩 app.js 文件
compressJsFile('app.js');// 遍历 pages 目录下所有页面的 js 文件并压缩
const pagesDir = 'pages';
const pageFolders = fs.readdirSync(pagesDir);
pageFolders.forEach((pageFolder) => {const pageJsPath = path.join(pagesDir, pageFolder, pageFolder + '.js');if (fs.existsSync(pageJsPath)) {compressJsFile(pageJsPath);}
});

3. 执行压缩脚本
   在命令行中，同样在项目根目录下，执行以下命令来运行压缩脚本：

node compress.js

这样就完成了对小程序中所有 JavaScript 文件的压缩，去除了代码中的多余空格、注释以及进行了变量名等的混淆（在一定程度上减小了代码体积）。

三、WXML 文件优化（精简结构）

虽然 WXML 文件不像 JavaScript 那样有专门的压缩工具进行大幅度压缩，但可以手动优化来使其更紧凑。

例如，删除多余的空行和空格，让标签之间的排版更紧密。比如原 index.wxml 文件内容如下：

<view><text>这是一段文本</text></view>

可以优化为：

<view><text>这是一段文本</text></view>

对各个页面的 wxml 文件都进行类似的手动精简操作，在不影响功能和语法的前提下，尽量减少文件的大小。

四、WXSS 文件优化

1. 合并相同样式规则
   可以查看不同页面或者全局的 wxss 文件中是否有重复定义的样式规则，将它们进行合并。

例如，在 app.wxss 中定义了：

.text-style {color: #333;font-size: 16px;
}

在 pages/index/index.wxss 中又重复定义了相同的样式类：

.text-style {color: #333;font-size: 16px;
}

可以删除 pages/index/index.wxss 中重复的 .text-style 定义，让样式只在 app.wxss 中统一管理（如果该样式是全局通用的话）。

2. 去除不必要的注释
   将 wxss 文件中开发过程中添加的注释去除，精简文件内容。

五、图片资源压缩

1. 使用在线图片压缩工具
   可以选择如 TinyPNG（https://tinypng.com/）这样的在线图片压缩平台。将小程序项目中用到的图片（通常在 images 目录或者各个页面相关的图片文件夹中）上传到该平台，下载压缩后的图片，然后替换原项目中的图片文件。

2. 使用图像编辑软件
   如果安装了 Photoshop 等图像编辑软件，也可以通过软件的“存储为 web 所用格式”等功能来调整图片的质量、分辨率等参数，以减小图片的文件大小，同时尽量保持图片的视觉效果可接受。

六、检查与验证

1. 本地编译运行
   在微信开发者工具中重新打开小程序项目，点击“编译”按钮，查看小程序是否能正常编译运行。如果出现报错，根据错误提示检查是哪个文件在压缩过程中出现了问题，比如语法错误、资源引用错误等，然后针对性地进行修复。

2. 功能测试
   对小程序的各个功能进行全面测试，确保压缩操作没有影响到小程序原本的功能逻辑，如页面跳转是否正常、数据交互是否正确、用户交互操作是否响应等。

经过以上步骤，就完成了一个微信小程序项目的压缩实例操作，之后可以按照常规的流程将压缩后的项目打包成 .zip 文件，上传到微信小程序后台进行部署、审核和发布了。

技术细节（探讨小程序压缩后解压发布过程）

1. 微信小程序后台处理流程概述

   • 微信小程序后台在接收到上传的.zip文件后，会进行一系列自动化的处理流程。它会先将.zip文件解压到一个专门用于构建和部署小程序的服务器环境中。这个环境类似于一个沙箱，用于隔离不同小程序的构建过程。

2. 代码解析与构建阶段

   • 文件系统操作：解压后的小程序文件会按照其原有的目录结构放置在服务器的文件系统中。微信小程序的构建系统会读取app.json文件，这是小程序配置的核心文件。通过app.json，系统能够识别小程序的页面路径、窗口配置、使用的插件等重要信息。例如，根据app.json中的"pages"字段，构建系统可以确定哪些文件是小程序的页面文件，像"pages/index/index"这样的路径对应的index.js、index.wxml和index.wxss文件会被识别为首页相关的文件。
   • 模板编译（针对WXML）：对于wxml文件，构建系统会将其编译为微信小程序运行环境能够理解的视图模板格式。这个过程类似于将类似于HTML的wxml标签语言转换为一种内部的视图表示形式，以便在小程序的渲染引擎中高效地渲染。例如，wxml文件中的数据绑定语法（如{{variable}}）会被解析，以便在运行时能够正确地将数据显示在视图上。
   • 样式处理（针对WXSS）：wxss文件会被处理，构建系统会解析其中的样式规则，并将其应用到对应的wxml视图元素上。同时，它会处理样式的继承、优先级等问题。例如，如果在app.wxss中定义了全局的字体大小，而在某个页面的wxss文件中又定义了特定元素的字体大小，系统会根据CSS（微信小程序的样式规则基本基于CSS）的优先级规则来确定最终应用到元素上的样式。
   • JavaScript代码处理：小程序中的js文件会被传递给JavaScript引擎进行处理。对于压缩后的js文件，引擎会进行解析和执行。在这个过程中，引擎会处理模块导入（如果有）、函数定义和调用等操作。例如，如果app.js中有全局的应用生命周期函数（如onLaunch、onShow等），这些函数会被注册，以便在小程序相应的生命周期阶段被触发。同时，页面js文件中的数据绑定逻辑、事件处理函数等也会被解析，使得小程序能够正确地响应用户的操作。

3. 挂载与部署到运行环境

   • 资源整合与挂载：在完成代码解析和构建后，小程序的所有资源（包括编译后的视图模板、样式和JavaScript代码）会被挂载到微信小程序的运行环境中。这个运行环境是一个基于微信客户端的轻量级浏览器环境，它提供了小程序所需的各种API（如获取用户信息、访问本地存储等）。小程序的页面会被挂载到一个虚拟的页面栈中，根据用户的操作（如导航、返回等），页面会在栈中进行入栈和出栈操作。例如，当用户打开小程序的首页，首页相关的资源（视图、样式和代码）就会被加载并显示在屏幕上，此时首页对应的页面就处于页面栈的顶部。
   • 运行时优化与缓存机制：为了提高小程序的运行效率，微信小程序运行环境还会采用一些优化措施。例如，对于一些常用的资源（如公共的样式文件、工具函数等）会进行缓存。当用户再次访问小程序或者在小程序内部进行页面跳转时，如果涉及到已经缓存的资源，就可以直接从缓存中获取，减少加载时间。同时，运行环境会对小程序的性能进行监控，例如检测页面的加载时间、内存占用等指标，以便及时发现和解决可能出现的性能问题。