微信小程序架构和开发微信小程序架构

转载

mob6454cc680fc0 2023-08-11 11:07:05

文章标签 微信小程序架构和开发微信小程序小程序前端 json 文章分类 架构后端开发

文章目录

⼩程序结构⽬录

⼩程序⽂件结构和传统web对⽐
基本的项⽬⽬录

⼩程序配置⽂件

⼩程序结构⽬录

⼩程序框架的⽬标是通过尽可能简单、⾼效的⽅式让开发者可以在微信中开发具有原⽣APP验的服务。

⼩程序框架提供了⾃⼰的视图层描述语⾔ WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

⼩程序⽂件结构和传统web对⽐

结构	传统web	微信⼩程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	⽆	JSON

通过以上对⽐得出，传统web 是三层结构。⽽微信⼩程序是四层结构，多了⼀层配置.json

基本的项⽬⽬录

pages：页面文件夹

index：首页

index.js
Index.json
Index.wxml
Index.wxss

logs：日志页面

logs.js
logs.json
logs.wxml
logs.wxss

utils：第三方工具

app.js：项目全局文件人口文件

app.json：全局配置文件

app.wxss：全局样式文件

project.onfig.son：项目配置文件 appid

stemap.json：微信索引配置文件

⼩程序配置⽂件

⼀个⼩程序应⽤程序会包括最基本的两种配置⽂件。⼀种是全局的 app.json 和⻚⾯⾃⼰的 page.json

注意：配置文件中不能出现注释

全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。

普通快速启动项⽬⾥边的 app.json 配置

pages: [
  'pages/game/index',
  'pages/user/index',
  'pages/knapsack/index',
  'pages/login/index',
  'pages/favourite/index',
],
window: {
  backgroundTextStyle: 'dark',
  navigationBarBackgroundColor: '#000',
  navigationBarTitleText: '魔熊潮玩',
  navigationBarTextStyle: 'white',
  backgroundColor: '#000',
}

字段的含义

pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序

⻚⾯定义在哪个⽬录。

window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
完整的配置信息请参考 app.json配置

tabBar底部 tab

backgroundColor：背景色
selectedColor：选中的元素的字体颜色
color：元素的字体颜色
borderStyle：边框颜色（black/white）
position：位置（top/bottom）
list：tab 的列表

pagePath：跳转地址
text：名称
selectedIconPath：选中的元素的icon图标地址
IconPath：元素的icon图标地址

⻚⾯配置page.json

这⾥的 page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。

开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。

⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json 的 window 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜⾊，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜⾊，仅⽀持 black / white
navigationBarTitleText	String		导航栏标题⽂字内容
backgroundColor	HexColor	#ffffff	窗⼝的背景⾊
backgroundTextStyle	String	dark	下拉 loading 的样式，仅⽀持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。详⻅ Page.onPullDownRefresh
onReachBottomDistance	Number	50	⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。详⻅ Page.onReachBottom
disableScroll	Boolean	false	设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有