四时宝库

程序员的知识宝库

最好用的Weex脚手架(vue脚手架是什么意思)

https://github.com/icepy/weex-generator-package

A Weex and Vue.js project,你可以参考它来完善你的Weex应用架构或者直接使用它。

项目介绍

这个项目为钉钉开发者准备了从构建,调试,到打包一系列的流程以及编写weex应用的最佳实践,我们使用Webpack来打包源代码,Babel帮助我们处理ES6的转译。

注意 ?? 此刻,我们移除掉了很多不是必须的项目,比如flow静态类型检查,jasmine单元测试等。

关于转场,你可以选择使用vue-router的方式,也可以使用钉钉的js-api openLink来跳转页面。如果你使用钉钉的js-api,那么你的应用更像一个传统的Native App转场,比如iOS的NavigationController的push,pop等有animation效果转场。

你可以在 weex-generator-package 访问并下载使用它。

目录结构

  1. components 可以共享的组件放在这里

  2. container 如果你使用了vue-router,那么需要使用这里的共用容器

  3. lib 可以共享的函数.js文件放在这里

  4. pages 真正的页面放在这里

  5. platforms 平台相关的入口放在这里

Build Setup

# install dependenciesnpm install# 启动 mock 服务器npm run mock# 启动 vue web dev 环境,自启服务器 at localhost:8080npm run dev:web# build vue web release 环境npm run build:web# 启动 weex dev 环境,自启服务器 at localhost:8089npm run dev:weex# 启动 weex release 环境npm run build:weex# 编译weex和Web环境下所需要的资源,这是可以正式部署的静态资源npm run build

Mock

本项目用koa写了一个简单的mock server,它非常的灵活可复制,你可以找到 mock 目录,在router.js中书写你想要mock的数据,比如GET:

router.get('/weex/get', function *(next) { this.body = {

如果你想写一个POST请求也很容易:

router.post('/weex/post', function *(next) { this.body = {

构建脚本学习资源

  • babel

  • webpack

如何创建一个传统bundle.js式页面

我们可以先看一个很传统的方式来创建一个新页面,一个页面就是一个bundle.js,你应该在Webpack配置中去处理这些bundle.js

当你选择创建一个新的页面时,需要经过下列几个步骤:

  1. 在platforms/weex目录下创建你的入口文件(icepy-entry.js)

import Home from '../../pages/icepy/index.vue';Home.el = '#app';new Vue(Home);
  1. 在pages/目录下创建一个icepy目录并且创建一个index.vue文件,你可以写一个很简单的Hello Your Name

<template>
  1. 在build目录下的webpack.weex.conf.js文件中的entry里填上一个新的入口

// webpack 配置entry:{ 'weex-icepy-bundle': './src/platforms/weex/icepy-entry.js'}

最后,在你的终端里输入 npm run dev:weex,感受一下吧。

如何创建一个带vue-router的页面

有时候类似一个UIViewController式的bundle.js并不是你想要的,很多事情不是很好处理,那么你可以选择vue-router来处理转场,为什么它可以运行weex环境帮你处理转场?因为vue-router本意上是可以运行在任意的JavaScript环境中,你可以设置mode为abstract,而且weex是需要上层框架的render来进行计算渲染Native页面的,这也意味着当我们的路由进行转换时,vue-router会去处理一个Vue Component,而这个Vue Component 正是你需要渲染的页面。

pages目录下创建一个组件(页面),比如dingtalk/index.vue

<template>

访问router.js,参考 https://router.vuejs.org/zh-cn/essentials/getting-started.html 来配置路由。

import VueRouter from 'vue-router';import Home from '../pages/home/index.vue';import Dingtalk from '../pages/dingtalk/index.vue';const routes = [

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接