zoukankan      html  css  js  c++  java
  • Weex入门

    #weex入门

    ##快速上手
    https://github.com/weexteam/article/issues/4

    因为Weex工具链使用Node.js构建,在进行后续步骤前,你需要先安装 Node.js, 在Node.js安装成功后,你可以执行下面的命令来安装Weex命令行程序 Weex Toolkit 。

    ```
    npm install -g weex-toolkit
    ```
    在执行这条命令的时候,后可能会报错,“Please try running this command again as Root/Administrator” error。需要"Change the owner of the files in your /usr/local folder to the current user:"

    ```
    sudo chown -R $USER /usr/local
    ```
    然后再执行

    ```
    npm install -g weex-toolkit
    ```

    ##如何创建一个Weex项目
    https://weex-project.io/cn/doc/advanced/create-a-weex-project.html

    ###iOS

    Mac 是唯一可以开发 iOS 应用的平台,因此创建 iOS 项目只支持 mac。对于 iOS,你需要安装 Xcode 和 CocoaPods 。

    安装 Xcode 最简单的方法是到 Mac App Store。Xcode 体积较大,下载请耐心等待。

    安装好 Xcode 后,你需要运行 Xcode,使 Xcode 自动安装开发者工具和确认使用协议。

    之后你还需要安装 CocoaPods 。CocoaPods 是 Xcode 项目的类库管理工具,可以使用如下命令安装:

    $ sudo gem install cocoapods
    如果执行该命令无反应,很可能是 gem source 问题,你可以切换为淘宝 gem source:

    $ gem sources --remove https://rubygems.org/
    $ gem sources -a https://ruby.taobao.org/
    $ sudo gem install cocoapods
    如有问题,可参考 CocoaPods 官方文档

    ####创建项目

    然后,就可以使用 weexpack 创建 weex 工程了:

    $ weexpack init appName
    weexpack 会自动新建以 appName 命名的目录,并将项目模板拉取到该目录。

    最终形成如下目录结构:

    -> /appName
    .
    |—— .gitignore
    |—— README.md
    |—— package.json
    |-- android.config.json
    |-- ios.config.json
    |—— webpack.config.js
    |—— /src
    | |—— index.we
    |—— /html5
    | |—— index.html
    |—— /ios
    | |—— /playground
    | |—— /sdk
    | |—— /WXDevtool
    |—— /android
    | |—— /playground
    | |—— /appframework
    其中:

    webpack.config.js 是 webpack 配置文件,用于生成 .we 文件的 JSBunlde

    ios.config.json 是 iOS 项目配置文件

    android.config.json 是 Android 项目配置文件

    /src 目录放置 Weex 页面

    /html5 是 H5 端入口文件

    /ios 放置 iOS 项目

    /android 放置 Android 项目

    紧接着,进入目录,并且安装依赖:

    $ cd appName && npm install
    如果安装报错

    npm WARN package.json xxx@0.0.0 No repository field.
    npm WARN package.json xxx@0.0.0 No README data
    只需在package.json里面做如下配置即可:

    ```
    {
    ...
    "private": true,
    ...
    }
    ```
    以这种方式把项目声明为私有,这样npm就不会再提示配置repository及readme了。或者添加项目地址,参考:[NPM安装报错:WARN PACKAGE.JSON, NO REPOSITORY FIELDS](http://hao.jser.com/archive/5381/)

    至此,项目模版创建完成,接下来我们可以自定义我们的 APP 信息并打包运行。

  • 相关阅读:
    C++学习笔记十关联容器
    Ubuntu下使用GDB断点Go程序
    各种语言的数字转罗码方法的实现
    为什么 ++i和i++的效果是一样的,试了javascript ,c++ java
    罗马数字转换阿拉伯数字(Java版,考虑较为全面)
    C++学习笔记九顺序容器(二) ForFreeDom 博客园
    智立方 屁话真言108:能盛事者能成事_智立方的杨石头_新浪博客
    腾讯搜搜高管吴军离职的传闻与真相
    罗马数字_百度百科
    快速深入一门语言的几个问题 Shell909090 随笔杂记
  • 原文地址:https://www.cnblogs.com/xl-phoenix/p/6392262.html
Copyright © 2011-2022 走看看