微信小程序开发图解案例教程课件 第2章 微信小程序框架分析

第2章微信小程序框架分析在进行微信小程序开发前，必须先理解微信小程序框架。微信小程序框架可以让开发者在微信中通过简单、高效的方式开发具有原生App体验的服务。微信小程序框架分为逻辑层和视图层，逻辑层用来处理业务逻辑，而视图层用来渲染页面。视图层描述语言WXML和视图样式WXSS，再加上逻辑层语言JavaScript和配置文件JSON，一同构筑起微信小程序框架。本章我们一起来分析微信小程序的框架。本章导读Thechapter’sintroduction目录导航2.2微信小程序目录结构介绍2.4微信小程序注册页面的使用2.5微信小程序模块化2.6微信小程序组件化2.3微信小程序注册程序的应用2.7微信小程序运行环境2.8沙场大练兵：制作“猫眼电影”tabBar标签导航2.9小结2.1微信小程序模板介绍2.1微信小程序模板介绍开发者选择模板后，微信小程序会根据所选模板快速搭建小程序主体框架，之后可对业务代码进行个性化调整，实现定制化功能。微信小程序模板主要有两类：微信云开发模板（选中“微信云开发”单选按钮）和非云开发模板（选中“不使用云服务”单选按钮）。在这两类模板里，有官方提供的模板，也有第三方提供的模板。微信云开发模板非云开发模板目录导航2.4微信小程序注册页面的使用2.5微信小程序模块化2.6微信小程序组件化2.3微信小程序注册程序的应用2.7微信小程序运行环境2.8沙场大练兵：制作“猫眼电影”tabBar标签导航2.9小结2.1微信小程序模板介绍2.2微信小程序目录结构介绍2.2微信小程序目录结构介绍微信小程序目录结构分为云开发项目目录结构和非云开发项目目录结构，其中前者分为两个部分——框架全局文件、框架页面文件，后者分为3个部分——框架全局文件、工具类文件和框架页面文件。目录结构（云开发项目）目录结构（非云开发项目）2.2.1框架全局文件框架全局文件必须放在项目的根目录中。框架全局文件对所有页面都有效，如下表所示。框架全局文件文件作用app.js装载微信小程序全局逻辑（JavaScript）的核心文件，用于定义全局数据和函数app.json装载微信小程序公共配置app.wxss装载微信小程序公共样式project.config.json装载微信小程序项目个性化配置project.private.config.json项目私有配置文件。此文件中的内容将覆盖project.config.json中的相同字段。项目的改动优先同步到此文件中package.json模块化的配置文件或者包管理文件sitemap.json配置微信小程序及其页面是否允许被微信索引.eslintrc.jsESLint的工具的配置文件，其作用是使代码一致并避免错误uploadCloudFunction.sh云开发脚本2.2.1框架全局文件1.app.js微信小程序逻辑文件app.js文件用来定义全局数据和函数的使用，可以指定微信小程序的生命周期函数。生命周期函数可以理解为微信小程序自己定义的函数，如onLaunch（监听小程序初始化）、onShow（监听小程序显示）、onHide（监听小程序隐藏）等。不同阶段不同场景可以使用不同的生命周期函数。app.js文件中还可以定义一些全局函数和数据，其他页面引用app.js文件后就可以直接使用，如图所示。2.2.1框架全局文件2.app.json微信小程序公共设置文件app.json文件可以对常用的功能进行设置：如配置页面路径、默认启动页路径、窗口表现、tab标签导航、网络超时、debug模式、permission接口权限等。app.json文件如下所示。{

"pages":

[

"pages/index/index",

"pages/logs/logs"

],

"entryPagePath":

"pages/index/index",

"window":

{

"backgroundTextStyle":

"light",

"navigationBarBackgroundColor":

"#ffffff",

"navigationBarTitleText":

"Weixin",

"navigationBarTextStyle":

"black",

"backgroundColor":

"#ffffff",

"enablePullDownRefresh":

"false"

},

"tabBar":

{

"selectedColor":

"#000000",

"backgroundColor":

"#ffffff",

"borderStyle":

"black",

"list":

[{

"pagePath":

"pages/index/index",

"text":

"首页",

"iconPath":

"iconPath",

"selectedIconPath":

"selectedIconPath"

},{

"pagePath":

"pages/logs/logs",

"text":

"日志",

"iconPath":

"iconPath",

"selectedIconPath":

"selectedIconPath"

}]

},

"networkTimeout":

{

"request":

20000,

"connectSocket":

20000,

"uploadFile":

20000,

"downloadFile":

20000

},

"debug":

true,

"style":

"v2",

"sitemapLocation":

"sitemap.json",

"permission":{"scope.userLocation":{"desc":"你的位置信息将用于微信小程序位置接口的效果展示"}}}2.2.1框架全局文件【例2-1】配置页面路径以上代码中定义了一个数组，用于存放多个页面的访问路径，这是进行页面访问的必要条件。如果没有配置页面访问路径，页面被访问时就会报错。在此配置页面访问路径后，微信小程序会自动在框架页面文件部分自动创建对应的文件夹及文件，无须手动添加，如图所示。{

"pages":

[

"pages/index/index",

"pages/logs/logs"

]，}自动创建页面2.2.1框架全局文件【例2-2】配置默认启动页路径。entryPagePath用来配置微信小程序默认启动页路径，也就是微信小程序的首页路径。只有pages数组中存在的路径，才可以配置为默认启动页路径。{

"entryPagePath":

"pages/index/index"}【例2-3】配置窗口表现（以下代码用于配置微信小程序的导航栏、标题和窗口背景色）。{

"window":

{"navigationBarBackgroundColor":"#ffffff","navigationBarTitleText":"配置窗口表现","navigationBarTextStyle":"black","backgroundTextStyle":"light","backgroundColor":"#259b24","enablePullDownRefresh":true}}配置窗口表现2.2.1框架全局文件【例2-4】配置tabBar标签导航。{

"tabBar":

{

"selectedColor":

"#000000",

"backgroundColor":

"#ffffff",

"borderStyle":

"black",

"list":

[{

"pagePath":

"pages/index/index",

"text":

"首页",

"iconPath":

"iconPath",

"selectedIconPath":

"selectedIconPath"

},{

"pagePath":

"pages/logs/logs",

"text":

"日志",

"iconPath":

"iconPath",

"selectedIconPath":

"selectedIconPath"

}]

}}猫眼电影ApptabBar导航猫眼电影微信小程序的tabBar导航配置2.2.1框架全局文件【例2-5】配置网络超时。可以配置网络请求、WebSocket连接、文件上传、文件下载用于配置的最大请求时间（即超时时间），超过这个时间，则不再请求。

{

"networkTimeout":

{

"request":

20000,

"connectSocket":

20000,

"uploadFile":

20000,

"downloadFile":

20000

}

}{

"debug":

true

}【例2-6】配置debug模式。配置debug模式可方便微信小程序开发者调试程序，右图所示分别为没有开启debug模式和开启debug模式时的调试信息。2.2.1框架全局文件【例2-7】配置permission接口权限。permission用于配置服务中需要经过用户授权同意才能调用的接口。这些接口按使用范围分成多个scope，用户选择对scope进行授权，当授权给一个scope之后，其对应的所有接口都可以直接使用。{"pages":["pages/index/index"],"permission":{"scope.userLocation":{"desc":"你的位置信息将用于微信小程序位置接口的效果展示"}}}2.2.1框架全局文件3.app.wxss微信小程序公共样式表app.wxss文件对CSS样式进行了扩展。其基本语法与CSS保持一致，支持类选择器和行内样式等常见写法并兼容大多数CSS样式属性。

app.wxss文件具有独特的全局样式特性：在该文件中定义的样式将作用于所有页面。当某个页面中存在与全局样式同名的class时，全局样式会被页面内定义的样式覆盖，从而实现局部定制的效果。app.wxss文件2.2.1框架全局文件4.project.config.json微信小程序项目个性化配置在使用微信小程序开发者工具时，开发者往往会依据各自喜好做一些个性化配置，例如页面颜色、编译配置等。当使用另外一台计算机重新安装微信小程序开发者工具的时候，需要重新配置上述个性化配置。微信小程序开发者工具在每个项目的根目录生成了一个project.config.json文件，开发者所做的任何配置都会写入这个文件。重新安装工具或者换计算机工作时，只需载入同一个项目的代码包，微信小程序开发者工具就会自动恢复当时的个性化配置，其中包括编辑器的颜色、代码上传时自动压缩等一系列选项。2.2.1框架全局文件5.sitemap.json微信小程序及其页面是否允许被微信索引微信会自动收集微信小程序页面信息并进行分析，根据分析结果向用户进行推送。如果没有sitemap.json文件，则默认为所有页面都允许被索引。配置示例如下。{"rules":[{"action":"allow","page":"path/to/page","params":["a","b"],"matching":"exact"},{"action":"disallow","page":"path/to/page"}]}matching匹配规则说明如下。（1）exact：当小程序页面的参数列表等于params时，规则命中索引。（2）inclusive：当小程序页面的参数列表包含params时，规则命中索引。（3）exclusive：当小程序页面的参数列表与params交集为空时，规则命中索引。（4）partial：当小程序页面的参数列表与params交集不为空时，规则命中索引。索引结果如下。（1）path/to/page?a=1&b=2→优先索引。（2）path/to/page→不被索引。（3）path/to/page?a=1→不被索引。（4）path/to/page?a=1&b=2&c=3→不被索引。（5）其他页面都会被索引。2.2.2工具类文件在微信小程序框架目录里有一个utils文件夹，它用来存放工具栏的JavaScript函数，如日期格式化的函数、时间格式化的函数等常用函数。下图所示为时间格式化工具类。2.2.3框架页面文件微信小程序的框架页面文件都放置在pages文件夹下面，如图所示。框架页面文件文件类型是否必填说明JS是页面逻辑（JavaScript）文件JSON否页面配置文件WXML是页面结构文件WXS否微信小程序脚本语言WXSS否页面样式表框架页面文件2.2.3框架页面文件WXML是一套标签语言，类似于HTML，主要用于构建微信小程序的前端视图，支持类似HTML的标签、数据绑定、列表渲染、事件绑定、条件渲染、模板引用及数据传递。通过双花括号绑定数据，<block>、<template>及指令实现列表与条件渲染，bind/catch前缀绑定事件，<import>/<include>引用模板，data-*传递数据，增强页面动态性和复用性，最终渲染成用户可见的界面。<!--index.wxml--><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"><viewclass="userinfo"><blockwx:if="{{canIUseNicknameComp&&!hasUserInfo}}"><buttonclass="avatar-wrapper"open-type="chooseAvatar"bind:chooseavatar="onChooseAvatar">WXML示例代码如下所示。1．WXML2.2.3框架页面文件<imageclass="avatar"src="{{userInfo.avatarUrl}}"></image></button><viewclass="nickname-wrapper"><textclass="nickname-label">昵称</text><inputtype="nickname"class="nickname-input"placeholder="请输入昵称"bind:change="onInputChange"/></view></block><blockwx:elif="{{!hasUserInfo}}"><buttonwx:if="{{canIUseGetUserProfile}}"bindtap="getUserProfile">获取头像昵称</button><viewwx:else>请使用2.10.4及以上版本基础库</view></block><blockwx:else><imagebindtap="bindViewTap"class="userinfo-avatar"src="{{userInfo.avatarUrl}}"mode="cover"></image><textclass="userinfo-nickname">{{userInfo.nickName}}</text></block></view><viewclass="usermotto"><textclass="user-motto">{{motto}}</text></view></view></scroll-view>2.2.3框架页面文件微信小程序的逻辑层使用的是一种轻量级的JavaScript运行环境，通常称之为微信小程序的运行时环境。它与浏览器的JavaScript运行环境有所不同，但语法基本相同。//index.jsconstdefaultAvatarUrl=''Page({data:{motto:'HelloWorld',userInfo:{avatarUrl:defaultAvatarUrl,nickName:'',},hasUserInfo:false,canIUseGetUserProfile:wx.canIUse('getUserProfile'),canIUseNicknameComp:wx.canIUse('input.type.nickname'),},

JavaScript脚本语言示例代码如下所示。2．JavaScript脚本语言bindViewTap(){//事件处理函数wx.navigateTo({url:'../logs/logs'})},onChooseAvatar(e){//监听选择头像函数const{avatarUrl}=e.detailconst{nickName}=this.data.userInfothis.setData({"userInfo.avatarUrl":avatarUrl,hasUserInfo:nickName&&avatarUrl&&avatarUrl!==defaultAvatarUrl,})},2.2.3框架页面文件onInputChange(e){//监听输入变化函数constnickName=e.detail.valueconst{avatarUrl}=this.data.userInfothis.setData({"userInfo.nickName":nickName,hasUserInfo:nickName&&avatarUrl&&avatarUrl!==defaultAvatarUrl,})},getUserProfile(e){//获取用户信息函数//推荐使用wx.getUserProfile获取用户信息。开发者每次通过该接口获取用户个人信息均需用户确认。开发者应妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc:'展示用户信息',//声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success:(res)=>{console.log(res)this.setData({userInfo:res.userInfo,hasUserInfo:true})}})},})2.2.3框架页面文件WXSS是微信小程序中使用的一种样式语言，用于控制微信小程序页面的外观和布局。类似于网页开发中的CSS，WXSS允许开发者通过定义样式规则来控制微信小程序页面的外观，包括字体、颜色、背景、边距、尺寸等。WXSS示例代码如右所示。/**index.wxss**/.userinfo

{

display:

flex;

flex-direction:

column;

align-items:

center;

color:

#aaa;}.userinfo-avatar

{

overflow:

hidden;

width:

128rpx;

height:

128rpx;

margin:

20rpx;

border-radius:

50%;}.usermotto

{

margin-top:

200px;}3．WXSS样式语言2.2.3框架页面文件JSON是微信小程序的页面配置文件，用于定义微信小程序的配置信息，可以通过app.json文件定义微信小程序的全局配置，也可以通过页面的JSON配置文件定义单个页面的配置，包括页面的标题、导航栏样式、下拉刷新等。页面的JSON配置文件示例代码如下所示。{"navigationBarTitleText":"详情页标题","navigationBarBackgroundColor":"#fff","navigationBarTextStyle":"black","enablePullDownRefresh":true}4．JSON配置文件2.2.3框架页面文件WXS是微信小程序中的一种脚本语言，类似于JavaScript，用于在微信小程序中处理数据和逻辑。WXS主要用于微信小程序的模板，可以在模板中进行数据绑定、数据计算、条件判断、循环和模块化等操作，以及处理与页面逻辑的交互。WXS脚本语言示例代码如下所示。//WXS中的数据计算vara=10;varb=20;varsum=a+b;varstr="Hello";varresult=str+"World";module.exports.sum=sum;module.exports.result=result;5．WXS脚本语言目录导航2.4微信小程序注册页面的使用2.5微信小程序模块化2.6微信小程序组件化2.7微信小程序运行环境2.8沙场大练兵：制作“猫眼电影”tabBar标签导航2.9小结2.1微信小程序模板介绍2.2微信小程序目录结构介绍2.3微信小程序注册程序的应用2.3微信小程序注册程序的应用app.js文件不光可以定义全局函数和数据，还可以注册小程序。用户可以在App()函数里完成小程序的注册并指定其生命周期函数。下表所示为生命周期函数的属性。属性类型描述触发时机onLaunchfunction监听小程序初始当小程序初始化完成时，会触发onLaunch（全局只触发一次）onShowfunction监听小程序显示当小程序启动，或从后台进入前台显示时，会触发onShowonHidefunction监听小程序隐藏当小程序从前台进入后台时，会触发onHideonErrorfunction错误监听函数当小程序发生脚本错误，或者API调用失败时，会触发onError并附带错误信息onPageNotFoundfunction页面不存在监听函数当小程序中出现要打开的页面不存在的情况时，会附带页面信息回调该函数onThemeChangefunction监听系统主题变化函数系统主题变化时触发该函数其他函数any

开发者可以添加任意的函数或数据到Object参数中。用this可以使用微信小程序的生命周期函数2.3微信小程序注册程序的应用示例代码如下。App({onLaunch:function(){//当微信小程序初始化时执行一些操作},onShow:function(){//当小程序显示时执行一些操作},onHide:function(){//当微信小程序隐藏时执行一些操作},onError:function(msg){console.log(msg)},onPageNotFound:function(msg){console.log(msg)},onThemeChange:function(msg){console.log(msg)},globalData:'Iamglobaldata'})2.3微信小程序注册程序的应用可以在页面里调用app.js文件全局数据。在页面的JS文件里，按如下方法就可以调用全局数据globalData。varAppInstance=getApp()console.log(AppInstance.globalData)小程序不仅可以调用全局数据，还可以调用用户自定义的全局函数，但是不能调用生命周期函数。注意：（1）App()必须在app.js文件中注册，且不能注册多个。（2）不要在定义于App()内的函数中调用getApp()，使用this就可以获取App实例。（3）不要在onLaunch小程序初始化完成时调用getCurrentPage()，此时页面还没有生成。（4）通过getApp()获取实例之后，不要私自调用生命周期函数。目录导航2.5微信小程序模块化2.6微信小程序组件化2.7微信小程序运行环境2.8沙场大练兵：制作“猫眼电影”tabBar标签导航2.9小结2.1微信小程序模板介绍2.2微信小程序目录结构介绍2.3微信小程序注册程序的应用2.4微信小程序注册页面的使用2.4.1页面初始化数据data为页面初始化数据。初始化数据将作为页面的第一次渲染。data将会以JSON的形式由逻辑层传至渲染层，所以其数据必须是可以转成JSON的格式：字符串、数字、布尔值、对象或数组。渲染界面可以通过WXML对数据进行绑定。<textclass="user-motto">{{motto}}</text>Page({data:{motto:'HelloWorld',userInfo:{}}})示例代码如下。2.4.2生命周期函数微信小程序在JS文件里定义了生命周期函数，不同的生命周期函数有不同的使用效果。onLoad（页面加载）：一个页面只会调用一次，接收页面参数可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的query。onShow（页面显示）：每次打开页面都会调用一次。onReady（页面初次渲染完成）：一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。对界面的设置（如wx.setNavigationBarTitle）请在onReady之后进行。onHide（页面隐藏）：当调用navigateTo或底部tab切换时调用。onUnload（页面卸载）：当调用redirectTo或navigateBack时触发。onRouteDone（路由动画完成）：当路由动画完成时调用，如wx.navigateTo页面完全推进后或wx.navigateBack页面完全恢复时调用。2.4.3页面相关事件处理函数onPullDownRefresh（下拉刷新事件）：监听用户下拉刷新事件。onReachBottom（上拉触底事件）：可以在app.json文件的window选项中或页面配置中设置触发距离onReachBottomDistance。onPageScroll（页面滚动事件）：监听用户滑动页面事件。onResize（页面尺寸事件）：页面尺寸发生改变的事件。微信小程序定义了以下常用的事件处理函数。Page({onResize(res){res.size.windowWidth //新的显示区域宽度

res.size.windowHeight //新的显示区域高度

}})示例代码如下。2.4.3页面相关事件处理函数onShareAppMessage（用户分享转发）：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。用户点击“转发”按钮的时候会调用此函数。此事件需要返回一个Object参数，用于自定义分享转发内容。Object参数的说明如表所示。字段说明默认值title转发标题当前小程序名称imageUrl自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是5

:

4使用默认截图path转发路径当前页面路径。必须是以/开头的完整路径用户分享转发Object参数说明2.4.3页面相关事件处理函数示例代码如下。Page({onShareAppMessage:function(res){return{title:'自定义分享标题',imageUrl:'自定义图片路径',path:'/page/user?id=123'}}})2.4.3页面相关事件处理函数onShareTimeline（分享到朋友圈事件）：监听用户点击右上角菜单中“分享到朋友圈”按钮的行为，并且自定义分享内容。title：自定义标题，即朋友圈列表页上显示的标题；默认值为当前微信小程序名称。query：自定义页面路径中携带的参数，如path?a=1&b=2中“?”后面的部分。imageUrl：自定义图片路径，可以是本地文件路径或者网络图片路径。onShareTimeline:function(){return{title:'自定义标题',query:{a:1,b:2},imageUrl:'xxx'}}示例代码如下。2.4.3页面相关事件处理函数onAddToFavorites（收藏事件）：监听用户点击右上角菜单中“收藏”按钮的行为，并且自定义收藏内容。Page({onAddToFavorites(res){//web-view页面返回webViewUrlconsole.log('webViewUrl:',res.webViewUrl)return{title:'自定义标题',imageUrl:'图片路径',query:'参数',}}})示例代码如下。2.3.3页面相关事件处理函数点击tabBar页Object参数字段类型说明indexstring被点击的底部标签导航菜单的序号，从0开始pagePathstring被点击的底部标签导航菜单的页面路径textstring被点击的底部标签导航菜单的按钮文字Page({onTabItemTap(item){console.log(item.index)console.log(item.pagePath)console.log(item.text)}})示例代码如下。onTabItemTap（点击tabBar页事件）：当前是tabBar页时，用户点击tabBar时触发。2.4.4页面路由管理页面路由的触发方式及页面生命周期函数如表所示。页面路由方式触发时机路由后生命周期函数路由前生命周期函数初始化小程序打开的第一个页面onLoad，onShow

打开新页面调用APIwx.navigateTo或使用组件<navigatoropen-type="navigate"/>onLoad，onShowonHide页面重定向调用APIwx.redirectTo或使用组件<navigatoropen-type="redirect"/>onLoad，onShowonUnload页面返回调用APIwx.navigateBack或用户按左上角返回按钮onShowonUnload（多层页面返回时每个页面都会按顺序触发onUnload）tab切换调用APIwx.switchTab或使用组件<navigatoropen-type="switchTab"/>或用户切换Tab

重启动调用APIwx.reLaunch或使用组件<navigatoropen-type="reLaunch"/>OnLoad，onShowonUnload2.4.5自定义函数除了初始化数据和生命周期函数，在Page中还可以自定义一些业务处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，Page中自定义的函数就会被执行。<viewbindtap="clickMe">clickme</view>Page({clickMe:function(){console.log('viewtap')}})示例代码如下。2.4.6

setData设值函数Ptotype.setData()设值函数用于将数据从逻辑层发送到视图层，同时改变对应的this.data的值。setData()参数格式：接收一个对象，以key:value的形式表示将this.data中的key对应的值改变成value。示例代码如下。<!--index.wxml--><view>{{text}}</view><buttonbindtap="changeText">Changenormaldata</button><view>{{array[0].text}}</view><buttonbindtap="changeItemInArray">ChangeArraydata</button><view>{{object.text}}</view><buttonbindtap="changeItemInObject">ChangeObjectdata</button><view>{{newField.text}}</view><buttonbindtap="addNewField">Addnewdata</button>//index.jsPage({data:{text:'initdata',array:[{text:'initdata'}],object:{text:'initdata'}},2.3.6

setData设值函数changeText:function(){//this.data.text='changeddata'这种方式赋值不起作用

this.setData({text:'changeddata'})},changeItemInArray:function(){//可以用这种方式动态修改数据

this.setData({'array[0].text':'changeddata'})},changeItemInObject:function(){this.setData({'object.text':'changeddata'});},addNewField:function(){this.setData({'newField.text':'newdata'})}})注意：直接修改this.data无效，不仅无法改变页面的状态，还会造成数据不一致。单次设置的数据不能超过1MB。请尽量避免一次设置过多的数据。不要把data中任何一项的value设为undefined，否则这一项将不被设置并可能遗留一些潜在问题（仅支持设置可JSON化的数据）。目录导航2.6微信小程序组件化2.7微信小程序运行环境2.8沙场大练兵：制作“猫眼电影”tabBar标签导航2.9小结2.1微信小程序模板介绍2.2微信小程序目录结构介绍2.3微信小程序注册程序的应用2.4微信小程序注册页面的使用2.5微信小程序模块化.2.5微信小程序模块化在微信小程序中，可以将代码分割成独立的模块，以提高代码的可维护性和复用性，这称为模块化。//common.jsfunctionsayHello(name){console.log('Hello${name}!')}functionsayGoodbye(name){console.log('Goodbye${name}!')}module.exports.sayHello=sayHelloexports.sayGoodbye=sayGoodbye1．模块导出注意，exports是module.exports的一个导入，因此在模块里随意更改exports的指向会造成未知的错误。推荐采用module.exports来暴露模块接口。在微信小程中，可以使用module.exports导出模块中的变量、函数或对象。导出的内容可以在其他模块中通过require关键字进行导入。示例代码如下所示。2.5微信小程序模块化varcommon=require('common.js')Page({helloMINA:function(){common.sayHello('MINA')},goodbyeMINA:function(){common.sayGoodbye('MINA')}})2．模块导入注意，微信小程序目前不支持直接导入node_modules，开发者使用node_modules的时候，建议复制相关的代码到微信小程序的目录中，或者使用微信小程序支持的npm功能。在微信小程序中，可以使用require关键字导入其他模块导出的内容。示例代码如下所示。2.5微信小程序模块化//pages/index/index.wxs模块的导入varutils=require('../../utils/utils.wxs');console.log(utils.getName());//输出'John'3．模块的相对路径在微信小程序中，可以使用相对路径来导入同一项目中的其他模块。示例代码如下所示。//utils.wxs模块的导出functiongetName(){return'John';}functiongetAge(){return30;}module.exports.getName=getName;module.exports.getAge=getAge;4．模块的组织在微信小程序中，可以将相关的代码组织到一个模块中。示例代码如下所示。目录导航2.7微信小程序运行环境2.8沙场大练兵：制作“猫眼电影”tabBar标签导航2.9小结2.1微信小程序模板介绍2.2微信小程序目录结构介绍2.3微信小程序注册程序的应用2.4微信小程序注册页面的使用2.5微信小程序模块化2.6微信小程序组件化2.6微信小程序组件化微信小程序组件化是指将微信小程序页面中的不同模块拆分成独立的组件，通过组合和复用这些组件来构建微信小程序页面。组件化可以提高微信小程序的开发效率、代码的可维护性和可扩展性。1．基础组件微信小程序视图渲染是在web-view（承载网页的容器）里完成的，如果直接使用HTML，由于HTML有很多标签，比如用于外链跳转的<a>标签，会导致安全问题。为此，微信小程序框架中设计了一套基础组件，在保证安全的同时方便开发者快速搭建自己的页面。以下是一些常用的微信小程序基础组件。视图容器组件（view）：用于在页面中创建一个矩形的视图区域，可用于包裹其他组件，并控制其布局和样式。文本组件（text）：用于显示一段文本内容，支持设置文字的样式，如颜色、大小、字体等。图片组件（image）：用于显示一张图片，支持设置图片的路径、宽度、高度等属性。2.6微信小程序组件化输入框组件（input）：用于接收用户输入的文本，支持设置输入框的类型（如文本输入框、数字输入框、密码输入框等）、默认值、最大长度等属性，并支持监听输入事件。按钮组件（button）：用于创建一个可点击的按钮，支持设置按钮的样式、文本内容和点击事件。列表组件（list）：用于展示一组数据的列表，支持设置列表的布局方式、滚动和下拉刷新等功能。表单组件（form）：用于包裹多个输入组件，通过提交事件可将表单中的数据提交到后台进行处理。选择器组件（picker）：用于提供一些选择的页面，如日期选择、时间选择、地区选择等页面。导航组件（navigator）：用于实现页面之间的跳转，支持跳转到其他页面并传递参数。轮播图组件（swiper）：用于实现图片或其他内容的轮播展示，支持自动轮播、手动滑动、设置点击事件等。媒体组件（audio、video、camera、live-player）：微信小程序还提供了一些与媒体相关的基础组件，如音频、视频、相机和直播播放器，用于实现相关的媒体功能。2.6微信小程序组件化2．自定义组件自定义组件是一种可以在微信小程序中自定义封装和复用的UI组件。在微信小程序中，可以将页面中的一部分功能或UI封装成独立的组件，从而提高代码的复用性、开发效率和可维护性。自定义组件的创建。在微信小程序项目的目录结构中，可以创建一个专门存放自定义组件的目录，一般命名为“components”。然后在该目录下创建一个组件的文件夹，可以以组件的功能来命名文件夹。自定义组件的使用。在使用自定义组件前，首先要在页面的JSON文件中导入组件。需要提供自定义组件的标签名和对应的自定义组件文件路径。自定义组件的属性。可以通过在组件的JSON文件中定义properties字段来定义组件的属性，从而可以在组件的标签中设置和使用这些属性。组件的样式。自定义组件的样式可以通过在组件的WXSS文件中定义样式来实现，这些样式只在组件内部生效，不会影响到组件外部的样式。2.6微信小程序组件化3．第三方组件库微信小程序的第三方组件库是由第三方开发者开发的工具库，旨在扩展微信小程序功能。以下是一些常用的微信小程序第三方组件库。WeUI：由腾讯团队开发的UI组件库，包含丰富的UI组件。VantWeapp：由有赞团队开发的UI组件库，提供了丰富的高质量组件。ColorUI：一款开源的CSS库，提供了丰富的样式和组件。mpvue-weui：基于Vue.js开发的微信小程序组件库，提供了丰富的组件和工具。iview-weapp：由iView团队开发的微信小程序组件库，提供了类似Vue.js、iView组件库的功能和样式。TaroUI：由Taro团队开发的微信小程序组件库，提供了丰富的组件和样式。AntDesignMini：由AntDesign团队开发的微信小程序组件库，提供了丰富的高质量组件。WuxWeapp：一款基于原生微信小程序开发的组件库，提供了丰富的组件和样式。目录导航2.8沙场大练兵：制作“猫眼电影”tabBar标签导航2.9小结2.1微信小程序模板介绍2.2微信小程序目录结构介绍2.3微信小程序注册程序的应用2.4