Skip to content

Latest commit

 

History

History
246 lines (193 loc) · 5.9 KB

README.md

File metadata and controls

246 lines (193 loc) · 5.9 KB
Raw

SLAN

mvvm前端框架

Start

  1. npm install
  2. cd m.cause
  3. node app.js 启动dev环境
  4. 浏览器输入 http://127.0.0.1:5560 即可访问
  5. node app.js --build=test 打包测试环境到dest文件夹
  6. node app.js --build=production 打包生产环境到dest文件夹

#目录结构

  • webresource---------资源文件夹
    • images---------图片/css文件夹
    • js---------js文件夹
      • core---------框架核心
      • components---------组件文件夹
      • extend ---------扩展文件夹
      • graphics---------动态效果文件夹
      • widget ---------组件文件夹
      • util---------工具类
    • m---------m站专用文件夹
      • 同上
  • m.caulse ---------项目文件夹
    • dest---------打包文件夹
    • components---------组件文件夹
    • images ---------项目图片/css
    • models ---------models文件夹
    • views ---------视图文件夹
    • template ---------模版文件夹
    • app.js---------项目启动/打包文件
    • global.json---------全局配置文件
    • config.json---------项目/路由配置文件

项目

##global.json

  • dest打包文件夹
  • api服务端api地址
  • proxy代理设置(一般情况无需配置)
  • css公用css，主项目和子项目公用的css，多个css会在打包后合并
  • images图片文件夹，打包后会将该文件夹下的图片移动到dest文件夹
  • combinejs文件合并配置
{
    //将./components/share.js,./components/api.js合并为components.js
    "components": {
        //./components/share.js打包后seajs的moduleid为components/share
        "components/share": "./components/share",
        "models/api": "./components/api"
    }
}
  • path查找js的位置，类似于环境变量
  • port开发服务器的访问端口
  • projects项目文件夹，主项目和子项目都放在该数组中
  • env环境配置，打包时--build参数使用该配置里的对应项，如node app.js --build=test会使用env.test的配置
  • framework框架打包配置

##config.json

  • global.json->projects中配置的主项目和子项目文件夹中每个都要有config.json
  • css当前项目独用的css，多个css会在打包后合并
  • js当前项目独用的js，多个js会在打包后合并
  • images当前项目独用的images
  • route当前项目的路由配置
{
    //将#/映射到index,从项目view/template文件夹中搜索index.js/index.html
    "/": "index",
    //访问地址#/item/1，view/item.js中通过this.data.id获取参数值
    "/item/{id:\\d+}": "item"
}

##views

  • views为项目的视图层，实现页面代码逻辑
  • views下的js文件名称要同route中配置的一样
  • 视图继承自Activity类,｀var Activity = require('core/activity')｀

###Activity

  • Activity.extend(options)方法，返回Activity的子类

    • options:
    • onCreate方法，初始化视图时调用
    • onShow方法，每次显示视图时调用
    • onPause方法，每次隐藏视图时调用
    • onDestroy方法，销毁视图时调用
    • events对象，事件处理

  • back(url)方法，返回某页面(返回动画)

module.exports = Activity.extend({
    events: {
        'tap .js_back': function () {
            //返回首页
            this.back('/');
        }
    }
})
  • forward(url)方法，前进到某页面(前进动画)
module.exports = Activity.extend({
    events: {
        'tap .js_forward': function () {
            //返回首页
            this.forward('/item/1');
        }
    }
})
  • query对象，链接?号后面的内容
module.exports = Activity.extend({
    onCreate:function() {
        // /item/2?id=1&name=xx

        console.log(this.query.id)
        console.log(this.query.name)
        // 1
        // xx
    }
})

  • el对象，当前element

  • $el对象，当前$(element)

  • model对象，数据视图双向绑定，需要在onCreate时初始化，具体可见template

var Activity = require('core/activity');
var ViewModel = require('core/model').ViewModel;

module.exports = Activity.extend({
    onCreate:function() {
        var data = {
            title: "标题",
            list: [{
                name: 1
            }, {
                name: 2
            }]
        };
        this.model = new ViewModel(this.$el, data);

        //更新数据
        this.model.set({ title: '新标题' })
    }
})

##template

  • {{param}}
this.model = new ViewModel(this.$el, {
    title: '标题',
    titleClass: 'title',
    date: Date.now()
});
<div class="header {{titleClass}}">这是标题{{title}}{{title?'aaa':encodeURIComponent('bbb')}}{{util.formateDate(date,'yyyy-MM-dd')}}</div>
  • repeat循环
this.model = new ViewModel(this.$el, {
    title: '标题',
    list: [{
        name: 1
    }, {
        name: 2
    }]
});
<div class="item" sn-repeat="item in list|filter:like(item.name,'2')|orderBy:item.name">这是标题{{title}}，加上{{item.name}}</div>
  • if条件
<div class="item" sn-if="{{title}}">当title不为空时插入该element</div>
  • display控制是否显示
<div class="item" sn-display="{{title}}">当title不为空时显示</div>
  • htmlelement内显示非转译html
<div class="item" sn-html="{{title}}"></div>

桥

  • js调用原生功能
var bridge = require('bridge');
bridge.getLocation(function(res) {

    console.log(res.longitude)
    console.log(res.latitude)
})

  • pickImage(callback) 选择相册图片

  • takePhoto(callback) 拍照

  • getDeviceToken(callback) 获取消息通知devicetoken

  • getLocation(callback) 获取当前位置,callback参数{longitude,latitude}

  • ali(data,callback)支付宝支付api

  • wx(data,callback)微信api（支付、分享）

  • qq(data,callback)qq api（分享）

  • update(updateUrl, versionName, callback) 更新app