微信小程序MINA框架学习(零)
微信小程序的自带开发框架就是MINA,虽然市场中还有很多小程序的开发框架,但是考虑入门,还是以微信小程序自带的MINA框架为入口,开启微信小程序开发学习的旅程。这系列的博客旨在学习笔记的记录,一方面是加深自己的记忆,另一方面就是后期自己看着方便。
参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
配置文件之app.json
这是文件是做项目的全局配置,包括项目的页面列表、窗口的基本样式以及tabBar的相关配置。
窗口的基本配置
全局配置有一个配置项为window
,此配置项中有很多的属性,分别见下表:
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | string | white |
导航栏标题颜色,仅支持 black / white
|
navigationBarTitleText | string | 导航栏标题文字内容 | |
navigationStyle | string | default |
导航栏样式,仅支持以下值:default 默认样式custom 自定义导航栏
|
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | string | dark |
下拉 loading 的样式,仅支持 dark / light
|
enablePullDownRefresh | boolean | false | 是否开启全局的下拉刷新 |
onReachBottomDistance | number | 50 | 页面上拉触底事件触发时距页面底部距离 |
上面就是整理的主要几个属性,这些属性理解上都不是很难,但是下面几个做一下主要的说明。
- backgroundTextStyle:下拉loading的样式,这个常和enablePullDownRefresh联合使用
- enablePullDownRefresh:下拉触发刷新操作,对应的方法是
Page.onPullDownRefresh
,如需对页面某些数据进行刷新,就可以考虑在该方法里面写入请求后台数据的逻辑 - onReachBottomDistance:上拉触底,表示当页面上拉到一定距离,触发触底事件,常在列表下一页加载上使用,对应触发的方法是
Page.onPullDownRefresh
。
配置json格式如下:
{"window": {"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "微信接口功能演示","backgroundColor": "#eeeeee","backgroundTextStyle": "light"}
}
页面列表的设置
在全局配置中有一个配置项是pages
,其类型是一个数组,数组里面都是页面的路径配置。
配置格式如下:
{"pages":["pages/index/index","pages/my/my","pages/order/order"]
}
这里有以下几点说明:
- 在这个数组中,第一个页面就是对应的启动页面,如果在开发调试过程中需要直接进入该页面,则就可以将其放在数组的第一位置
- 页面都是写在pages目录下的,一个页面对应一个文件夹,文件夹中对应四个文件,分别是
.json
、.wxml
、.js
、.wxss
,分别对应的是配置文件、页面html文件、页面js代码以及页面样式文件 - 在微信小程序开发工具上开发的时候可以直接在数组中添加页面路径,
Ctrl+s
保存后,开发工具会自动在pages目录下创建对应的页面文件夹和四个文件。
tabBar配置
这个配置很重要,也很简单,简单看一下基本的格式:
{"tabBar":{"""list":[{"text":"首页","pagePath":"pages/index/index","iconPath":"static/icon/index.png","selectedIconPath":"static/icon/selected-index.png"},{"text":"我的","pagePath":"pages/my/my","iconPath":"static/icon/my.png","selectedIconPath":"static/icon/selected-my.png"}]}
}
tabBar内的选项配置,使用过小程序或者APP的,对这个都不陌生。
- pagePath:是对应页面地址
- iconPath:表示的是图标
- selectedIconPath:表示的是tabBar选项被选中后的图标,在使用微信的时候,选择对应的选项,图标的颜色样式就会发生变化,这就是通过selectedIconPath来实现的
- 注意list里页面的个数至少2个,最多5个
tabBar下除了list这个核心的配置项外,还有其他配置项,如下表:
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
color | HexColor | tab 上的文字默认颜色,仅支持十六进制颜色 | |
selectedColor | HexColor | tab 上的文字选中时的颜色,仅支持十六进制颜色 | |
backgroundColor | HexColor | tab 的背景色,仅支持十六进制颜色 | |
borderStyle | string | black |
tabbar 上边框的颜色, 仅支持 black / white
|
position | string | bottom |
tabBar 的位置,仅支持 bottom / top
|
上面的属性做一个如下说明:
- color、selectedColor和上面的iconPath和selectedIconPath是对应的,在没有被选中的时候,文字的颜色使用的是color,图标使用的是iconPath;当被选中后,对应的文字颜色就变成了selectColor,图标使用selectedIconPath
- borderStyle指的是整个tabBar的背景色,目前仅支持两个值,分别是
black
和white
,默认是black
- position指的是tabBar的位置,可以放在底部,也可以放在顶部,当放在顶部的时候,图标将会失效,仅显示文字
页面配置之page.json
在不同的页面此json文件的名称不同,在index页面下,对应的json文件就是index.json。页面配置项中的属性基本和全局配置的window内属性相同。但也有多出来的配置项。
- pageOrientation:屏幕旋转设置,支持
auto
/portrait
/landscape
,一般使用的较少 - usingComponents:这个是极其重要的一个属性,引入页面使用的自定义组件,书写格式如下:
{"usingComponents":{"navigate":"../../components/navigate/navigate","banner":"../../components/banner/banner"}
}
微信小程序MINA框架学习(零)相关推荐
- 微信小程序mina框架简单总结
框架总体分为三个部分: 1- 视图层:其中包括页面page.page由wxml(结构)和wxss(样式)组成 2-逻辑层:处理事务逻辑(mina交互服务中心).分为Manager和API两部分组成,m ...
- 上传文件 微信小程序input_快速上手微信小程序UI框架
本课程属于 微信小程序 A计划,不单独售卖,加入 A 计划可免费观看本课程及所有 微信小程序 收费课程~ 微信小程序 A计划永久有效期购买链接: http://www.sikiedu.com/clas ...
- java基于微信小程序的英语学习激励系统-计算机毕业设计
网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理技术,对于微信小程序的英语学习激励系统将又是一个传统管理到智能化信息管理的典型案例,对于传统的英语学习激励管理,所包括的信息 ...
- 微信小程序第三方框架
引言 目前上微信小程序的框架比较多,但是原生的小程序还是处于一个快速迭代的过程并未像JavaScript一样成熟的阶段,也就是说原生的版本都还不算太稳定,那么现在企业开发中为了谋求开发速度降低成本,万 ...
- 【毕业设计】基于微信小程序的在线学习平台 在线学习微信小程序
如今的这个网络的时代,由于网络的不断发展,在线教育平台的兴起,大大改变了人们对于教育的重新认识,也改变了传统的教育方式,现在人们利用网络给人们带来更广阔的世界观,加大社会化的协同,知识也是越来越去中心 ...
- 基于微信小程序的英语学习激励系统设计与实现-计算机毕业设计源码+LW文档
摘要 网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理技术,对于微信小程序的英语学习激励系统将又是一个传统管理到智能化信息管理的典型案例,对于传统的英语学习激励管理,所包括 ...
- 关于微信小程序wepy框架下wx-charts的使用
wx-charts在微信小程序wepy框架下的使用 wx-charts 微信小程序主流的图表工具 基于 Canvas,体积小 支持图表类型 饼图 pie 圆环图 ring 线图 line,scroll ...
- java基于微信小程序的英语学习激励系统+ssm+uinapp+Mysql+计算机毕业设计
网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理技术,对于微信小程序的英语学习激励系统将又是一个传统管理到智能化信息管理的典型案例,对于传统的英语学习激励管理,所包括的信息 ...
- ssm+vue+java微信小程序的英语学习激励系统#毕业设计
随着互联网大潮的到来,决定开发一套智能化.信息化的微信小程序的英语学习激励系统,主要对首页,个人中心,用户管理,单词分类管理,单词本管理,学习清单管理,试卷管理,试题管理,系统管理,考试管理等功能模块 ...
- 【最新计算机毕业设计】JAVA基于微信小程序的英语学习激励系统
基于微信小程序的英语学习激励系统 毕设帮助.源码交流及指导,见文末 对于微信小程序的英语学习激励系统,充分运用现代化的信息技术手段,对于英语学习激励信息管理发展的趋势就是信息化,信息化时代下的信息管理 ...
最新文章
- python代码变量作业_python - 是否可以在Jenkins的代码中注入变量,然后像往常一样运行作业? - SO中文参考 - www.soinside.com...
- npm run buil构建后页面白屏_从Npm Script到Webpack,6种常见的前端构建工具对比
- Python字典的作用与基本操作
- pytorch dataset读取数据流程_10条PyTorch避坑指南
- JDK 中的证书生成和管理工具 keytool
- 编程语言-初学者常见的几个问题
- 退火算法(Annealing)简介与详解
- 昂达 v891 连接上adb 调试
- BAT智能硬件布局 争搭平台卡位各异
- DRM 驱动程序开发(VKMS)
- 龙芯(Loongson)CPU频率显示问题
- Silverlight 2教程(四):Chiron.exe:Silverlight 2打包和动态语言部署工具
- 5.8 什么是学习博主?看两个博主案例【玩赚小红书】
- Java-- Maps
- oracle数据库的并发控制,Oracle数据库—— 事务处理与并发控制
- The Matrix(黑客帝国)
- 游戏玩家的图形显示设置指南(10)(The Gamer's Graphics Display Settings Guide)
- c4d python 插件_好用的C4D插件都在这里了,还不赶紧收藏起来?
- apache common JCS的使用
- 磁盘阵列 服务器直连,硬盘连接方式介绍/直连硬盘(第一种方式)