电子商务网站建设与实践,品牌营销的重要性,网络ui设计培训班,腾讯快速建站平台文章目录 微信小程序开发应用 实例小程序生命周期 以及 各生命周期应用实例小程序图片 展示方案 小程序打包应用方案技术细节#xff08;分包应用实例#xff09;技术细节#xff08;压缩处理#xff09;一、准备工作二、JavaScript 代码压缩三、WXML 文件优化#xff08… 文章目录 微信小程序开发应用 实例小程序生命周期 以及 各生命周期应用实例小程序图片 展示方案 小程序打包应用方案技术细节分包应用实例技术细节压缩处理一、准备工作二、JavaScript 代码压缩三、WXML 文件优化精简结构四、WXSS 文件优化五、图片资源压缩六、检查与验证 技术细节探讨小程序压缩后解压发布过程 微信小程序开发应用 实例
以下是一个简单的待办事项列表小程序。
一、创建项目
首先在微信开发者工具中创建一个新的小程序项目。你需要填写项目名称、目录等基本信息。选择一个合适的模板可以选择“空白模板”开始。
二、项目结构和文件说明 app.js 这是小程序的全局逻辑文件。它用于控制小程序的生命周期例如小程序的初始化onLaunch、显示onShow和隐藏onHide等操作。示例代码 App({onLaunch: function () {// 小程序初始化时执行的操作比如获取用户信息等},globalData: {// 可以在这里定义全局变量供各个页面共享userInfo: null}
});app.json 这个文件用于配置小程序的全局设置如页面路径、窗口样式等。例如配置页面路径 {pages:[pages/index/index,pages/logs/logs],window:{backgroundTextStyle: light,navigationBarBackgroundColor: #fff,navigationBarTitleText: 待办事项,navigationBarTextStyle: black}
}app.wxss 这是小程序的全局样式文件。可以在这里定义一些通用的样式如字体、颜色等。例如 /* 全局字体大小设置 */
body {font - size: 16px;
}页面文件以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 classcontainerinput placeholder添加待办事项 bindinputaddTodo /view wx:for{{todoList}} wx:keyindextext{{item}}/text/view
/viewindex.wxss 用于定义页面的样式只作用于当前页面。例如 .container {padding: 20px;
}
input {border: 1px solid #ccc;padding: 10px;margin - bottom: 10px;
}
view {padding: 10px;border - bottom: 1px solid #eee;
}三、功能实现
添加待办事项功能 在index.js文件中定义了addTodo函数来处理添加待办事项的操作。当用户在输入框中输入内容并触发输入事件通过bindinput绑定时addTodo函数会获取输入框的值。如果值不为空就将其添加到todoList数组中。然后通过this.setData方法更新数据这会导致页面重新渲染新的待办事项就会显示在列表中。 列表显示功能 在index.wxml文件中使用wx:for指令来循环遍历todoList数组。wx:key属性用于提高列表渲染的性能它的值应该是一个唯一标识每个列表项的字符串。对于数组中的每个元素会创建一个text标签来显示待办事项的内容。
这只是一个简单的微信小程序实例你可以根据实际需求扩展功能如添加删除待办事项功能、分类功能、提醒功能等。
小程序生命周期 以及 各生命周期应用实例 小程序生命周期概述 微信小程序的生命周期是指小程序从创建到销毁的整个过程包括应用生命周期和页面生命周期。应用生命周期主要涉及小程序的启动、显示、隐藏和销毁等阶段而页面生命周期则侧重于单个页面的加载、初次渲染、显示、隐藏和卸载等操作。 应用生命周期 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);}
});页面生命周期 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();}
});小程序图片 展示方案 小程序打包应用方案 微信小程序图片大小要求 尺寸方面微信小程序本身对图片尺寸没有严格固定的要求。但为了适配不同的设备屏幕如iPhone、安卓手机等各种屏幕尺寸一般建议提供多种尺寸的图片或者使用响应式设计。例如对于一些展示类图片可以根据常见的屏幕宽度如375px、414px等按比例设计合适的尺寸。文件大小方面为了保证小程序的加载速度图片文件大小应该尽量小。虽然没有绝对的限制但过大的图片文件会导致小程序加载缓慢。通常对于普通的图标类图片文件大小最好控制在几KB到几十KB之间对于高质量的产品图片等尽量将其压缩到几百KB以内。可以使用图像编辑工具如Photoshop或者在线图像压缩工具如TinyPNG来压缩图片。 广告涉及图片资源量大的展示方案 懒加载技术对于广告图片尤其是在页面较长且包含多个广告图片的情况下采用懒加载是一种有效的方法。懒加载是指当图片进入浏览器的可视区域时才加载图片而不是一次性加载所有图片。在微信小程序中可以通过监听滚动事件判断图片是否进入可视区域然后动态加载图片。例如在wxml文件中有多个广告图片 view wx:for{{adImages}} wx:keyindeximage wx:if{{isInView[index]}} src{{adImages[index].src}} modeaspectFit/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地址来实现。 微信小程序打包大小限制及优化方案 打包大小限制微信小程序代码包总大小限制为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文件或者自定义组件减少代码冗余。
技术细节分包应用实例 分包的概念和优势 微信小程序分包是一种优化小程序加载性能的策略。当小程序功能复杂、代码和资源文件较多时将整个小程序划分为多个分包主包只包含小程序启动和展示首页所必需的资源和代码其他功能模块放在分包中。用户在使用小程序时主包会首先加载当需要访问分包中的功能时再加载相应的分包。这样可以减少小程序初始加载的时间和资源占用提高用户体验。 创建分包实例步骤 项目结构规划 假设我们要开发一个电商小程序包括首页、商品列表页、商品详情页、购物车页、个人中心页等功能。我们可以将首页和购物车页放在主包中因为这两个页面是用户经常访问的基本功能页面。将商品列表页和商品详情页划分为一个分包用于商品展示相关功能个人中心页划分为另一个分包用于用户个人信息相关功能。项目结构大致如下 pages/主包 index/首页 index.jsindex.wxmlindex.wxss cart/购物车页 cart.jscart.wxmlcart.wxss subpackages/ product/商品展示分包 pages/ list/商品列表页 list.jslist.wxmllist.wxss detail/商品详情页 detail.jsdetail.wxmldetail.wxss user/用户个人信息分包 pages/ profile/个人中心页 profile.jsprofile.wxmlprofile.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 srcimages/product_detail.jpg modeaspectFit/image这里的images/product_detail.jpg是相对于subpackages/product/这个分包根目录下的images/文件夹的路径。 分包大小限制和注意事项 每个分包大小限制为2MB。在开发过程中要注意控制分包的大小避免超过限制。同时主包和分包之间也可以共享一些公共的资源和代码。例如可以将一些通用的工具函数、自定义组件等放在主包中在分包中通过合适的方式进行引用以减少代码冗余。
技术细节压缩处理
以下是一个更详细的微信小程序项目压缩实例涵盖了对代码JavaScript、WXML、WXSS以及图片资源等多方面的压缩操作
一、准备工作
确保已经安装好微信小程序开发环境微信开发者工具以及 Node.js 环境因为我们会借助一些基于 Node.js 的工具来进行压缩。
二、JavaScript 代码压缩
安装 UglifyJS 在命令行中进入小程序项目的根目录执行以下命令安装 UglifyJS 工具用于压缩 JavaScript 代码
npm install uglify-js -g创建压缩脚本文件 在项目根目录下创建一个名为 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);}
});执行压缩脚本 在命令行中同样在项目根目录下执行以下命令来运行压缩脚本
node compress.js这样就完成了对小程序中所有 JavaScript 文件的压缩去除了代码中的多余空格、注释以及进行了变量名等的混淆在一定程度上减小了代码体积。
三、WXML 文件优化精简结构
虽然 WXML 文件不像 JavaScript 那样有专门的压缩工具进行大幅度压缩但可以手动优化来使其更紧凑。
例如删除多余的空行和空格让标签之间的排版更紧密。比如原 index.wxml 文件内容如下
viewtext这是一段文本/text/view可以优化为
viewtext这是一段文本/text/view对各个页面的 wxml 文件都进行类似的手动精简操作在不影响功能和语法的前提下尽量减少文件的大小。
四、WXSS 文件优化
合并相同样式规则 可以查看不同页面或者全局的 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 中统一管理如果该样式是全局通用的话。
去除不必要的注释 将 wxss 文件中开发过程中添加的注释去除精简文件内容。
五、图片资源压缩 使用在线图片压缩工具 可以选择如 TinyPNGhttps://tinypng.com/这样的在线图片压缩平台。将小程序项目中用到的图片通常在 images 目录或者各个页面相关的图片文件夹中上传到该平台下载压缩后的图片然后替换原项目中的图片文件。 使用图像编辑软件 如果安装了 Photoshop 等图像编辑软件也可以通过软件的“存储为 web 所用格式”等功能来调整图片的质量、分辨率等参数以减小图片的文件大小同时尽量保持图片的视觉效果可接受。
六、检查与验证 本地编译运行 在微信开发者工具中重新打开小程序项目点击“编译”按钮查看小程序是否能正常编译运行。如果出现报错根据错误提示检查是哪个文件在压缩过程中出现了问题比如语法错误、资源引用错误等然后针对性地进行修复。 功能测试 对小程序的各个功能进行全面测试确保压缩操作没有影响到小程序原本的功能逻辑如页面跳转是否正常、数据交互是否正确、用户交互操作是否响应等。
经过以上步骤就完成了一个微信小程序项目的压缩实例操作之后可以按照常规的流程将压缩后的项目打包成 .zip 文件上传到微信小程序后台进行部署、审核和发布了。
技术细节探讨小程序压缩后解压发布过程 微信小程序后台处理流程概述 微信小程序后台在接收到上传的.zip文件后会进行一系列自动化的处理流程。它会先将.zip文件解压到一个专门用于构建和部署小程序的服务器环境中。这个环境类似于一个沙箱用于隔离不同小程序的构建过程。 代码解析与构建阶段 文件系统操作解压后的小程序文件会按照其原有的目录结构放置在服务器的文件系统中。微信小程序的构建系统会读取app.json文件这是小程序配置的核心文件。通过app.json系统能够识别小程序的页面路径、窗口配置、使用的插件等重要信息。例如根据app.json中的pages字段构建系统可以确定哪些文件是小程序的页面文件像pages/index/index这样的路径对应的index.js、index.wxml和index.wxss文件会被识别为首页相关的文件。模板编译针对WXML对于wxml文件构建系统会将其编译为微信小程序运行环境能够理解的视图模板格式。这个过程类似于将类似于HTML的wxml标签语言转换为一种内部的视图表示形式以便在小程序的渲染引擎中高效地渲染。例如wxml文件中的数据绑定语法如{{variable}}会被解析以便在运行时能够正确地将数据显示在视图上。样式处理针对WXSSwxss文件会被处理构建系统会解析其中的样式规则并将其应用到对应的wxml视图元素上。同时它会处理样式的继承、优先级等问题。例如如果在app.wxss中定义了全局的字体大小而在某个页面的wxss文件中又定义了特定元素的字体大小系统会根据CSS微信小程序的样式规则基本基于CSS的优先级规则来确定最终应用到元素上的样式。JavaScript代码处理小程序中的js文件会被传递给JavaScript引擎进行处理。对于压缩后的js文件引擎会进行解析和执行。在这个过程中引擎会处理模块导入如果有、函数定义和调用等操作。例如如果app.js中有全局的应用生命周期函数如onLaunch、onShow等这些函数会被注册以便在小程序相应的生命周期阶段被触发。同时页面js文件中的数据绑定逻辑、事件处理函数等也会被解析使得小程序能够正确地响应用户的操作。 挂载与部署到运行环境 资源整合与挂载在完成代码解析和构建后小程序的所有资源包括编译后的视图模板、样式和JavaScript代码会被挂载到微信小程序的运行环境中。这个运行环境是一个基于微信客户端的轻量级浏览器环境它提供了小程序所需的各种API如获取用户信息、访问本地存储等。小程序的页面会被挂载到一个虚拟的页面栈中根据用户的操作如导航、返回等页面会在栈中进行入栈和出栈操作。例如当用户打开小程序的首页首页相关的资源视图、样式和代码就会被加载并显示在屏幕上此时首页对应的页面就处于页面栈的顶部。运行时优化与缓存机制为了提高小程序的运行效率微信小程序运行环境还会采用一些优化措施。例如对于一些常用的资源如公共的样式文件、工具函数等会进行缓存。当用户再次访问小程序或者在小程序内部进行页面跳转时如果涉及到已经缓存的资源就可以直接从缓存中获取减少加载时间。同时运行环境会对小程序的性能进行监控例如检测页面的加载时间、内存占用等指标以便及时发现和解决可能出现的性能问题。
