专栏首页禅林阆苑weex 踩坑笔记 【原创】

weex 踩坑笔记 【原创】

weex 踩坑笔记

Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257

目录导航

  • weex 踩坑笔记
    • 1. 基本说明
    • 2. weex-toolkit的使用
      • 2.1 配置入口js文件
      • 2.2 基本命令
      • 2.3 开发调试方式
    • 3. 集成SDK
      • 3.1 集成 iOS SDK
        • 3.1.1 使用 ios/playground
        • 3.1.2 修改DemoDefine.h文件
        • 3.1.3 去掉navigatebar
      • 3.2 集成 Android SDK
        • 3.2.1 配置adb,vi ~/.bash_profile
        • 3.2.2 基于wxsample打包jsbundle
  • 4. 其他
    • 4.1 vue和we
    • 4.2 使用vue开发weex和传统vue开发的区别
    • 4.3 Weex 对 CSS 样式的支持情况
    • 4.4 weex对比react-native
    • 4.5 安卓应用签名

1. 基本说明

weex工作流程

官网: http://weex.apache.org/cn/ Playground: http://dotwe.org/vue

2. weex-toolkit的使用

weex-toolkit是官方提供的weex开发脚手架工具(新版已经整合weexpack),可以实现构建项目、调试、打包等全套操作

2.1 配置入口js文件

weex-toolkit脚手架会根据src下的index.vue文件产生一个对应的js文件放到demo目录下,但传统的vue开发一般有个入口文件(main.js或entry.js)用来导入其他模块,进行页面总体配置等操作,可以通过修改webpack.config.js文件实现,详细代码见我的github 1. 添加入口文件配置

const entry = {index:pathTo.resolve('src','entry.js?entry=true')};
const weexEntry = {index:pathTo.resolve('src','entry.js?entry=true')};
  1. 删除多余配置 删除getEntryFileContent函数、walk函数、walk()
  2. 在src目录下添加 App.vue
  3. 在src目录下添加入口文件entry.js,并删除temp目录
import App from './App.vue'
new Vue(Vue.util.extend({
    el:'#root'
},App))
  1. 解决页面无法覆盖整个屏幕,简单修改WXDemoViewController原生代码
// _weexHeight = self.view.frame.size.height - 64;
_weexHeight = self.view.frame.size.height;

2.2 基本命令

【默认配置的 npm script】 init: 初始化weex项目 build: 源码打包,生成 JS Bundle dev: webpack watch 模式,方便开发 serve: 开启静态服务器 debug: 调试模式

$ npm install -g weex-toolkit
$ weex init weexdemo
$ cd weexdemo
$ npm install
# 开启 watch 模式和静态服务器,进入 http://localhost:8080/index.html
$ npm run dev & npm run serve
# 调试
$ weex debug
# 安装ios平台和依赖
$ weex platform add ios
$ cd platforms/ios
$ pod install
# 运行并启动模拟器
$ cd ../..
$ weex run ios
$ weex platform add android
$ weex run android

2.3 开发调试方式

  1. 使用传统 vue 开发方式开发页面
  2. 浏览器实时刷新调试
$ npm run dev & npm run serve
  1. 使用移动端官方App-WeexPlayground扫码进入移动端远程调试模式

进入Debugger,用于打印log

进入Inspector,用于审查元素

3. 集成SDK

为了最终把打包jsbundle打包进原生App,需要集成SDK

3.1 集成 iOS SDK

3.1.1 使用 ios/playground

$ pod install --no-repo-update

3.1.2 修改DemoDefine.h文件

  1. 修改
#define HOME_URL [NSString stringWithFormat:@"http://%@:12580/examples/build/index.js", DEMO_HOST]

#define HOME_URL @"file:///Users/sunshine/Downloads/bundlejs/index.js"
  1. 修改IP
#define CURRENT_IP @"192.168.0.1"

3.1.3 去掉navigatebar

在WXDemoViewController.m中添加

self.navigationController.navigationBar.hidden = YES;

3.2 集成 Android SDK

3.2.1 配置adb,vi ~/.bash_profile

export ANDROID_HOME=/Users/sunshine/Library/Android/sdk
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools

3.2.2 基于wxsample打包jsbundle

  1. 下载wxsample,import project根据错误提示修复(下载的时候注意关闭代理)
  2. 直接run
  3. 引入新的jsbundle jsbundle文件路径:app/src/main/assets/ 修改LocalActivity.java中的hello.js
  4. 默认显示jsbundle的内容 默认页提供了本地加载、网络加载、framework三种方式,修改AndroidManifest.xml
<activity android:name=".IndexActivity">
</activity>
<activity android:name=".LocalActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
    </intent-filter>
</activity>
<activity android:name=".NetworkActivity">
</activity>
  1. 去掉顶部的ActionBar 修改AndroidManifest.xml
android:theme="@style/AppTheme.NoActionBar"
  1. 允许下载图片 修改ImageAdapter,使用alt+enter修复找不到的包
public class ImageAdapter implements IWXImgLoaderAdapter {
  public ImageAdapter() {
  }
  @Override
  public void setImage(final String url, final ImageView view,
                       WXImageQuality quality, WXImageStrategy strategy) {
    WXSDKManager.getInstance().postOnUiThread(new Runnable() {
      @Override
  public void run() {
        if(view==null||view.getLayoutParams()==null){
          return;
        }
        if (TextUtils.isEmpty(url)) {
          view.setImageBitmap(null);
          return;
        }
        String temp = url;
        if (url.startsWith("//")) {
          temp = "http:" + url;
        }
        if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
          return;
        }
        Picasso.with(WXEnvironment.getApplication())
                .load(temp)
                .into(view);
      }
    },0);
  }
}

其中Picasso需要在app的build.gradle中添加依赖

compile 'com.squareup.picasso:picasso:2.5.2'
  1. 打包apk 打包菜单选项:Build->Build APK apk文件路径:app/build/outputs/apk/app-debug.apk

4. 其他

4.1 vue和we

新版本的weex使用vue开发,最终得到vue文件,we文件是老版本的源码文件,推荐使用vue2.0开发

4.2 使用vue开发weex和传统vue开发的区别

官方文档:Weex 和 Web 平台的差异

总结一下: * Weex 环境中没有 DOM + 不支持 DOM 操作,原生平台没有 DOM 概念 内建组件 + 不支持 Web 中部分事件类型 通用事件 + 不区分事件的捕获阶段和冒泡阶段,相当于 DOM 0 级事件

  • Weex 环境中没有 BOM
    • 没有 window 、screen 对象,可以通过 WXEnvironment 获取设备环境信息
    • 没有 document 对象,没有选择器方法
    • 没有 history 、location 、navigator 对象,有 navigator 模块
  • 能够调用移动设备原生 API
    • 通过模块调用设备原生 API,如 clipboard 、 navigator 、storage 等

4.3 Weex 对 CSS 样式的支持情况

官方说明

简单概括: * 支持基本的盒模型 * 支持 position 定位布局 * 支持使用 flexbox 布局 * 限制 + 只支持单个类名选择器,不支持关系选择器,也不支持属性选择器 + 默认是组件级别的作用域,没有全局样式 + 不支持样式继承(因为有作用域隔离) + 考虑到样式的数据绑定,样式属性暂不支持简写

4.4 weex对比react-native

  1. react的JSX语法学习使用有一定的成本,vue更接近常用的web开发方式
  2. 调试,weex支持在chrome中预览页面dom节点,ReactNative不支持
  3. 页面开发,weex提供了一个playground,可以方便的预览正在开发的页面 ,ReactNative需要建立一个native工程,然后编译运行
  4. ReactNative官方只能将ReactNative基础js库和业务js一起打成一个js bundle,没有提供分包的功能,需要制作分包打包工具,weex默认打的js bundle只包含业务js代码,体积小很多,基础js库包含在weex sdk中
  5. RN统一了IOS和Android两端,weex统一了IOS、Android、Web三端

4.5 安卓应用签名

打包的安卓apk还需要进行签名才能发布安装 1. 使用jdk的keytool命令生成keystore,参数-validity为证书有效天数

keytool -genkey -alias android.keystore -keyalg RSA -validity 100 -keystore android.keystore
  1. 使用360签名工具签名,使用360加固宝加固
  2. 上传到应用市场

【By CS逍遥剑仙】 未经允许不得转载:禅林阆苑 » weex 踩坑笔记 【原创】

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端接口模拟工具Mock.js上手实践

    在前后端开发过程中,常常会遇到前后端进度不一致的情况,如果前端停下来等后端接口调试完再继续开发会大大降低前端的开发效率。Mock.js 是一款成熟强大的接口模拟...

    CS逍遥剑仙
  • Vue2.5源码阅读笔记01—代码结构与初始化

    Vue作为当下最流行的渐进式的js框架,其渐进式的思想、虚拟DOM的运用、组件化的开发模式、响应式数据侦听原理值得开发者进行探索学习,其中运用的代码组织的技巧,...

    CS逍遥剑仙
  • 浏览器原理学习笔记04—浏览器中的页面事件循环系统

    每个渲染进程都有一个非常繁忙的主线程,需要一个系统来统筹调度任务(具体任务后面详解)

    CS逍遥剑仙
  • 带你入坑01-weex-搭建环境

    安装 Node.js 环境成功后,npm 包管理工具也会自动安装成功 输入下面命令检查一下

    酷走天涯
  • 可能是史上最全的weex踩坑攻略

    > 这是一篇有故事的文章 --- 来自一个weex在生产环境中相爱相杀的小码畜.. ? 故事一: Build 虽然weex的口号是一次撰写 多端运行, 但其实b...

    IMWeb前端团队
  • 可能是史上最全的weex踩坑攻略

    虽然weex的口号是一次撰写 多端运行, 但其实build环节是有差异的, native端构建需要使用weex-loader, 而web端则是使用vue-loa...

    IMWeb前端团队
  • 深度剖析Lottie动画原理

    导语 本文主要挖掘、弄懂lottie动画背后的原理。lottie动画是如何让30FPS流畅运行? 动画原理 工作以来,处理过css、js、canvas、骨骼动...

    腾讯VTeam技术团队
  • 跨越适配&amp;性能那道坎,企鹅电竞Android weex优化

    企鹅电竞从17年6月接入weex,到现在已经有一年半的时间,这段时间里面,针对遇到的问题,企鹅电竞终端主要做了下面的优化:

    WeTest质量开放平台团队
  • 在python中单线程,多线程,多进程对CPU的利用率实测以及GIL原理分析

    skylark
  • 跨越适配&性能那道坎,企鹅电竞Android weex优化

    原文链接:https://wetest.qq.com/lab/view/441.html

    WeTest质量开放平台团队

扫码关注云+社区

领取腾讯云代金券