微信小程序之注册配置

来源:互联网 发布:淘宝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 属性来控制组件的样式
0 0