1.5.3

imouou · May 31, 2019 · 605369e · 605369e
1 parent 9c5bcc8
commit 605369e
Show file tree

Hide file tree

Showing 69 changed files with 851 additions and 224 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -9,6 +9,8 @@
 | BUI 1.5.x 文档更新  |2018-11-06      |
 | BUI 1.5.1 文档更新  |2019-1-14      |
 | BUI 1.5.2 文档更新  |2019-3-19      |
+| 更新数据驱动章节  |2019-4-01      |
+| 更新模块生命周期章节  |2019-5-29      |
 
 !> 注意: `1.5.x` 的切图规范为 `750px` 设计稿, `1.4.x` 旧版切图规范为 `540px` 设计稿, 两者不能直接替换更新, 请先确保你的文档跟你当前开发的bui版本一致. `bui.version`可以查看版本, `bui.currentPlatform`可以查看当前`bui.js` 属于哪个平台.
 

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -1,4 +1,8 @@
-* [1.4.x 旧版教程入口](http://www.easybui.com/guide-1.4.x/)
+* 链接
+    * [1.4.x 旧版教程入口](http://www.easybui.com/guide-1.4.x/)
+    * [Link 专栏](linkapi.md)
+    * [BUI 专栏](article.md)
+
 
 * 入门
 
@@ -13,8 +17,9 @@
 
 
 * 进阶
-  * [单页路由](chapter2/router.md)
   * [模块化](chapter2/loader.md)
+  * [单页路由](chapter2/router.md)
+  * [单页生命周期](chapter2/life.md)
   * [控件用法](chapter2/controls.md)
   * [动画交互](chapter2/animate.md)
   * [常用方法](chapter2/method.md)
@@ -29,6 +34,7 @@
   * [表单绑定](store/form.md)
   * [模板渲染](store/template.md)
   * [事件处理](store/event.md)
+  * [数据调试](store/debug.md)
   * [控件结合](store/controls.md)
   * [综合案例](store/case.md)
 

diff --git a/docs/changelog.md b/docs/changelog.md
@@ -3,7 +3,87 @@
 ## 目录
 [TOC]
 
-## 1.5.2 20190328
+## 1.5.3 20190501
+
+### 升级指南
+
+** 一, 资源替换: **
+
+执行命令, 选择你使用的平台, buijs 需要更新到 0.5.0 命令才会生效
+
+```
+# 更新 webapp 平台 bui.css, bui.js
+$ buijs update   
+
+# 更新 dcloud 平台 bui.css, bui.js
+$ buijs update -p dcloud   
+
+# 更新 apicloud 平台 bui.css, bui.js
+$ buijs update -p apicloud
+
+# 更新 appcan 平台 bui.css, bui.js
+$ buijs update -p appcan    
+```
+
+b-el bs.$els.demo.innerText
+bs.items.$set
+b-on 
+bs.$set
+b-key
+b-ref 子组件
+
+
+### 重要更新
+
+微信IOS版运行的表单, 如果出现底部有灰色的区域, 监听取消焦点以后,调用scrollIntoView可以解决.
+```
+router.$("input,textarea").on("blur", function() {
+    this.scrollIntoView(false)
+})
+```
+
+### bui.css
+1. 修复默认路由跳转效果,在IPhone第一次跳会闪白问题.
+
+### bui.router
+1. 优化firstAnimate参数, 当等于true时, 要跳转过去的页面如果是地图,chart等比较耗性能的页面, 应该采用这种动画优先的方式,避免跳转过程中渲染图表导致卡顿. 如果是跟 store 一起使用,则不建议开启, 会先跳转过去后再进行数据渲染.
+2. 修复bui.back 如果是指定模块名时,后退的页面不正确.
+
+### bui.extend
+1. 新增插件扩展
+
+### bui.array
+1. bui.array.set 支持替换整个数据
+2. bui.array.getAll 支持获取多个数组是否存在
+
+### bui.store
+1. 修复set 方法会触发2次trigger问题
+2. 
+
+### bui.number
+1. 新增 parentId 参数, 默认: .bui-page , 正常初始化一组, 只需一次, 不用id 参数, 这样即使在列表里的 number 动态的也能正常初始化.
+2. 
+
+### bui.getPageParams
+1. 修复在单页路由的 bui.ready 里面拿不到页面参数问题
+
+### bui.upload
+1. startAll 方法,新增 needFileinfo参数, 可以把文件的基本信息一起传给接口, 对于实现一个页面多个上传类型,共享一个文件上传控件.
+
+### bui.searchbar
+1. 新增value方法,获取当前的关键字.
+
+### bui.list, bui.pullrefresh, bui.scroll, bui.router, bui.tab, bui.slide
+1. 新增resize方法
+
+### bui.upload, bui.fileselect
+1. 新增resize方法, 压缩图片
+
+### bui.list
+1. 新增autoUpdatePage参数,默认true
+1. 新增updatePage方法, 用于手动更新判断是否还有最后一页数据.
+
+## 1.5.2 20190401
 
 ### 升级指南
 

diff --git a/docs/chapter1/about.md b/docs/chapter1/about.md
@@ -3,7 +3,7 @@
 
 ## BUI 是什么?
 
-?> BUI 是用来`快速构建界面交互`的UI框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, `可以嵌入平台` ( 微信, 小程序, 钉钉, 淘宝, 支付宝等 ), 亦可以跟其它第三方平台`打包成独立应用`( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圆舟 等), 最终可以`全跨平台展示`. 
+?> BUI 是用来`快速构建界面交互`的UI交互框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, `可以嵌入平台` ( Link, 微信, 小程序, 钉钉, 淘宝, 支付宝等 ), 亦可以跟其它第三方平台`打包成独立应用`( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圆舟 等), 最终可以`全跨平台展示`. 
 
 ?> 结合BUI提供的[BUI-Fast编辑插件](buifast), [NPM工具](chapter1/installation), BUI更是一个移动快速开发的解决方案. 可以解决以下常见问题.
 

diff --git a/docs/chapter1/debug.md b/docs/chapter1/debug.md
@@ -38,7 +38,7 @@ $ npm run dev
 
 js:
 
-!> ajax请求的时候使用`相对路径`.
+!> **注意:** ajax请求的时候请使用`相对路径`,这样代理才会正确转发.
 
 ```
 bui.ajax({

diff --git a/docs/chapter1/installation.md b/docs/chapter1/installation.md
@@ -5,14 +5,14 @@
 
 1. 编辑器 ( 推荐: `vscode`, `Atom` 或 `Sublimetext3` );
 2. `bui-fast` [点击下载](https://github.com/imouou/BUI-Fast-Snippets/releases) (配合编辑器快速书写插件, 支持 Vscode, Atom , Sublimetext , Webstorm , APICloudIDE ) [查看安装说明](tools/buifast.md);
+3. [`buijs`](tools/buijs) cli工程构建工具, 用于快速构建工程,模板,更新平台等功能
 
 ## 下载开发包
 
 !> 用过npm, 我们推荐您学习使用[buijs](tools/buijs.md)`自动化构建`, 自动化构建默认是最新的`bui`版本.
 
 - [下载BUI单页开发包](http://www.easybui.com/downloads/source/bui/bui_router_dev_latest.zip)
 
-
 - [下载BUI多页开发包](http://www.easybui.com/downloads/source/bui/bui_dev_latest.zip)
 
 ## 了解规范

diff --git a/docs/chapter1/multipage.md b/docs/chapter1/multipage.md
@@ -1,4 +1,4 @@
-# 多页路由
+# 多页路由开发
 
 ?> [上一节](chapter1/quickstart) 我们用最简单的方式,创建了一个`index.html`, 当我们创建了多个页面以后, 就需要页面跳转了.
 

diff --git a/docs/chapter1/quickstart.md b/docs/chapter1/quickstart.md
@@ -74,16 +74,7 @@
 *焦点图结构*
 
 ```html
-<div id="uiSlide" class="bui-slide">
-    <div class="bui-slide-main">
-        <ul>
-            <li>
-                <!--第1屏-->
-                <img src="" alt="">
-            </li>
-        </ul>
-    </div>
-</div>
+<div id="uiSlide" class="bui-slide"></div>
 ```
 
 !> 脚本初始化必须在 `bui.ready` 里面执行, 多页开发`一个页面对应一个` bui.ready 其它自由编写, 便于自己维护就好.
@@ -93,10 +84,17 @@
 ```js
   // 焦点图控件初始化
   var uiSlide = bui.slide({
-      id:"#uiSlide",
-      height:380,
-      autopage:true
-  })
+        id: "#slide",
+        height: 380,
+        autopage: true,
+        data: [{
+          image: "images/banner01.png",
+          url: "pages/ui_controls/bui.slide_title.html",
+        },{
+          image: "images/banner02.png",
+          url: "pages/ui_controls/bui.slide_title.html",
+        }]
+    })
 ```
 ?> 给实例增加事件监听. 
 
@@ -148,20 +146,7 @@
       </header>
       <main>
         <!-- 焦点图 -->
-        <div id="uiSlide" class="bui-slide">
-            <div class="bui-slide-main">
-                <ul>
-                    <li>
-                        <!--第1屏-->
-                        <img src="http://www.easybui.com/demo/images/banner01.png" alt="">
-                    </li>
-                    <li style="display: none;">
-                        <!--第2屏 设置display:none;可以避免加载中闪跳问题-->
-                        <img src="http://www.easybui.com/demo/images/banner02.png" alt="">
-                    </li>
-                </ul>
-            </div>
-        </div>
+        <div id="uiSlide" class="bui-slide"></div>
       </main>
       <footer>
         <!-- 固定底部区 -->
@@ -173,9 +158,16 @@
         bui.ready(function() {
           // 焦点图控件初始化
             var uiSlide = bui.slide({
-                id:"#uiSlide",
-                height:380,
-                autopage:true
+                id: "#slide",
+                height: 380,
+                autopage: true,
+                data: [{
+                  image: "images/banner01.png",
+                  url: "pages/ui_controls/bui.slide_title.html",
+                },{
+                  image: "images/banner02.png",
+                  url: "pages/ui_controls/bui.slide_title.html",
+                }]
             })
             // 监听跳转以后触发
             uiSlide.on("to",function(index){
@@ -207,7 +199,7 @@
 *方案2: *
 - ui-html <kbd>Tab</kbd>    生成bui页面引用
 - ui-page <kbd>Tab</kbd>    生成bui标准页面结构
-- ui-slide <kbd>Tab</kbd>   生成焦点图控件结构
+- ui-slide <kbd>Tab</kbd>   生成焦点图控件静态结构
 - bui-slide <kbd>Tab</kbd>  生成焦点图控件初始化代码
 
 

diff --git a/docs/chapter1/why.md b/docs/chapter1/why.md
@@ -2,37 +2,20 @@
 
 ?> 为什么要用,相信很多人有这样的疑问, 我以几个实际项目遇到的场景来说明下使用BUI的应用及好处吧. 
 
-
-*场景1: webapp使用第三方平台打包?*
-
-!> 开发好的webapp应用在浏览器跑的好好的,但在第三方平台打包以后,数据出不来! 
-
-?> 这是因为有些平台本地打包的时候,禁止了跨域, 导致你原本的`$.ajax` 之类的web请求被禁止了, 因为这个请求,你要改的地方可能是N多个地方, 而使用BUI, 你用`bui.ajax`去请求你的数据,面对这种多变的情况, 你只需要改一个配置, 
-
-`bui.isWebapp = false;` 
-
-!>注意: `1.5.1 开始bui.ajax,bui.upload开始不再随状态改变, 需要再次通过全局配置,使用原生.  
-```
-bui.config.ajax={ needNative:true }` 
-```
-
-?> 这样页面的请求就会采用 原生平台的请求, 就没有跨域问题了. 这个也是BUI最早的设计初衷. 但BUI不仅限于这个跨域问题, 还有页面的切换等等, 你都可以一键切换为原生容器. 
-
-
 ?> 感兴趣的朋友还可以看看这篇文章,对BUI的设计以及使用方式都做了一定的说明,有助于理解.
 <a href="https://segmentfault.com/a/1190000012994082" target="_target">2018开发最快的webapp框架--BUI设计思路解析</a>
 
-*场景2: 开发好的打包应用,客户说要支持微信及浏览器?*
+*场景1: 开发好的打包应用,客户说要支持微信及浏览器?*
 
 !> 我们用第三方的平台开发并打包了一个应用, 刚开始的需求是说, 只要安卓跟IOS版就好, 等做完以后, 客户觉得想要开发一个跨平台的版本,微信浏览器都能拥有基本功能!  
 
 ?> 这个时候,你的很多业务都是可以复用的, 但是由于用了平台结合的UI, 在跨平台上面表现不佳, 无法适配? 一切都得从头开始. 而使用BUI开发,一开始就是跨平台的, 所以并不存在效果不一致这个问题, 你需要的是, 把业务用到原生的部分去掉. 
 
-*场景3: 第三方平台的迁移*
+*场景2: 第三方平台的迁移*
 
 !> 假设你公司有一个自己的打包平台,有自己的UI, 有自己的原生API, 一切都近乎完美, 突然有一天, 客户说,我们想使用第三方平台开发打包, 一个客户说要用Dcloud,一个说要用APICloud,也可能是APPCan. 这时候, 一个混合框架包含原生API跟UI, 你的团队需要学习, `DCloud+UI`, `APICloud+UI`, `APPcan+UI` ... 每个UI都跟自己的框架结合紧密, 但最终团队的学习成本相当的高昂! 
 
-?> 其实分析以后你会发现,一个应用的开发,很多效果,交互都应该是通用的, 只有少部分原生需要用第三方平台来开发, 这个时候你只需要使用 `BUI+APICloud`, `BUI+DCloud`, `BUI+APPCan` 等等, 你只需要用到原生api的时候,查一下, 开发方式还是按BUI的来, 最终可以在常用的平台都保持一致的交互效果, 学一个就够了. 
+?> 其实分析以后你会发现,一个应用的开发,很多效果,交互都应该是通用的, 只有少部分原生需要用第三方平台来开发, 这个时候你只需要使用 `BUI+APICloud`或 `BUI+DCloud`或 `BUI+APPCan` 等等, 你只需要用到原生api的时候,查一下, 开发方式还是按BUI的来, 最终可以在常用的平台都保持一致的交互效果, 学一个就够了. 
 
 ![设计思路](../static/images/bui-silu.png)
 

diff --git a/docs/chapter2/controls.md b/docs/chapter2/controls.md
@@ -9,15 +9,14 @@
     * 焦点图`bui.slide`, 选项卡`bui.tab`,列表下拉刷新及滚动加载`bui.list` , 下拉刷新`bui.pullrefresh`, 滚动加载`bui.scroll`, 抽屉控件`bui.swipe`, 侧边栏`bui.sidebar`, 侧滑菜单`bui.listview`, 日期选择 `bui.pickerdate`.
 
 - **点击交互控件:** *例如:*
-    * 上拉菜单`bui.actionsheet`,下拉菜单`bui.dropdown`,折叠菜单`bui.accordion`,选择菜单`bui.select`,星级评分`bui.rating`,步骤条`bui.stepbar`
+    * 上拉菜单`bui.actionsheet`,下拉菜单`bui.dropdown`,折叠菜单`bui.accordion`,选择菜单`bui.select`,星级评分`bui.rating`,步骤条`bui.stepbar`,层级选择`bui.levelselect`.
 
 - **弹出交互控件:** *例如:*
     * 遮罩`bui.mask`,正在加载`bui.loading`, 弹窗控件`bui.dialog`,提醒框`bui.alert`,确认框`bui.confirm`,输入框`bui.prompt`,自动消失提醒`bui.hint`
 
 *注意:*
 
 - BUI的控件主张以相同交互作为相同控件, 也就是一个控件不只做一件事, 比如, tab 是由 `bui.slide` 实现的, 结构一致,交互一致,配合样式来实现不同的效果. 
-- 还有一个公共控件的概念需要注意, 同一个位置,只允许出现一个, 例如,遮罩`bui.mask`,正在加载`bui.loading`
 - 参数 `height:0` 则是会自动计算高度,在布局比较复杂的情况下,需要自己计算后传进去.
 - 每个控件都有一个全局配置,可以修改控件的默认配置`bui.config.控件名.参数`.
 

diff --git a/docs/chapter2/life.md b/docs/chapter2/life.md
@@ -0,0 +1,67 @@
+# 单页生命周期
+
+## 路由原理
+
+?> 这是路由加载的完整过程.
+
+![BUI 路由模块加载流程图](../static/images/router/router_flow.png)
+
+## 路由加载路线说明
+
+- ① 为首页 main 的自定义模块加载, 已经配置了路径指向, 你可以通过 indexModule 参数修改main首页的指向;
+- ② 为没有自定义模块的时候, 点击后走相对根路径的同名文件模块;
+- ③ 为跳转已经加载过的模块;
+- ④ 为只有模板,没有同名脚本路径走的路线;
+
+### 路线①: 自定义的main模块加载
+![BUI main模块的加载](../static/images/router/router_main.png)
+
+### 路线②: 点击跳转的页面加载, 默认跳转的路径就是模块名
+### 路线③: 已经加载过的页面,只需走loaded回调.
+![BUI 点击跳转的模块加载](../static/images/router/router_click.png)
+
+## 路由加载注意事项 
+1. 打开路由及跳转页面都会先加载模板,再加载脚本;  
+2. 单页只需要在首页执行一次 `bui.ready`;
+3. 路由的初始化也必须在 `bui.ready` 里面执行;
+4. 模块里面的选择器使用 `router.$` 替换 `$` ,确保你操作的是当前页面的模块的dom;
+5. 如果需要修改 `bui.loader` 需要在 `window.router` 之前;
+6. 路由的全局事件, 必须在 index.js 才能使用, 不能放在单独的模块里.
+
+## 生命周期
+
+?> 1.5.3 新增, 路由跳转页面会触发模块的加载, 从进入页面,跳转页面,后退页面完成一个页面的生命周期.
+
+### 页面展示的生命周期
+
+?> 这是打开路由第一次加载 main模块以后触发的加载. 
+
+![BUI 模块的加载会触发模块的生命周期](../static/images/router/router_life.png)
+
+### 页面跳转后退之间的生命周期
+
+![BUI 模块的加载会触发模块的生命周期](../static/images/router/router_life2.png)
+
+#### 一. 跳转: 
+
+1, main模块 
+
+①  未定义生命周期, 只执行 loaded . 
+
+2, main->A 页面
+
+①  A页面定义了生命周期, 从 `beforeCreate -> created -> beforeLoad -> loaded -> show` , 这是A页面的显示生命周期. 
+②  从main->第2次跳转到A页面的时候, 直接走 `beforeLoad -> loaded -> show`; 
+
+3, A页面->B页面, 会执行 A页面自身的 hide 再跳去 B页面的 ① `beforeCreate -> created -> beforeLoad -> loaded -> show`
+
+#### 二. 后退: 
+
+1. `B->A` 页面
+B跟A都有自己的生命周期, 后退的时候会先执行 当前页的`hide ->beforeDestroy -> destroyed` , 然后还会触发 A页面的 show 方法.
+
+2. `A->main` 页面
+由于main没有定义show方法, 所以只执行A页面的 `hide ->beforeDestroy -> destroyed`
+
+## 使用
+?> 具体查看模块的定义. [页面模块的生命周期](chapter2/loader?id=页面模块的生命周期)
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,7 +38,7 @@ $ npm run dev @@
     js:
-    !> ajax请求的时候使用`相对路径`.
+    !> **注意:** ajax请求的时候请使用`相对路径`,这样代理才会正确转发.
     ```
     bui.ajax({
@@ Expand Down @@