weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架

jk_v1 发布于2019-08-21 18:24 / 1903人阅读

摘要：要想用好必须对基础，体系，打包工具有较深的了解对，有了解。官方提供的脚手架不能指定入口文件，如果我们想要在项目中使用，没有入口文件将会变得比较复杂。那么，我们应该如何使得当前项目具有入口文件呢答案是只能修改文件。

写在前面的话：

注意！该文档是2017年年底的文章，那个时候weex还有很多问题，现在weex已经全面更新，文档也比较全。下面的讲解可能不太适应新的weex框架，后面我会再立贴讲解。谢谢各位关注。

weex官方文档不完善，在整个实施过程中遇到过很多坑，中途几次想放弃，总是有些不甘心。攻坚克难，总也是会有一些收获，先将收获进行分享也或是记录，防止忘记。要想用好weex必须对es5/es6基础，vue体系，打包工具webpack有较深的了解；对ios，android有了解。

官方提供的weex脚手架不能指定入口文件，如果我们想要在项目中使用vuex,vue-router，没有入口文件将会变得比较复杂。那么该如何搭建具有入口文件的脚手架呢？首先，我们先把官方提供的脚手架使用一下，然后再其基础上进行修改

一. 初始化weex项目

$ weex init helloweex

二. 安装依赖包

$ cd helloweex
$ npm install
或者可以使用淘宝镜像安装
$ cnpm install

**注意！如果使用npm安装依赖，建议先手动创建node_modules目录再进行安装，避免后期出现权限不足的问题**

三. 在浏览器中进行测试

注意！在浏览器中显示成功并不意味着在本地就可以显示成功！因为这是两个不同的执行环境。
$ npm run serve

四. 此时会遇到第一个坑

原因：

https://www.npmjs.com/package/uglifyjs-webpack-plugin
   
解决方案：
1）安装 uglifyjs-webpack-plugin
    $ cnpm i -D uglifyjs-webpack-plugin
2) 应用
    const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
    module.exports = {
      plugins: [
        new UglifyJsPlugin()
      ]
    }

3) 重新部署，不再报错！

五. 模拟器上运行

如果之前步骤可以完成，只能说明当前代码在浏览器上可以执行，能不能本地运行还需要再进行测试。要想本地测试必须安装模拟器（ios或android），本文章不提供具体的安装过程，如有需要，请自行查看其它文章。
本章以ios环境为例进行测试
依次执行如下命令
1) 安装ios平台
    $ weex platform add ios

2) 安装依赖
    $ cd platforms/ios
    $ pod install

3) 运行
    $ cd ../..
    $ weex run ios (次过程较慢，需等待一会)
4) 选择运行环境后启动模拟器

六. 编写代码

查看webpack.config.js得知会，该脚手架会根据src下vue文件产生一个对应的.js文件存放到demo目录下，但是传统的vue开发，我们都希望有个入口文件（main.js或者entry.js）,然后在该文件中导入其他模块，进行页面的总体配置等操作。

那么，我们应该如何使得当前项目具有入口文件呢？答案是只能修改webpack.config.js文件。

1）添加入口文件配置

2) 删除多余配置信息
删除getEntryFileContent函数
删除walk函数
删除walk() walk函数的调用

3) 在src目录下添加主vue,App.vue

4) 在src目录下添加入口文件entry.js，并且删除temp目录

5) 在浏览器中进行测试
    $ npm run serve

6) 在ios模拟器上进行测试
    $ weex run ios

    
7) 如果发现打包后的文件不叫index.js可以修改webpack.config.js

8）解决页面无法覆盖整个屏幕的问题
需要在原生代码中进行简单的修改

超融合服务器混合云 Weex weex webrtc weex图表 weex-playground

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90426.html

weex踩坑之旅第二弹 ~ 在weex中集成vue-router

摘要：也就是说在中，我们的代码是要在环境中运行。而在中，是没有等以及的，即所有的框架都是不可以使用的。比如相关组件，相关组件，等都不能在中引用。是可以在中使用的。接着第一弹讲，我们已经搭建好一个属于自己的weex项目了，然后如何开发呢？由于之前项目中都是采用vue全家桶进行开发，路由使用vue-router插件，状态管理使用vuex，Ajax前后台交互使用axios，图标库使用font-a...

tyheist 2019-08-21 18:25 评论0 收藏0
踩坑--- 基于钉钉的Weex微应用开发起手式（其实写完发现变成Weex相关资料汇总了）

摘要：问题，你可以在中文讨论板块提交问题，地址。文字展现必须使用标签关于端的点透事件需要在上层视图上加上，如果上层视图有事件，多加一个中间层，把加在空事件视图上关于事件注意仅支持和，暂不支持。事件会在页面就要关闭时被触发。好吧，我知道你来看这个文章，一定是遇到坑了,所以，把这几个放在最开始吧现在，如果你的团队的技术栈是react，请尝试这个吧,跟react很像，如果你的团队一直使用rea...

neu 2019-06-25 12:17 评论0 收藏0
踩坑--- 基于钉钉的Weex微应用开发起手式（其实写完发现变成Weex相关资料汇总了）

摘要：问题，你可以在中文讨论板块提交问题，地址。文字展现必须使用标签关于端的点透事件需要在上层视图上加上，如果上层视图有事件，多加一个中间层，把加在空事件视图上关于事件注意仅支持和，暂不支持。事件会在页面就要关闭时被触发。好吧，我知道你来看这个文章，一定是遇到坑了,所以，把这几个放在最开始吧现在，如果你的团队的技术栈是react，请尝试这个吧,跟react很像，如果你的团队一直使用rea...

fish 2019-06-25 16:53 评论0 收藏0
踩坑--- 基于钉钉的Weex微应用开发起手式（其实写完发现变成Weex相关资料汇总了）

摘要：问题，你可以在中文讨论板块提交问题，地址。文字展现必须使用标签关于端的点透事件需要在上层视图上加上，如果上层视图有事件，多加一个中间层，把加在空事件视图上关于事件注意仅支持和，暂不支持。事件会在页面就要关闭时被触发。好吧，我知道你来看这个文章，一定是遇到坑了,所以，把这几个放在最开始吧现在，如果你的团队的技术栈是react，请尝试这个吧,跟react很像，如果你的团队一直使用rea...

zhouzhou 2019-08-23 10:51 评论0 收藏0
踩坑--- 基于钉钉的Weex微应用开发起手式（其实写完发现变成Weex相关资料汇总了）

摘要：问题，你可以在中文讨论板块提交问题，地址。文字展现必须使用标签关于端的点透事件需要在上层视图上加上，如果上层视图有事件，多加一个中间层，把加在空事件视图上关于事件注意仅支持和，暂不支持。事件会在页面就要关闭时被触发。好吧，我知道你来看这个文章，一定是遇到坑了,所以，把这几个放在最开始吧现在，如果你的团队的技术栈是react，请尝试这个吧,跟react很像，如果你的团队一直使用rea...

Carbs 2019-08-05 14:37 评论0 收藏0