美文网首页
框架:逻辑层

框架:逻辑层

作者: 66pillow | 来源:发表于2018-01-17 17:35 被阅读0次

核心

一个响应式数据绑定系统

  • View 视图
  • App Service 逻辑

文件结构

根目录:

  • app.js 小程序逻辑(require)
  • app.json 小程序公共设置(require)
  • app.wxss 小程序公共样式

小程序页面组成

  • js 页面逻辑(require)
  • wxml 页面结构(require)
  • wxss 页面样式
  • json 页面配置

为减少配置,描述页面4个文件必须具有相同的路径和文件名

配置

app.json为小程序全局配置

{
  //小程序页面路径
  pages: [],
  //小程序状态栏,导航,标题,窗口背景色
  window: {},
  tabBar: {},
  networkTimeout: {},
  debug: true
}

page.json为小程序页面配置,只能设置window配置项内容

{
  navigationBarBackgroundColor: '#000',
  navigationBarTextStyle: 'white',
  navigationBarTitleText: 'title',
  backgroundColor: '#fff',
  backgroundTextStyle: 'dark',
  enablePullDownRefresh: false,
  disableScroll: false,
  onReachBottomDistance: 50
}

App Service逻辑

  • 注册程序
App({
  //当小程序初始化完成
  onLaunch() {},
  //当小程序启动,或从后台进入前台显示
  onShow() {},
  //当小程序从前台进入后台
  onHide() {},
  //当小程序出错
  onError(err) {},
  //可以添加自定义函数或数据,使用this访问
  66sData:{}
});

//全局getApp()可获取小程序实例
//不要在App()内调用,App()内使用this可以拿到实例
var appInstance = getApp();
appInstance.66sData;

App()必须在app.js中注册,且只能注册一个

  • 场景值
    可在App的onLaunch和onShow中获取

  • 注册页面

Page({
  //页面初始数据
  data: { num: 0 },
  //监听页面加载
  onLoad() {},
  //监听页面初次渲染完成
  onReady() {},
  //监听页面显示
  onShow() {},
  //监听页面隐藏
  onHide() {},
  //监听页面卸载
  onUnload() {},
  //监听用户下拉刷新
  onPullDownRefresh() {},
  //监听用户上拉触底
  onReachBottom() {},
  //监听用户点分享
  onShareAppMessage() {},
  //监听页面滚动
  onPageScroll() {},
  //可以添加自定义函数或数据,使用this访问
  66sData:{},
  changeNum: function(){
    let route = this.route;
    this.setData({num: route});
  }
});

//获取当前页面路径
Page.prototype.route;
//变更data值并同步视图
Page.prototype.setDate({})
  • 路由
    小程序路由由框架管理,框架以页面栈的形式维护所有页面
路由方式 页面栈行为
初始化,打开新页 新页入栈
页重定向 当前页出栈,新页入栈
页返回 页出栈,直到目标返回页,新页入栈
Tab切换 页全部出栈,只留新Tab页
重加载 页全部出栈,只留新页
//获取当前页栈数组实例,第一个为首页,最后一个为当前页
getCurrentPages();

wx.navigateTo
<navigator open-type="navigateTo" />
wx.redirectTo
<navigator open-type="redirectTo" />
wx.navigateBack
<navigator open-type="navigateBack" />
wx.switchTab
<navigator open-type="switchTab" />
wx.reLaunch
<navigator open-type="reLaunch" />
  • 模块化
//comme.js
//通过module.export和export导出
module.export.sayHello = () => {};
export.sayGoodbye = () => {};

//通过require导入
const common = require('comm.js');

相关文章

  • 框架:逻辑层

    核心 一个响应式数据绑定系统 View 视图 App Service 逻辑 文件结构 根目录: app.js 小程...

  • 转载-微信小程序官方文档-层

    逻辑层(App Service) 一 逻辑层app service 小程序开发框架的逻辑层是由js编写的将数据进行...

  • 框架逻辑层(一)

    逻辑层 注册程序App函数用来注册一个小程序,用于初始化,接收object参数,指定小程序的生命周期函数属性类型描...

  • 2018-02-28-2微信小程序框架学习

    框架系统两层 视图层(view):视图层描述语言 WXML 和 WXSS逻辑层(AppService):逻辑层描述...

  • 小程序框架Mina

    小程序框架介绍 1.MINA框架 渲染层和逻辑层[https://developers.weixin.qq.com...

  • 微信小程序开发教程(基础篇)9-事件

    前面说到,微信小程序框架是逻辑层与UI层分析的设计方式,这种设计方式需要解决两个问题 UI层响应逻辑层逻辑和数据的...

  • Spring入门

    一、Spring介绍 Spring 是位于业务逻辑层的框架。 优点很多(无缝对接前后层的框架、提供AOP的支持 ,...

  • Hibernate框架

    Hibernate:基于持久层的框架(数据访问层使用) Service业务逻辑层 Dao 数据访问层 ORM(Ob...

  • 小程序的线程架构*

    1.MINA框架 逻辑层App Service视图层View

  • 阅读笔记 | 表现层:感知设计

    在框架层,我们主要解决放置的事情。在表现层,我们要解决并幕布“产品框架层的逻辑排布”的感知呈现问题。 表现层在工作...

网友评论

      本文标题:框架:逻辑层

      本文链接:https://www.haomeiwen.com/subject/sgjuoxtx.html