mowatermelon commented 5 years ago

主页面设计

home-design

领奖页面设计

mowatermelon commented 5 years ago

案例文件结构分析

以posts-admin项目为例

完整目录结构

│  .gitignore
│  app.js
│  manifest.json
│  package.json
│  
├─.iceworks
│  │  scaffoldrc.json
│  │  
│  └─pageTemplate
│          index.html.ejs
│
├─node_modules          
├─public
│  │  favicon.png
│  │  index.html
│  │  
│  └─images
│      └─icons
│              icon-128x128.png
│              icon-144x144.png
│              icon-152x152.png
│              icon-192x192.png
│              icon-384x384.png
│              icon-512x512.png
│              icon-72x72.png
│              icon-96x96.png
│              
└─src
    ├─components
    │  ├─item
    │  │      index.html
    │  │      
    │  └─title
    │          index.html
    │          
    └─pages
        ├─drafts
        │      index.html
        │      
        ├─home
        │      index.html
        │      
        ├─new
        │      index.html
        │      
        ├─posts
        │      index.html
        │      
        └─settings
                index.html

mowatermelon commented 5 years ago

尝试寻找文档

去rax官网看了一波，发现和现有代码无关，不需要强制每种控件都强制依赖

决定从项目代码学习具体实现

<style>
  .container {
    text-align: center;
    color: #666;
    height: 100%;
  }
</style>

<template>
  <view class="container">
    <item></item>
  </view>
</template>

<script>
  import item from '../../components/item/index';
  export default {
    components: {
      item
    },
    data() {
      return {
        // initial data
      };
    },
  };
</script>

结构分析

页面文件为html后缀
<style></style> 样式标签
<template></template> 原始标签
<script></script> 代码标签

template标签内部分析

页面标签内部一般是由<view></view>构成的主标签，然后再在主标签内做相关结构拼接，发现没有<div></div>的概念，对比项目中几个页面主要用到了<image/>,<title/>,<text></text>,<input/>,<textarea/>,<button></button>,<swiper></swiper>,<swiper-item></swiper-item>,<scroll-view></scroll-view>,<navigator></navigator>。

注意，控件内部在<template>内不用再添加<view>作为根dom节点挂接。

实现页面跳转的组件代码

<template>
  <scroll-view style="height: 100%" :scroll-y="true" scroll-with-animation>
    <navigator :url="item.url" v-for="item in items">
      <view class="scroll-view-item">
        <view class="itemBody">
          <image class="itemIcon" :src="item.icon" />
          <text>{{item.text}}</text>
        </view>
        <image class="arrowIcon" src="https://img.alicdn.com/tfs/TB14khkFqmWBuNjy1XaXXXCbXXa-200-200.png" />
      </view>
    </navigator>
  </scroll-view>
</template>

内置非原生标签

<swiper></swiper>,<swiper-item></swiper-item>,<scroll-view></scroll-view>,<navigator></navigator>，可以用于swiper和滚动容器中的效果实现。

具体标签指令

和vue2保持一致，不做赘述

script标签内部分析

大部分和vue2保持一致，但是在vue2中在做export的时候需要指定组件的组件名，但是这边不需要，不管是页面还是组件，都是直接export default。

mowatermelon commented 5 years ago

rax 官网

http://rax.taobaofed.org/ 旧官网

https://alibaba.github.io/rax/ 现有官网

官网介绍

前端开发的同学一直走在探索的路上，无论是从成熟的 jQuery 体系，还是 React 和 React Native 的尝试，我们一直走在拓展的边界。但是，不可否认的是，性能、兼容、效率、体验问题始终围绕在我们身边，一直在突破却还依然没有跨越。 Rax 是一个全新的思路。它是一个通用的跨容器的渲染引擎，如果你使用过 React ，那么你就已经知道了该如何使用 Rax ，因为它们的 API 是完全兼容的。 Rax 的诞生，主要还是为阿里巴巴广泛的业务来服务的。现在，我们让它走向开源，服务更多的开发者。还记得 React Native 的口号： Learn once, write anywhere. 但对于我们来说，或许这还不够。真正的释放我们的劳动力，才是 Rax 要做的事情。 Rax 旨在 Write once, run everywhere. 我们只要开发一次，便不用再担心各个平台的兼容。现在，就让我们开始学习 Rax 吧。

并没有什么关系，心痛。

mowatermelon commented 5 years ago

尝试寻找页面路由分发逻辑

新建页面前

manifest.json

{
  "name": "miniapp",
  "short_name": "App",
  "icons": [
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#3080fe",
  "background_color": "#f4f4f4",
  "manifest_version": 1,
  "pages": {
    "home": "src/pages/home/index",
    "new": "src/pages/new/index",
    "drafts": "src/pages/drafts/index",
    "posts": "src/pages/posts/index",
    "settings": "src/pages/settings/index"
  },
  "homepage": "home",
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff5000",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#515151",
    "selectedColor": "#8742fa",
    "backgroundColor": "#ffffff",
    "borderStyle": "#999999",
    "position": "bottom",
    "list": [
      {
        "pageName": "home",
        "text": "首页",
        "iconPath": "https://gw.alicdn.com/tfs/TB1IwQbFhGYBuNjy0FnXXX5lpXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1IwQbFhGYBuNjy0FnXXX5lpXa-200-200.png"
      },
      {
        "pageName": "drafts",
        "text": "草稿箱",
        "iconPath": "https://gw.alicdn.com/tfs/TB1IJqYFkyWBuNjy0FpXXassXXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1IJqYFkyWBuNjy0FpXXassXXa-200-200.png"
      },
      {
        "pageName": "posts",
        "text": "文章",
        "iconPath": "https://gw.alicdn.com/tfs/TB1k.O8FeuSBuNjy1XcXXcYjFXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1k.O8FeuSBuNjy1XcXXcYjFXa-200-200.png"
      },
      {
        "pageName": "settings",
        "text": "设置",
        "iconPath": "https://gw.alicdn.com/tfs/TB1DJXBFDtYBeNjy1XdXXXXyVXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1DJXBFDtYBeNjy1XdXXXXyVXa-200-200.png"
      }
    ]
  }
}

新建test页面后

manifest.json

{
  "name": "miniapp",
  "short_name": "App",
  "icons": [
    {
      "src": "/images/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color": "#3080fe",
  "background_color": "#f4f4f4",
  "manifest_version": 1,
  "pages": {
    "home": "src/pages/home/index",
    "new": "src/pages/new/index",
    "drafts": "src/pages/drafts/index",
    "posts": "src/pages/posts/index",
    "settings": "src/pages/settings/index",
    "test": "src/pages/test/index"
  },
  "homepage": "home",
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff5000",
    "navigationBarTitleText": "小程序",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#515151",
    "selectedColor": "#8742fa",
    "backgroundColor": "#ffffff",
    "borderStyle": "#999999",
    "position": "bottom",
    "list": [
      {
        "pageName": "home",
        "text": "首页",
        "iconPath": "https://gw.alicdn.com/tfs/TB1IwQbFhGYBuNjy0FnXXX5lpXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1IwQbFhGYBuNjy0FnXXX5lpXa-200-200.png"
      },
      {
        "pageName": "drafts",
        "text": "草稿箱",
        "iconPath": "https://gw.alicdn.com/tfs/TB1IJqYFkyWBuNjy0FpXXassXXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1IJqYFkyWBuNjy0FpXXassXXa-200-200.png"
      },
      {
        "pageName": "posts",
        "text": "文章",
        "iconPath": "https://gw.alicdn.com/tfs/TB1k.O8FeuSBuNjy1XcXXcYjFXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1k.O8FeuSBuNjy1XcXXcYjFXa-200-200.png"
      },
      {
        "pageName": "settings",
        "text": "设置",
        "iconPath": "https://gw.alicdn.com/tfs/TB1DJXBFDtYBeNjy1XdXXXXyVXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1DJXBFDtYBeNjy1XdXXXXyVXa-200-200.png"
      }
    ]
  }
}

主要就是page下新增了一个分支，"test": "src/pages/test/index"

删除tab前

  "tabBar": {
    "color": "#515151",
    "selectedColor": "#8742fa",
    "backgroundColor": "#ffffff",
    "borderStyle": "#999999",
    "position": "bottom",
    "list": [
      {
        "pageName": "home",
        "text": "首页",
        "iconPath": "https://gw.alicdn.com/tfs/TB1IwQbFhGYBuNjy0FnXXX5lpXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1IwQbFhGYBuNjy0FnXXX5lpXa-200-200.png"
      },
      {
        "pageName": "drafts",
        "text": "草稿箱",
        "iconPath": "https://gw.alicdn.com/tfs/TB1IJqYFkyWBuNjy0FpXXassXXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1IJqYFkyWBuNjy0FpXXassXXa-200-200.png"
      },
      {
        "pageName": "posts",
        "text": "文章",
        "iconPath": "https://gw.alicdn.com/tfs/TB1k.O8FeuSBuNjy1XcXXcYjFXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1k.O8FeuSBuNjy1XcXXcYjFXa-200-200.png"
      },
      {
        "pageName": "settings",
        "text": "设置",
        "iconPath": "https://gw.alicdn.com/tfs/TB1DJXBFDtYBeNjy1XdXXXXyVXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1DJXBFDtYBeNjy1XdXXXXyVXa-200-200.png"
      }
    ]
  }

删除`设置`tab后

  "tabBar": {
    "color": "#515151",
    "selectedColor": "#8742fa",
    "backgroundColor": "#ffffff",
    "borderStyle": "#999999",
    "position": "bottom",
    "list": [
      {
        "pageName": "home",
        "text": "首页",
        "iconPath": "https://gw.alicdn.com/tfs/TB1IwQbFhGYBuNjy0FnXXX5lpXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1IwQbFhGYBuNjy0FnXXX5lpXa-200-200.png"
      },
      {
        "pageName": "drafts",
        "text": "草稿箱",
        "iconPath": "https://gw.alicdn.com/tfs/TB1IJqYFkyWBuNjy0FpXXassXXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1IJqYFkyWBuNjy0FpXXassXXa-200-200.png"
      },
      {
        "pageName": "posts",
        "text": "文章",
        "iconPath": "https://gw.alicdn.com/tfs/TB1k.O8FeuSBuNjy1XcXXcYjFXa-200-200.png",
        "selectedIconPath": "https://gw.alicdn.com/tfs/TB1k.O8FeuSBuNjy1XcXXcYjFXa-200-200.png"
      }
    ]
  }

我一直以为manifest.json只是用作当网络状况不好或者离线清空下，被动被浏览器读取的文件，没想到可以这样玩，页面绘制逻辑严重依赖于manifest.json。

mowatermelon commented 5 years ago

支付宝小程序

官网 https://docs.alipay.com/mini

支付宝小程序是手机应用嵌入支付宝客户端的一种方法，有以下特点：

基于 Web 技术，学习成本低
一套代码，同时支持 iOS 和 Android，接近原生体验
提供丰富的组件和 API(比如获取用户信息、本地存储、支付功能等)

感觉关系还是不大，我还是直接看现有项目代码吧

mowatermelon commented 5 years ago

mainfest.json

https://developers.google.com/web/fundamentals/web-app-manifest/

学习案例

https://events.google.com/io2016/

mowatermelon / Use-iceWorks

尝试编辑小程序游戏控件 #25

主页面设计

领奖页面设计

案例文件结构分析

完整目录结构

尝试寻找文档

结构分析

template标签内部分析

实现页面跳转的组件代码

内置非原生标签

具体标签指令

script标签内部分析

rax 官网

官网介绍

尝试寻找页面路由分发逻辑

新建页面前

新建test页面后

删除tab前

删除`设置`tab后

支付宝小程序

mainfest.json

学习案例

mowatermelon / Use-iceWorks

尝试编辑小程序游戏控件 #25

主页面设计

领奖页面 设计

案例文件结构分析

完整目录结构

尝试寻找文档

结构分析

template标签内部分析

实现页面跳转的组件代码

内置非原生标签

具体标签指令

script标签内部分析

rax 官网

官网介绍

尝试寻找页面路由分发逻辑

新建页面前

新建test页面后

删除tab前

删除设置tab后

支付宝小程序

mainfest.json

学习案例

领奖页面设计

删除`设置`tab后