参照Vue2.0MVVM模式实现数据双向绑定以及事件注册等

## MVVM升级实现功能 


### show -控制显示隐藏

### model- 数据双向绑定

### {{}}-动态绑定

### class -动态替换class

### html -动态添加html片段

### text- 动态渲染text内容

### on- 声明事件

### computed -计算属性

### $watch-内容副作用监听

### js模板引擎



#### 引入文件

> ```html
> <script src="@/public/vendor/mvvm/compile.js"></script>
>   <script src="@/public/vendor/mvvm/mvvm.js"></script>
>   <script src="@/public/vendor/mvvm/observer.js"></script>
>   <script src="@/public/vendor/mvvm/watcher.js"></script>
> ```
>
> 


#### v-show

> ```html
> <div id="show-features">
> 	<p v-show="isShow">是否是男的</p>
> 	<button v-on:click="clickTrigger">点击隐藏/显示</button>
> </div>
> ```
>
> ```javascript
> let show_vm = new MVVM({
>  el: '#show-features',
>  	data : {///data内容声明
>  		isShow : false
> 		 },
>      methods : {///methods声明方法
> 			clickTrigger : (e) => {
>              this.isShow = !this.isShow;///更新后会自动更改html进行处理
>          }
>      }
> });
> ```

#### v-model(目前实现input输入,其他后期添加)

> ```html
> <div id="model-features">
>  <input type="text" v-model="name" />
>  <p>{{name}}</p>
> </div>
> ```
>
> ```javascript
> let model_vm = new MVVM({
>  el : "#model-features",
>  data : {
>      name : '',//可自定义默认值
>  }
> });
> ///可实现input输入与value值绑定和{{}}内容同步,叫做双向绑定
> ```

#### {{}}

> ```html
> <div id="parantheses-features">
>       <h2>{{json.name}}</h2>
>       <h2>{{json.tel}}</h2>
>       <h2>{{json.sex}}</h2>
>       <h2>{{json.address}}</h2>
>  <button v-on:click="clickTrigger"> 点击更新json数据 </button>
> </div>
> ```
>
> ```javascript
> let parantheses_vm = new MVVM({
> el : "#parantheses-features",
> data : {
>  json : {
>      name : '丁平',
>      tel : 'xxxxx',
>      sex : '男',
>      address : '昆明'
>  }
> },
> methods : {
>    ///更新json对象数据,界面同步更新
>    clickTrigger : () => {
>        let _json = this.json;
>        _json.name = "丁不平";
>        _json.address = "曲靖";
>         this.json = Object.assign({},this.json,_json);///对象合并才能触发数据劫持更新html
>    }
> }
> });
> ```
>

#### text

> 与{{}}功能类似
>
> ```html
> <div>
> <p v-text="textVariable"></p>
> </div>
> ```
>
> 

#### class

> ```html
> <div id="class-features">
> <div v-class="classVariable">用户名称显示</div>
> <button v-on:click="clickTrigger">点击切换class属性</button>
> </div>
> ```
>
> ```css
> .name-color{
> color: red;
> font-size: 20px;
> 
> }
> .name{
> 	font-weight: 600;
> }
> .name-color-small{
> color: black;
> font-size: 11px;
> }
> ```
>
> ```java
> let class_vm = new MVVM({
> el : "#class-features",
> data : {
> classVariable : 'name-color',
> 
> },
> methods : {
>   clickTrigger : (e) => {
>       this.classVariable = "name-color-small";
>   }
> }
> });
> ```

#### html 

> ```html
> <div id="html-features">
>  <h4>
>      v-html可进行html装卸,可赋值htmlDOM也可赋值html字符串
>      可以配合js模板渲染操作,详情请看 js模板选人模块
>  </h4>
>  <div v-html="htmlDom"></div>
> </div>
> ```
>
> ```javascript
> let html_vm = new MVVM({
> el : "#html-features",
> data : {
> 	htmlDom : '<span>初始化暂无数据</span>',
> },
> });
> ///初始化请求装载数据
> _().then( res => {
>  let _res = res;
>  _res = "<span>数据加载成功</span>";
>  ///赋值之后自动更新html页面
>  html_vm.htmlDom = _res;
> });
> ```

#### on

> 格式 : v-on:事件
>
> 支持 : 
>
> `click`、`dblclick`、`mouseout`(鼠标移动触发系列)等等等等,
>
> 详情请看[JavaScript事件参考](https://www.w3school.com.cn/jsref/jsref_events.asp)
>
> ```html
> <div id="on-features">
>  <button v-on:click='clickTrigger'>点击事件声明</button>
>  <button v-on:dblclick="dblclickTrigger">双击事件声明</button>
>  <button v-on:mouseout="mouseoutTrigger">鼠标移出元素事件声明</button>
> </div>
> ```
>
> ```javascript
> let on_vm = new MVVM({
>  el : "#on-features",
>  methods : {
>       clickTrigger : () => {console.log('鼠标单击打印日志');},
>       dblclickTrigger : () => {console.log('鼠标双击打印日志');},
>       mouseoutTrigger : () => {console.log('鼠标移开打印日志');},
>  }
> });
> ```
>
> 

#### computed 

> 计算属性
>
> 使用场景 :`当页面中有某些数据依赖其他数据进行变动的时候,就可使用`
>
> ```html
> <div id="computed-features">
>  <input v-model="text" />
>  <input v-model="num" />
>  <h4>输入值相乘</h4>
>  <p>{{sum}}</p>
> </div>
> ```
>
> ```javascript
> let computed_vm = MVVM({
>  el : "#computed-features",
>  data : {
>      text : 0,
>      num : 0
>  },
>  computed : {
>      sum : () => {
>          return this.text * this.num;
>      }
>  }
> });
> ```
>
> 

#### $watch

>副作用监听
>
>使用场景 : `一般用于异步或者开销较大的操作`
>
>```javascript
>let vm_app = new MVVM({
>el : "xxx",
>data : {
>   json : {
>       name : "用户",
>       sex : "男"
>   }
>},
>});
>///实现监听数据
>vm_app.$watch('json', (newVale,oldVale) => {
>       console.log(`watch new word ：${newVale}`);
>       console.log(`watch old word ：${oldVale}`);
>});
>```

#### js模板渲染

> 使用场景
>
> 复杂渲染,列表,异步操作
>
> 配合v-html使用
>
> ```html
> <head>
>   <script id="interpolationtmpl" type="text/x-dot-template">
>          <div>Hi {{=it.name}}!</div>
>          <div>{{=it.age || ''}}</div>
>  </script>
> </head>
> 
> <body>
>  <div id="js-features">
>      <div v-html="htmlDom"></div>
>  </div>
> </body>
> ```
>
> ```javascript
> import doT from "../../../public/vendor/template/doT.js";
> let js_vm = new MVVM({
>  el : "#js-features",
>  data : {
>      htmlDom : '初始化加载'
>  }
> });
> 
> ///初始化数据请求
> _.then(res => {
>     let dataInter = {"name":"Jake","age":31};
>  ///获取模板
>    let interText = doT.template($("#interpolationtmpl").text());
>     js_vm.htmlDom = interText(dataInter);///给实例装载数据自动渲染给v-html
> });
> 
> ```
>
> 使用命令文档[官方文档](http://olado.github.io/doT/)
>
> 详细例子[博客园文档](https://www.cnblogs.com/inkwhite/p/9099025.html)

#### 使用规范

1、MVVM实例外部只能进行data数据更新，不能调用实例内部函数

2、v-class只能使用一个变量，多个class名请定义在实例data之中，赋值时进行字符串拼接

```javascript
let on_vm = new MVVM({
    el : "#on-features",
    data : {
        className : 'name'
    }
    methods : {
         clickTrigger : () => {
    		this.className = 'name color';
         },
        
    }
});
```



3、js模板引擎（dot）必须配合v-html使用，自行dom操作属于重复操作，MVVM实例化中以及将dom处理好，只需调用

4、MVVM模式观念可自行看vue.js

5、一个html页面可实例化多个MVVM，MVVM之间只能进行数据读取与复制，尽量一个html最多只实例化一个MVVM

6、数据初始化或者插件初始化不能在MVVM中使用，MVVM只提供用户操作事件实例化，数据初始化请求可在外层操作给实例化复制

7、目前事件声明还不能传参,但是能接受到默认参数`event`

8、公共处理数据函数需要定义在实例之外，实例内部可调用外部函数

9、外部公共函数需要给实例化data复制可进行如下操作

```javascript
let on_vm = new MVVM({
    el : "#on-features",
    data : {
        name : '名字'
    }
    methods : {
         clickTrigger : () => {
             publicClick(this);
         },
        
    }
});

const publicClick = (vm) => {
    vm.name = "名字更新了";
}
```

# 源码及其Demo

[html-mvvm-web](https://github.com/Quietly-20201113/html-mvvm-web.git)






原生MVVM配合JS模板引擎渲染搭建

Flutter1.0使用Fluwx插件调用起微信详细说明

### 甲、安装[Fluwx](https://pub.flutter-io.cn/packages/fluwx)插件

### 乙、配置apple-app-site-association文件

> ```flutter
> {
>     "applinks": {
>         "apps": [],
>         "details": [
>             {
>                 "appID": "teamID.应用BundId",
>                 "paths": [ "/app/*" ]
>             }
>         ]
>     }
> }
> ```
>
> **teamID 与应用BundId参数查找**
>
> > 1、`https://developer.apple.com/`-->`account`
> >
> > 2、![示例图1](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_fluwx/flutter-fluwx-ios-account.png?raw=true "示例图1")
> >
> > 3、点击`identifiers`
> >
> > 4、找到自己应用点击
> >
> > 5、找到**Edit your App ID Configuration**可以看到`App ID Prefix`与`Bundle ID`
> >
> > 6、将`App ID Prefix`赋值给`teamID`,括号内容不需要；将`Bundle ID`赋值给`应用BundId`
> >
> > 7、appID完整数据为`teamID.应用BundId`中间的点别忘记
> >
> > 8、`paths`内容一般需要给个地址防止网页内部到处调起打开app的内容

### 丙、配置Associated Domains（苹果网站）

**位置在乙项第1、2、3、4、5节点处**

**Capabilities的Tab页**

> 1、将`Associated Domains`复选框选中
>
> 2、点击`save`按钮保存

### 丁、XCode配置

1、![](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_fluwx/flutter-fluwx-ios-xcode.png?raw=true)



2、将域名写入 Domains，格式如下`applinks:你的域名`，不需要https

3、Xcode `Info`-->`URL Types` 展开点击加号 

> `Identifier`写入 `weixin`
>
> `URL Schemes`写入`微信开放平台移动应用中绑定的appID`

4、Xcode `Info`--> `Custom IOS Target Properties`-->`LSApplicationQueriesSchemes`张开添加item项

> 1、添加`value`为`weixin`的项
>
> 2、添加`value`为`weixinULAPI`的项

### 戊、flutter项目启动配置

```flutter
    await fluwx.registerWxApi(
        appId: "微信开放平台移动应用的AppId",
        doOnAndroid: true,
        doOnIOS: true,
        universalLink: "配置Xcode的域名（https：//xxxx.com/）"
```

### 己、微信开放平台配置

> 1、进入开放平台添加应用
>
> 2、申请接口信息`分享到朋友圈`、`发送给朋友`、`微信登录`等接口信息
>
> 3、修改`开发信息`,`IOS平台`、`IPad平台`的`Universal Links`配置，与flutter配置中`universalLink`一致







flutter插件fluwx ios配置调起微信

react-learn知识点学习

flutter插件开发,自定义下拉组件,可自定义UI,只提供框架

![示例图1](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_cunstimize_dropdown/cunstumize_dropdown1.gif?raw=true "示例图1")




# flutter_custom_dropdown

> ​	还有一个停产的版本  失误造成的 名字叫flutter_cunstimize_dropdown,那个不维护了,尴尬了命名错了



> 创建命令

```dart
flutter create --org com.example --template=plugin --platforms=android,ios -a java -i objc flutter_custom_dropdown
```

**本组件由Github作者[best-flutter](https://github.com/best-flutter)插件[flutter_dropdown_menu](https://github.com/best-flutter/flutter_dropdown_menu)更改而来,由于更新问题,以及使用上不满足业务问题自己修改了相关bug做了更新迭代,所以重新集成为新插件**


***DefaultDropdownMenuController***

> 功能：包裹页面提供默认Controller

|  功能参数  | 是否必要 |  类型  | 备注                                          |
| :--------: | :------: | :----: | :-------------------------------------------- |
| onSelected |   true   |  bool  | 选中时，触发controller.selected时会回调此方法 |
|   child    |   true   | widget | 包裹内容                                      |

***DropdownHeader***

> 功能：下拉头部模块

|       功能参数        | 是否必要 |     类型     | 备注                                                         |
| :-------------------: | :------: | :----------: | :----------------------------------------------------------- |
|      isSideline       |  false   |     bool     | 是否需要分割线                                               |
|         onTap         |  false   |     func     | 触发头部回调,内部自动提供,自定义头部事件需自定义             |
|        titles         |   true   | List<String> | 头部显示title列表                                            |
| selectIsChangingColor |  false   |     bool     | 选中是否更改回显title字段可specialModules联合使用            |
|    specialModules     |  false   |  List<int>   | 选中是否只改变title颜色不更改title文字,此功能selectIsChangingColor必须为true,权重大于selectIsChangingColor功能 |

***DropdownMenu***

> 功能：悬停筛选模块

|   功能参数    | 是否必要 |              类型               | 备注                                       |
| :-----------: | :------: | :-----------------------------: | ------------------------------------------ |
|     menus     |   true   |    List<DropdownMenuBuilder>    | list长度必须与titles长度一致               |
| packUpHeight  |  false   |             double              | 收起长度不够时可自行添加                   |
| hideDuration  |  false   |            Duration             | 收起时自定义时长                           |
| showDuration  |  false   |            Duration             | 展开时自定义时长                           |
|   showCurve   |  false   |              Curve              | 自定义动画                                 |
|   hideCurve   |  false   |              Curve              | 自定义动画                                 |
|     blur      |  false   |             double              | 蒙层透明值                                 |
|    onHide     |  false   |          VoidCallback           | 蒙层触发操作回调                           |
|  switchStyle  |  false   | DropdownMenuShowHideSwitchStyle | 菜单样式                                   |
| maxMenuHeight |  false   |             double              | 最大高度,未提供自动计算时,需要指定最大高度 |

***DropdownMenuBuilder***

> 功能：menus内容

|      功能参数       | 是否必要 |     类型      | 备注                                     |
| :-----------------: | :------: | :-----------: | ---------------------------------------- |
|       builder       |   true   | WidgetBuilder | 下拉内容                                 |
|    screenHeight     |  false   |    double     | 最大高度,默认屏幕高度,自动计算时必须填写 |
|    draughtHeight    |   true   |    double     | 内容高度,                                |
| bottomSpacingHeight |  false   |    double     | 距离屏幕底部高度,自动计算时必须填写      |

***单选图片功能详解***

|   功能   | 实现功能                                 | 内容                                                         |
| :------: | :--------------------------------------- | :----------------------------------------------------------- |
| 交易类型 | 单选选中,不提供title变色,不提供title更改 | 条件:剔除元数据title字段                                     |
|   范围   | 单选选中,提供title变色,不提供title更改   | 条件:添加元数据title字段,将header下标放入specialModules,开启selectIsChangingColor |
|   排序   | 单选选中,提供title变色,提供title更改     | 条件:添加元数据title字段,禁止将header下标放入specialModules,开启selectIsChangingColor |

![示例图2](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_cunstimize_dropdown/cunstumize_dropdown2.gif?raw=true "示例图2")

***DropdownListMenu***

> 多功能tempalte,单选+多选+自定义按钮+自定义输入



|     功能参数      | 是否必要 |       类型       | 备注                                                         |
| :---------------: | :------: | :--------------: | ------------------------------------------------------------ |
|   selectedIndex   |  false   |      Object      | 默认选中                                                     |
| isOperatingButton |  false   |       bool       | 是否需要按钮                                                 |
|   isCustomInput   |  false   |       bool       | 是否需要自定义输入                                           |
|    customInput    |  false   | CustomInputClass | 定义自定义输入回显值的key与输入框HintText                    |
|     keyWords      |   true   |      String      | 数据是否重复判断依据                                         |
|     valueKey      |  false   |      String      | 当元数据没有title字段时,显示内容的key需要传入\|也可以自定义itemBuilder内容 |
|    isMultiple     |  false   |       bool       | 是否多选                                                     |
|       data        |   true   |   List<Object>   | 元数据内容                                                   |
|    itemBuilder    |   true   | MenuItemBuilder  | 展示item布局,可自定义                                        |



| 功能实现 |          实现功能          | 内容 |
| :------: | :------------------------: | :--- |
| 交易金额 | 多选+自定义输入+自定义按钮 | 看图 |
|   范围   |            多选            | 看图 |
|   排序   |      多选+自定义按钮       | 看图 |

![示例图3](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_cunstimize_dropdown/cunstumize_dropdown3.gif?raw=true")

***DropdownMenuCustomize***

> 功能：自定义下拉内容



|  功能参数   | 是否必要 |         类型         | 备注         |
| :---------: | :------: | :------------------: | ------------ |
|    data     |  false   |       List<T>        | 传入内容     |
| itemBuilder |   true   | BlankMenuItemBuilder | 内容整个布局 |

> 额外使用功能:
>
> ```flutter
> DropdownMenuController controller; 控制显示关闭,可以配合WillPopScope返回时监听是否关闭并进行关闭之后再进行页面退出
>
>  onWillPop: () async{
>           if(controller == null || controller.event == DropdownEvent.HIDE){
>             Navigator.pop(context);
>           }
>           controller.hide();
>           return;
>         }
>
> GlobalKey _globalKey;获取context,必须有变化的组件下,绝对布局或者滚动,需要获取绝对布局的context
> ScrollController scrollController;控制动画的
> ```
>
> ```
> controller.assignment({'title': '更多---'}, menuIndex);///自定义内容时没有用到select传输数据可以由次方法重新更改title
> ```

![示例图4](https://github.com/Quietly-20201113/PictureSpace/blob/main/flutter_cunstimize_dropdown/cunstumize_dropdown4.gif?raw=true "示例图4")

**贴段代码吧**

```dart
/// TODO : 单选实例
/// @param
/// @return
/// @author 丁平
/// created at 2021/1/12 11:06
///
class MotionlessScreeningFilter extends StatefulWidget {
  @override
  _MotionlessScreeningFilterState createState() => _MotionlessScreeningFilterState();
}

class _MotionlessScreeningFilterState extends State<MotionlessScreeningFilter> {

  String value1;
  String value2;
  String value3;

  @override
  Widget build(BuildContext context) {
    return Container(
      child:DefaultDropdownMenuController(
        onSelected: ({int menuIndex, dynamic data}) {
          print("int menuIndex, dynamic data = $menuIndex,$data");
          if(menuIndex == 0){
            value1 = '选中下标$menuIndex,\n选中内容$data';
          }
          if(menuIndex == 1){
            value2 = '选中下标$menuIndex,\n选中内容$data';
          }
          if(menuIndex == 2){
            value3 = '选中下标$menuIndex,\n选中内容$data';
          }
          setState(() {});
        },
        child:  Stack(
          children: [
            Column(
              children: [
                Container(
                    color: Colors.white,
                    child: buildDropdownHeader()
                ),
                Expanded(
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text('交易类型选中 : ${value1??''}'),
                          const SizedBox(height: 10.0,),
                          Text('范围选中 : ${value2??''}'),
                          const SizedBox(height: 10.0,),
                          Text('排序选中 : ${value3??''}'),
                        ],
                      ),
                    )
                ),
                Container(
                  alignment: Alignment.centerLeft,
                  color:const Color(0XFF00CCA9),
                  child: Text(
                    '交易类型筛选：单选,不提供选中头部回显,在元数据中剔除title字段即可 \n\n范围筛选：单选，不提供选中头部回显，但是提供选中头部颜色更改，使用specialModules属性标注，\n\n排序类型筛选：单选，提供选中内容头部回显不剔除title字段，设置selectIsChangingColor属性',
                    style: TextStyle(
                        color: Colors.white
                    ),
                  ),
                )
              ],
            ),
            Padding(
                padding: const EdgeInsets.only(top: 40),
                child: buildDropdownMenu(context))
          ],
        ),
      )
    );
  }


  DropdownHeader buildDropdownHeader({DropdownMenuHeadTapCallback onTap}) {
    return DropdownHeader(
      isSideline : false,
      onTap: onTap,
      titles: ['交易类型','范围','排序'],
      selectIsChangingColor: true,
      specialModules: [1] ,///特殊模块,选中数据只亮起,不需要更改头部title,下标为1
    );
  }

  DropdownMenu buildDropdownMenu(BuildContext context) {
    return new DropdownMenu(
        menus: [
          DropdownMenuBuilder(
              builder : (BuildContext context) {
                return DropdownListMenu(
                  selectedIndex:  FilterData.housingTypes[0],
                  isOperatingButton : false,
                  keyWords : "key",
                  data: FilterData.housingTypes,
                  valueKey: 'value',
                  itemBuilder: buildCheckItem,
                );
              },
              screenHeight : MediaQuery.of(context).size.height,
              draughtHeight : 60 * 2.5,
              bottomSpacingHeight : 168.0
          ),
          DropdownMenuBuilder(
              builder : (BuildContext context) {
                return DropdownListMenu(
                  selectedIndex:  FilterData.ranges[0],
                  isOperatingButton : false,
                  keyWords : "key",
                  data: FilterData.ranges,
                  itemBuilder: buildCheckItem,
                );
              },
              screenHeight : MediaQuery.of(context).size.height,
              draughtHeight : 60 * 2.5,
              bottomSpacingHeight : 168.0
          ),
          DropdownMenuBuilder(
              builder : (BuildContext context) {
                return DropdownListMenu(
                  selectedIndex:  FilterData.sort[0],
                  isOperatingButton : false,
                  keyWords : "key",
                  data: FilterData.sort,
                  itemBuilder: buildCheckItem,
                );
              },
              screenHeight : MediaQuery.of(context).size.height,
              draughtHeight : 60 * 6.66,
              bottomSpacingHeight : 168.0 + 50.0
          ),
        ]
    );
  }
}

```

flutter插件-自定义下拉组件-flutter_custom_dropdown

Flutter Plugin开发生上传教程

```dart
设置代理 : set http_proxy=http://127.0.0.1:1080
		 set https_proxy=http://127.0.0.1:1080
		 set http_proxy_user=user
          set http_proxy_pass=pass
          set https_proxy_user=user
          set https_proxy_pass=pass
测试  curl -v http://www.google.com
上传 flutter packages pub publish --server=https://pub.dartlang.org
```

# 必须在cmd内进行

#  科学上网必要



MVVM升级实现功能

甲、安装[Fluwx](http

React

1、什么时候使用状态管理器?