美文网首页
H5 maker 侦查笔记

H5 maker 侦查笔记

作者: asjmtz | 来源:发表于2014-12-23 17:32 被阅读0次

    主要的页面请求

    1、获得站内消息的窗口的内容

    file: message.js/getRemoteData
    url: /message/?pageNum=0
    type: GET
    data: {
        pageNum: 0
    }
    success: {
        "user":"asjmtz",
        "messages":[{
            messageId/_id: "_id",
            read: true,
            receiver: 'receiver',
            newreply: 'newreply',
            type: 0,
            replyListHtml: 'replyListHtml',
            title: 'titel',
            sender: 'sender',
            sendTime: 1419319669909,
            content: 'content'
        }]
    }
    

    2、当前页面显示的编辑界面信息,会指到上次编辑所在的页面

    file: controls.js/
    url: /rabbitpres/ + $.cookie("App Id")
    type: GET
    success: {
        author: true
        content: mainJSON
        token: 1419314827040
    }
    

    3、是否有背景音乐

    file: create.js/
    url: /musics/checkIdFile
    type: GET
    data: {id : $.cookie("App Id")}
    success: {
        result: "error"/"ok"
    }
    

    4、获得应用列表数据

    file: main.js/console.log("我的应用列表数据")
    url: /rabbitpres
    type: GET
    success: [mainJSON,mainJSON]
    

    5、获得用户上传的图片的数据

    file: controls.js/
    url: /images
    type: POST
    success: {
        images: [{
            v: 0
            _id: "54893f964972707f05fba952"
            filename: "xxx.png"
            status: "1"
            username: "asjmtz"
        },…],
        result: "OK",
        username: "asjmtz"
    }
    
    

    6、保存文件

    file: controls.js/
    url: /rabbitpres + $.cookie("App Id")
    type: PUT
    data: {
        title: "",
        content: "",//html
        col: [] //["content"]或["title"]或[],修改的内容类型
    }
    success: {
        result: "OK",
    }
    

    7、新建空白模板

    file: main.js/
    url: /rabbitpres
    type: POST
    data: {
        title:兔展标题
        name:兔展标题
    }
    success: mainJSON // 没有content属性
    

    8、选择样例模板进行修改

    file: main.js/
    url: /rabbitpres
    type: POST
    data: {
        title: XX标题1,
        name: XX标题1,
        content: "" //样例的html
    }
    success: mainJSON // content属性是模板的html
    

    9、用户删除应用

    file: main.js/
    url: /rabbitpres/ + _id
    type: DELETE
    success: {} //直接reload??
    

    10、上传图片---上传到七牛的CDN上

    file: ...
    url: /images/ + $.cookie("App Id")
    type: POST
    success: {
        appId: "54993d7177b9df44052f1137"
        imgKey: "59f6ef00-8a8b-11e4-b25c-51d07ef09179"
        result: "ok"
        token: "" //什么鬼
        uid: "54893f079a2a0f50058370d8"
        username: "asjmtz"
    }
    

    11、已上传的图片裁切

    file: 
    url: /crop/old
    type: POST
    data: {
        x:14
        y:16
        w:207
        h:105
        imgUrl:/uploads/images/asjmtz/bdbfaa50-8102-11e4-bc83-b1fda0d8ade2.png
        imgW:240
    }
    success: {
        name: "裁切好的图片.png"
        result: "OK"
        username: "asjmtz"
    }
    

    12、七牛的上传图片裁切

    file: 
    url: /crop
    type: POST
    data: {
        x:22
        y:3
        width:202
        height:171
        imgWidth:240
        imgHeight:240
        imgRealWidth:128
        imgRealHeight:128
        imgUrl:http://7sbykt.com2.z0.glb.qiniucdn.com/59f6ef00-8a8b-11e4-b25c-51d07ef09179
        imgW:240
        filename:59f6ef00-8a8b-11e4-b25c-51d07ef09179
        appId:54993d7177b9df44052f1137
    }
    success: {
        //七牛上的文件名
        cropName: "3affba90-8a8c-11e4-b25c-51d07ef09179", 
        result: "ok"
    }
    
    

    13、表单创建,保存

    
    file: 
    url: /form/createStruct
    type: POST
    data: {
        struct:{"title":"3453","content":[{"name":"p1","label":"3453"},{"name":"p2","label":"345345"}],"button":"345"}
    }
    success: {
        __v: 0
        _id: "54a0f80794149e7f0587fb22"
        creator: "asjmtz"
        struct: "{"title":"3453","content":[{"name":"p1","label":"3453"},{"name":"p2","label":"345345"}],"button":"345"}"
    }
    

    数据格式

    主要 JSON —— mainJSON

    ajax返回的一个数据格式,包括大多内容

    var mainContent = {
            __v: 0
            _id: "5498e1c3cf3a8db27fe31d53"
            allowDiscuss: false
            canbeTemplate: true
            content: ""
            createTime: "2014-12-23T03:30:11.215Z"
            creator: "asjmtz"
            friendCount: 0
            imgUrl: "../uploads/images/default.png"
            isPublish: false
            isSecret: false
            name: "家纺标题"
            needmore: false
            publishTime: "1970-01-01T00:00:00.000Z"
            showViewCount: false
            supportCount: 0
            timelineCount: 0
            title: "家纺标题"
            viewCount: 0
            weiboCount: 0
        }
    
    • content 其中 content 属性是返回保存的H5页面的HTML的字符形式
    • creator 用户
    • name/title 应用名字
    • createTime 创建时间
    • imgUrl ...
    • publishTime 发布时间

    事件管理

    App Activated

    // controls.js
    // 记录 cookies: { "App Id": app._id}
    c.on("App Activated", function(a) {
      return $.cookie("App Id", a._id, {expires: 1,path: "/"
    })
    
    // 控制 active 的页面的 translateY
    e.on("App Activated", function() {
        return c = $("div.simulator div.pages section.page.active"), 
        j();
    })
    
    // 加载用户上传过的图片
    return e.on("App Activated", function(a) {
        $.ajax({
            url: "/images",
            type: "POST",
            data: {},
            success: function(a){}
        })
    })
    
    

    Component Activated --- 激活组件菜单

    
    

    JS 文件

    main.js 和 controls.js

    主要的JS逻辑文件,事件注册和

    template.js

    • 模板文件,样例模板list记录在JSON对象 Template 的list属性 Template.list 中。
    • list中的索引来自页面list的 template-data 属性值。

    message.js

    站内消息模块添加,菜单栏右上角

    page.js

    新建应用空白页面的对话框,以及每个模板对应的页面模板HTML

    create.js

    音乐,页面间切换动画,侧边工具栏点击


    其他

    • 应用标题修改后,会立刻发起“保存”的请求
    • 应用内容修改后,不会立刻保存
    • 新建应用的页面时,会自动保存应用内容
    • 上传图片和裁切图片的时候,会保存

    BUG

    Q : 新建空白模板,在选择单页面模板时,没有选择,然后选组件进行添加,JS报错。

    A: 因为页面内没有默认的单页面,组件无法向Null的父元素中appendTo

    相关文章

      网友评论

          本文标题:H5 maker 侦查笔记

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