weex-loader 简单使用

作者: 2010jing | 来源:发表于2016-06-29 11:49 被阅读3063次

taobao镜像

https://npm.taobao.org

npm install -g cnpm --registry=https://registry.npm.taobao.org

初始化

进入到项目目录下

cnpm init -y

会自动创建package.json文件

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

安装必要的包

cnpm install --save-dev webpack weex-loader

有三个包不一定所以版本都会自动安装,有时候需要自己手动安装

cnpm ls --depth=0

weex-scripter@0.1.4
weex-styler@0.0.17
weex-templater@0.3.0

cnpm install  weex-scripter@0.1.4 weex-styler@0.0.17 weex-templater@0.3.0

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.1",
    "weex-loader": "^0.1.5",
    "weex-scripter": "^0.1.4",
    "weex-styler": "^0.0.17",
    "weex-templater":"^0.3.0"
  }
}

创建src目录,放置源码

mkdir src
touch src/foo.we

foo.we

<template>
    <div>
        <text>Hello</text>
    </div>
</template>

在项目根目录下创建一个webpack.config.js

var webpack =require('webpack')
var loader =require('weex-loader')
var scripter =require('weex-scripter')
var styler =require('weex-styler')
var templater =require('weex-templater')

loader.useScripter(scripter)
loader.useStyler(styler)
loader.useTemplater(templater)

module.exports = {
    entry : './src/foo.we?entry',
    output : {
        path : './dist',
        filename : 'foo.js'
    },
    module : {
        loaders : [
            {
                test : /\.we(\?[^?]+)?$/,
                loader : 'weex'
            }
        ]
    }
}

在package.json加两个脚本
"build": "webpack",
"dev":"webpack --watch",

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev":"webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.13.1",
    "weex-loader": "^0.1.5",
    "weex-scripter": "^0.1.4",
    "weex-styler": "^0.0.17",
    "weex-templater":"^0.3.0"
  }
}

运行 命令

cnpm run build

项目目录下会生成 dist 文件夹,是 js bundle

第三方脚本文件

在src内创建 3rd.js

touch src/3rd.js

然后在foo.we中加入

<template>
    <div>
        <text>Hello</text>
    </div>
</template>

<script>
    require('./3rd.js')
</script>

3rd.js中写入

// 在 js 文件里原本无法找到 Weex native module 对象
// 这段代码只供临时使用
// 用来找到 Weex native module 对象
var modal
__weex_define__('@weex-temp/x', function (__weex_require__) {
  modal = __weex_require__('@weex-module/modal')
})

// 可以在任意位置调用该 native module APIs
modal.toast({message: 'hello'})

安装serve 和 weex-html5

cnpm install --save-dev serve weex-html5

安装完毕后,将node_modules/weex-html5/index.html 移动到根目录下

cp node_modules/weex-html5/index.html .

然后改一下index.html内引用路径
原来是

<script src="./dist/weex.js"></script>

修改后

  <script src="./node_modules/weex-html5/dist/weex.js"></script>

在修改一下入口文件
原来的

var page = getUrlParam('page') || 'demo/build/index.js'

修改后的

var page = getUrlParam('page') || 'dist/foo.js'

在package.json 添加脚本
** "serve": "serve -p 8080", **

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch",
    "serve": "serve -p 8080",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "serve": "^1.4.0",
    "webpack": "^1.13.1",
    "weex-html5": "^0.2.22",
    "weex-loader": "^0.1.5",
    "weex-scripter": "^0.1.4",
    "weex-styler": "^0.0.17",
    "weex-templater": "^0.3.0"
  }
}

运行测试

cnpm run serve

查看结果

浏览器输入 localhost:8080
结果输出来,toast 也会输出来。

weex.png

相关文章

  • weex-loader 简单使用

    taobao镜像 https://npm.taobao.org 初始化 进入到项目目录下 会自动创建package...

  • 简单使用

    创建模型 过滤器 我们有一些字段和我们想让用户筛选的基础上 名称、价格或release_date。 我们创建一个 ...

  • gorange

    数组中简单使用 map中简单使用

  • 简单使用使用kaggle

    向我这样的条件不好的可以考虑借助云gpu来加速训练,借助kaggle可以在kaggle服务器上训练数据,kaggl...

  • 零碎的小程序笔记

    目录 template的简单使用WXS的简单使用npm的简单使用倒计时js的实现wx:for的使用一些js方法记录...

  • 命令行的简单使用

    Git命令行的简单使用,仅供自己使用 pod命令行的简单使用

  • 单元测试和OCMock

    OCMock使用一、安装及简单使用:使用Cocoapod引入:pod 'OCMock' 简单使用:新建一个单元测试...

  • Alamofire类似AFNetworking的简单使用和封装

    简单的使用。简单的使用。简单的使用。注定该文弱鸡一个,求拍砖。 一、介绍 Alamofire(Swift)的前身是...

  • Android ViewPager 使用总结

    ViewPager 简单使用 ViewPager + PagerAdapter简单的 View 可以使用这个实现,...

  • vuex简单简单使用记录

    1、Vuex有啥用(非官方解释)举例,组件a b 使用了同一个数据源count,当操作a的时候count++,同时...

网友评论

本文标题:weex-loader 简单使用

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