Web FrontEnd: Weex Guide

[hhstore]

No description provided.

[hhstore]

weex:

• https://weex.apache.org/cn/guide/

• Weex 可以只编写一份代码，开发出三端都可用的页面。

• 目前 Weex 将 Vue.js 和 Rax 作为其内置的前端框架

• https://segmentfault.com/a/1190000011154120

相关方案对比:

• https://juejin.im/post/5b395eb96fb9a00e556123ef

方案	说明	资源	第三方项目
flutter	跨平台: iOS/ Android 谷歌的移动UI框架	社区	GSYGithubAppFlutter
vue-native
react-native
eros	基于 weex + vue.js 封装, 进阶选择

官方文档:

• 文档摘取比较关键点部分

分类	模块	说明
API:	iOS APIs
API:	BroadcastChannel	实现跨页面通信
内置组件	< input >
内置模块	核心功能模块列表
内置模块	stream	实现网络请求
	modal	弹出消息框: toast、alert、confirm 和 prompt
	dom	对页面里 组件节点 进行一部分特定操作
	animation	在组件上执行动画
	clipboard	从系统的粘贴板获取内容或者设置内容
	storage	本地数据进行CRUD(读写)
	webSocket	交互式通信
	webview	组件操作接口, 一般与 组件一起使用

weex UI 项目文档:

• 官方设计的UI组件库, 包含各种常用的组件

分类	模块	说明
导航	底部导航栏	底部导航栏
导航	顶部导航栏	顶部导航栏
utils	utils 模块	各种内置 utility 功能方法

[hhstore]

使用:

准备工作:

• 可参考: https://weex.apache.org/cn/guide/set-up-env.html

1. 安装 nodejs:

• 安装 nvm
• https://github.com/creationix/nvm#installation
• 注意: Mac安装完, 新建一个 terminal 窗口, nvm 才生效.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

• 安装 nodejs:
• 注意, weex 当前最好使用 node 8 版本, 用更高版本, 依赖插件有报错.
• https://github.com/weexteam/weex-toolkit/issues/419

# 安装最新版:
nvm install node

# 安装指定版本:
nvm install 6.14.4 # or 10.10.0, 8.9.1, etc

nvm ls
->      v11.6.0
         system
default -> node (-> v11.6.0)
node -> stable (-> v11.6.0) (default)
stable -> 11.6 (-> v11.6.0) (default)
iojs -> N/A (default)
lts/* -> lts/dubnium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.16.0 (-> N/A)
lts/carbon -> v8.15.0 (-> N/A)
lts/dubnium -> v10.15.0 (-> N/A)

# v8.15.0
nvm install lts/carbon


# 使用指定版本:
# nvm use node
nvm use lts/carbon

# 查看node版本:
node -v # v11.6.0

# 查看npm 版本:
npm -v # 6.5.0-next.0

• 更改nvm 默认 node版本:

• https://www.jianshu.com/p/04d31f6c22bd

 
#设置默认 node 版本为 v8.15.0
nvm alias default lts/carbon
default -> lts/carbon (-> v8.15.0)

2. 安装 weex-toolkit:

npm install weex-toolkit -g

报错:

• https://github.com/weexteam/weex-toolkit/issues/337

• https://github.com/weexteam/weex-toolkit/issues/344

• https://stackoverflow.com/questions/38993527/cocoapods-failed-to-connect-to-github-to-update-the-cocoapods-specs-specs-repo?answertab=votes#tab-top

• 注意 node 版本是不是 v8, 不是更改一下.

weex update weexpack

3. 安装 ruby 和 cocoapods:

• Mac自带ruby版本太低, 导致 包管理工具 gem 无法安装 cocoapods

• 要重新安装ruby, 再安装 cocoapods.

• 注意, gem默认源被屏蔽, 要修改: https://www.jianshu.com/p/6e5c0f78200a

• http://rvm.io/

• https://ruby-china.org/wiki/rvm-guide

• 中国社区镜像源: https://gems.ruby-china.com/

• https://guides.cocoapods.org/using/getting-started.html

# 基于 rvm 安装 ruby:
# Install RVM stable with ruby:
curl -sSL https://get.rvm.io | bash -s stable

# 
rvm list known

# 
rvm install 2.6.0

# 设置为默认版本:
rvm use 2.6.0 --default 


# 查看已安装的版本:
rvm list



# 安装ruby
brew install ruby

# 
ruby -v
gem -v

# 更改 gem 源, 因为被墙
gem sources -l (查看当前ruby的源)
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/


# 安装 cocoapods:
sudo gem install cocoapods

运行项目:

# 运行:
# 不要使用: npm run ios, 会报错, 找不到 pod
weex run ios

• 报错: https://github.com/weexteam/weex-toolkit/issues/397
  • 原因: xcode 版本太低, Appstore 找到 xcode, 更新一下版本.

安装(更新) xcode:

• https://itunes.apple.com/cn/app/xcode/id497799835
• 苹果应用商店

[hhstore]

weex 示例源码:

• https://weex.apache.org/cn/examples.html
• 官方-有价值示例代码:

模块	说明	示例
stream	动态获取数据	ajax请求
storage	存储模块	IO读写
scroller	懒加载	页面懒加载
recycle-list	支持内存优化的list	页面滚动加载
tabs	多页面	导航栏
完整示例	几个Demo	扫描二维码
reprography	复刻示例	复刻: 电商app

weex UI:

weex-ui:

• https://github.com/alibaba/weex-ui

• https://alibaba.github.io/weex-ui/#/cn/

• 说明: https://alibaba.github.io/weex-ui/#/cn/weex-ui-report

bindingx:

• https://alibaba.github.io/bindingx/
• https://github.com/alibaba/bindingx

weex conf 2018:

• 飞猪分享

[hhstore]

weex 开源项目列表:

• 【Weex】纯 Weex 开发一个小游戏 zwwill/blog#4
• 项目列表: https://www.weexdaxue.com/code
  • 一个第三方网站, 收集很多项目
  • ⭐⭐⭐⭐

Project	评分	说明
xxx	⭐⭐⭐❌❌	--
awesome-weex	⭐⭐⭐⭐	weex相关项目收集
weex-ui-demo	⭐⭐⭐	组件使用示例, 可参考.
GSYGithubAppWeex	⭐⭐⭐⭐⭐	完成度高, github客户端
weex-hackernews	❌❌❌	没什么用, 垃圾项目
网易严选: 复刻	❌❌❌	复刻网易严选, 完成度低, 页面残缺, 没啥价值

补充说明:

• Github 客户端:
• https://github.com/CarGuo/GSYGithubAppWeex
• 依赖组件:

  "dependencies": {
    "buffer": "^5.1.0",
    "highlight.js": "^9.12.0",
    "himalaya": "^1.0.1",
    "moment": "^2.21.0",
    "node-sass": "^4.9.0",
    "phantom-limb": "0.0.1",
    "sass-loader": "^6.0.7",
    "url-parse": "^1.2.0",
    "vue": "^2.5.11",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0",
    "weex-ui": "^0.5.3",
    "weex-vue-render": "^1.0.17"
  },

[hhstore]

weex FAQ:

Error Fix:

1. Print: Entry, ":CFBundleIdentifier", Does Not Exist

• https://www.jianshu.com/p/6b4b8da983f4
• 原因: 项目根目录下 ios.config.json 文件, 配置缺失 AppId, 测试APP, 可以随便填写, 如"com.demo.app", 填写完, 重新执行 weex run ios