Skip to content

Weex - Some simple native UI pages written with Weex | 几个简单的原生界面示例,面向新手 & 用 Weex 编写

Notifications You must be signed in to change notification settings

i7soft/toolbox-weex

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

toolbox-weex

一个小型的项目,帮助新手体会一下如何做出可以看、可以用的原生界面。

包含内容

  • div、input、text、image、wxc-button 等组件
  • 组件分割与嵌套
  • repeat 这样的显示逻辑控制方式
  • onclick、oninput 这样的事件
  • {{ }} 将数据插入模板
  • Stream 模块的 fetch API 网络请求
  • Modal 模块的 alert API 警告框
  • 在 .we 文件中通过 require() 来引入 .js 文件
  • 在 webpack config 中增加对 .js 文件的处理,使得 .js 文件中可通过 require() 来引入 .js 文件
  • 在 .js 文件中通过一个临时黑魔法引入 Weex module

如何使用

安装

npm install

预览

HTML 预览

npm run serve

然后访问:

http://localhost:8080/

http://localhost:8080/index.html?page=./dist/translate.js

native 预览

native 预览,需要安装 weex-toolkit 才能使用 weex 命令;

手机上需要使用 Weex Playground app 来扫描二维码。

在 src 目录下:

weex main.we --qr

然后用 Weex Playground app 扫描二维码即可看到:

在 src 目录下:

weex translate.we --qr

然后用 Weex Playground app 扫描二维码即可看到:

开发

开发目录:src

输出目录:dist

  • npm run devserve: 开发时热加载并 HTML 预览: http://localhost:8080/ (改动后自动更新,但需手动刷新浏览器)
  • npm run dev: 监视两个 .we 文件的改动,并自动打包输出为两个 .js 文件
  • npm run build: 将两个 .we 文件打包为两个 .js 文件

(详情请参阅 webpack.config.jspackage.json

服务

有啥疑问,提 Issue 吧,我尽量帮你解答 :D

About

Weex - Some simple native UI pages written with Weex | 几个简单的原生界面示例,面向新手 & 用 Weex 编写

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 64.7%
  • JavaScript 35.3%