bob体育官方平台
bob体育官方平台微信小程序中实现一对多发消息详解及实例代码_JavaScript_脚本之家

微信小程序中实现一对多发消息详解及实例代码

微信小程序之注册配置

微信小程序中各个界面之间的传值和通知比较蛋疼。所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心。

小程序页面结构

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(小程序应用模块样式)

通知中心可以做到:1对多发消息,传递object。使用十分简洁。

小程序框架与MVC简述
  • 小程序框架

    小程序划分为视图层(View)和逻辑层(AppService)的两层框架,并在视图层和逻辑层之间提供
    数据传输和事件系统。严格意义上,按照MVC的框架模式而言,小程序的逻辑层包含MVC中的Model以及Controller.

  • MVC简述

    • View有两层作用,其一是负责从Model层接收、渲染和显示数据;其二是负责接受和传递数据到Controller层;
    • Controller也有两层作用,其一是接收View层抑或是请求URL传递的表单数据,并对表单数据进行控制校验,其二是处理用户交互体验效果,比如在View进行动画效果设置、滚动加载体验等;
    • Model层,负责接受Controller传输的数据并对数据进行逻辑处理后返回给View层。
  • MVC优点

    其一,分层的设计有助于管理复杂的应用程序,将数据逻辑与界面显示分离,有助于后期针对相应的层级维护和管理;
    其二,简化分组开发,能够独让负责不同业务模块的开发者进行模块化功能开发,并行推进项目进度

使用时,在需要接收消息的界面注册一个通知名。然后在需要发消息的界面post这个通知名就可以了。可以在多个界面注册同一个通知名。这样就可以1对多发消息。

小程序入口文件app.js、app.json以及app.wxss
  • app.js,小程序入口配置

    App({
      onLaunch: function() { 
        //小程序生命周期初始化,全局加载(调用)一次,一般是用于程序启动时加载应用共享资源,
      },
      onShow: function() {
        //当小程序启动,或从`后台进入前台显示`,会触发 onShow,监听小程序显示,会被调用多次
      },
      onHide: function() {
         //当小程序从前台进入后台时,会触发onHide事件,会被调用多次
    
      },
      globalData: 'I am global data'
    })  
    
    • 前台:指重新打开小程序显示,即从退出当前应用,用户又打开该应用
    • 后台:是指退出小程序应用(并非完全退出或关闭),相当于按手机返回键退出当前应用,但是小程序还在所谓的【后台】运行
    • App() 必须在 app.js 中注册,且不能注册多个
    • 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例
    • 不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成,补:getCurrentPage()已弃用,改用getCurrentPages()
    • 通过 getApp() 获取实例之后,不要私自调用生命周期函数,即onLaunch,onShow,onHide这三个周期函数,自定义的函数是不属于生命周期函数范围内
  • 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 属性来控制组件的样式

1:在app.js中引用notification.js

var notificationCenter = require('/utils/notification.js'); //这里请改为你的绝对路径

2:在app.js中添加:

App({ onLaunch: function (){ this.notificationCenter = notificationCenter.center(); }, notificationCenter:null,})
返回顶部