微信小程序之注册配置
来源:互联网 发布:淘宝app能修改差评吗 编辑:程序博客网 时间:2024/06/06 03:39
微信小程序之注册配置
小程序页面结构
pages
pages/app.js(小程序注册入口)
pages/app.json(小程序路由配置以及app窗口设置)
pages/app.wxss(小程序公共样式)
pages/moduleName/moduleName.js(小程序模块应用逻辑,MVC中的Model和Control)
pages/moduleName/moduleName.json(小程序应用模块的窗口配置,会覆盖app.json的窗口配置)
pages/moduleName/moduleName.wxml(小程序应用模块页面)
pages/moduleName/moduleName.wxss(小程序应用模块样式)
小程序框架与MVC简述
小程序框架
小程序划分为视图层(View)和逻辑层(AppService)的两层框架,并在视图层和逻辑层之间提供
数据传输和事件系统。严格意义上,按照MVC的框架模式而言,小程序的逻辑层包含MVC中的Model以及Controller.MVC简述
- View有两层作用,其一是负责从Model层接收、渲染和显示数据;其二是负责接受和传递数据到Controller层;
- Controller也有两层作用,其一是接收View层抑或是请求URL传递的表单数据,并对表单数据进行控制校验,其二是处理用户交互体验效果,比如在View进行动画效果设置、滚动加载体验等;
- Model层,负责接受Controller传输的数据并对数据进行逻辑处理后返回给View层。
MVC优点
其一,分层的设计有助于管理复杂的应用程序,将数据逻辑与界面显示分离,有助于后期针对相应的层级维护和管理;
其二,简化分组开发,能够独让负责不同业务模块的开发者进行模块化功能开发,并行推进项目进度
小程序入口文件app.js、app.json以及app.wxss
app.js,小程序入口配置
App({ onLaunch: function() { //小程序生命周期初始化,全局加载(调用)一次,一般是用于程序启动时加载应用共享资源, }, onShow: function() { //当小程序启动,或从`后台进入前台显示`,会触发 onShow,监听小程序显示,会被调用多次 }, onHide: function() { //当小程序从前台进入后台时,会触发onHide事件,会被调用多次 }, globalData: 'I am global data'})
前台:指重新打开小程序显示,即从退出当前应用,用户又打开该应用
后台:是指退出小程序应用(并非完全退出或关闭),相当于按手机返回键退出当前应用,但是小程序还在所谓的【后台】运行app.json,小程序应用模块的路由配置、窗口以及Tab配置,#仅作为注释说明,实际配置应该去掉
{ "pages":[ "page/index/index", ##page配置的数组的第一项作为小程序的初始页面 "page/logs/logs" ], "window":{ ## 配置导航条 "navigationBarBackgroundColor":"#9084cc", ##背景颜色,HexColor类型(16进制颜色值) "navigationBarTextStyle":"dark",##标题颜色,仅支持dark/white "navigationBarTitleText":"我的订单",##标题内容,String ## 配置窗口 "backgroundColor":"#909902",##窗口背景色,HexColor类型 "backgroundTextStyle":"dark",##下拉背景字体,String,仅支持 dark/light "enablePullDownRefresh"true,##是否开启下拉刷新 }, "tabBar":{ "color":"", ##tab 上的文字颜色 "selectedColor":"", ##tab 上的文字选中时的颜色 "backgroundColor":"", ##tab 的背景色 "borderStyle":"", ##tabbar上边框的颜色, 仅支持 black/white ##tab 的列表,最少2个、最多5个 tab "list":[ { "pagePath":"", ##页面路径,必须在 pages 中先定义 "text":"", ##tab 上按钮文字 "iconPath":"", ##图片路径,icon 大小限制为40kb "selectedIconPath":"" ##选中时的图片路径,icon 大小限制为40kb }, ] }, ##时间单位 「毫秒」 "networkTimeout":{ "request":3000, ## wx.request的超时时间 "connectSocket":5000, ## wx.connectSocket的超时时间 "uploadFile":10000, ## wx.uploadFile的超时时间 "downloadFile":10000 ## wx.downloadFile的超时时间 }, ##开发者工具的控制台面板,调试信息以 info 的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发 "debug":true}
- pages是属于Array类型,Array的每一项都是url的字符串,url为相对根目录下的module路径,无需扩展名,框架会自动加载module下的js、wxml、wxss、json文件
- 配置的pages下的module的js,wxss,json,wxml必须为相同的名称,框架会根据module名称自动加载上述的扩展名文件
- tab上的list,最少2个、最多5个
app.wxss
app.wxss/**定义的样式将应用到小程序所有的模块中**/view,image,scroll-view,text{margin: 0px;padding: 0px;}.headerView{width: 100%;height: 32px;background: floralwhite;}/**其他样式**/.....
尺寸单位
- responsive pixel,即rpx,响应式像素,是一种能够提供各种设备都能阅读的一种设计方法,在微信小程序中,以iphone6作为屏幕标准,1rpx = 0.5px,微信小程序在底层会根据我们设定的px来对屏幕自适应,有助于开发者更集中于开发,应用场景在设置间距、长宽等
- root em,即rem,是css3新定义的一种长度单位,相对于页面定义的html根元素来调整大小,与em相对父元素调整大小更兼具相对和绝对字体调整大小的优势,在微信小程序中,1rem = 750/20 rpx = 75px,规定标准的iphone6的宽度是20rem,应用场景在于设置字体大小
样式导入
- 使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束
- 框架组件上支持使用 style、class 属性来控制组件的样式
- 微信小程序之注册配置
- 微信小程序之如何注册微信小程序
- 微信小程序之手机号快速注册
- 微信小程序之程序、页面注册及生命周期
- 微信小程序注册流程
- 微信小程序注册
- 微信小程序注册
- 微信小程序注册
- 微信小程序注册知识
- 微信小程序注册
- 微信小程序之基本配置
- 微信小程序个人号注册
- 微信小程序注册流程详解
- 微信小程序注册和发布
- 微信小程序注册相关资料
- 【微信小程序 二】用户注册
- 【微信小程序】注册一个微信小程序
- 微信小程序之项目结构与配置
- 为什么多线程读写 shared_ptr 要加锁?
- 实现一个四则加法器运算
- 深泽小舟,失落的十年
- Use document modeling to enhance PMF_1: CTR Model.
- 100天土鸡饲养计划(86)
- 微信小程序之注册配置
- 深入理解Java虚拟机之走近Java
- Demo02数学运算__自增自减__取余运算
- xml的生成和解析
- Redis--The PHP Extension Installed
- ffmpeg framework
- Exception:DatePickerDialog和TimePickerDialog会执行两次的异常
- jdk类库源码分析-String类
- PID算法基本教程