uniapp 各种 整理 部分

传入一个对象的所有property（微信小程序暂不支持）

如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post ：

post: {
    id: 1,
    title: 'My Journey with Vue'
}

<blog-post v-bind="post"></blog-post>
    <!-- 上面的模板等价于： -->
    <blog-post
        v-bind:id="post.id"
        v-bind:title="post.title"
></blog-post>

微信小程序不能传入一个对象所有property

不用再uni.startPullDownRefresh(OBJECT)

onPullDownRefresh
不用再uni.startPullDownRefresh(OBJECT)
因为已经有一次下拉刷新了

this.$nextTick( )慎用

比如说 在 停止 下拉刷新 上

popup 要滚动用 scroll-view

若要在 popup 内滚动，要用 scroll-view

获取宽高 选择元素

let view = uni.createSelectorQuery().in(this).select(".gulu");
  view.boundingClientRect(data => {
    this.slideWidth = data.width;
 }).exec();

按键返回事件 （使用 页面生命周期 函数）

返回 true 可阻止返回，但 微信小程序 好像无效

onBackPress() {
  if(gulu) {
    return true;  
  }
}

确认弹框

可用：

• ShowModal
• Uni-Popup-dialog

页面数据传输

url有长度限制，太长的字符串会传递失败，可使用窗体通信、全局变量

onLoad 可直接接受参数

url 传参直接封装在下一个页面的 onLoad 内的 option

onLoad(option) {
}

this.$route.query =替换=> option

uni-dateformat 日期格式化

<uni-dateformat :date="item.doneTime" format="yyyy/MM/dd hh:mm"></uni-dateformat>

微信小程序中

• @click 方法参数不能传对象
• Key 不能用表达式

tr 不显示

template for 下面必须是 view
tr 的话会不显示
表格 多维 对象/数组 得改成一维

事件通过 event 来获取值

如：官方switch的change事件是通过event来获取值的

<switch checked @change="switch1Change" />
switch1Change: function (e) { console.log('switch1 发生 change 事件，携带值为', e.target.value) },

控件大小 一般通过缩放

如：switch 用transform:scale(0.8)来缩放大小

图片预览

let urls = this.gulu.map(item => item.url);
uni.previewImage({
      current: index,
      urls: urls
});

图片适应等比显示

image 标签 属性 mode=“aspectFit”

没有 @click 事件的组件

如：uni-tr 没有@click事件，可用 .native 修饰符，监听原生事件

v-for 与 v-model 同用时

v-for 用Object.keys 遍历数组时，不能与v-model一起用，因为小程序不支持，整个程序会运行不起来。

路由 replace 与 重定向 redirect 不同

会不会重新加载不同？

Input 组件的 回车 用 confirm

app 导航栏 标题 的 显示 隐藏 修改

另有 右上角 按钮，标题，整个 导航栏 的 参考官方文档

// 修改导航栏标题方法
      editBarTitle(type, title) {
        /* #ifdef APP-PLUS */
        // let webView = plus.webview.currentWebview();
        let webView = this.$scope.$getAppWebview();
        /* #endif */
        switch (type) {
          /* #ifdef APP-PLUS */
          case 0:
            console.log(webView);
            webView.getTitleNView().setStyle({
              height: '0px'
            });
            // webView.getTitleNView().hide();
            break;
          case 1:
            console.log(webView);
            webView.getTitleNView().setStyle({
              height: '44px'
            });
            // webView.getTitleNView().show();
            break;
          /* #endif */
          /* #ifdef H5 */
          case 0:
            document.getElementsByTagName('uni-page-head')[0].style.display = 'none';
            break;
          case 1:
            document.getElementsByTagName('uni-page-head')[0].style.display = 'flex';
            break;
          /* #endif */
          case 2:
            uni.setNavigationBarTitle({
              title: title
            });
            break;
        }
      },

表格 的 元素 没有 直接的点击事件 @click

表格 的 嵌套关系

并且表格元素必须严格按照层级关系直接连接，
table底下必须tr
tr底下必须th或td

文本标签

底下最好一般不能有其它标签（官方说可以嵌套text标签），因为有时候web上看没啥问题，也不报错，app上就有问题了

比如说，我在 单元格标签（td/th）上加 点击事件，加上 .native 修饰符（因为 单元格标签 没给这个事件用）不管用，是因为text标签底下跟了别的标签

input 标签事件

html 的 input 标签的 change 事件，是uniapp input 的confirm 和blur 事件的合体（我是这么理解啵~）

提示输入框

<uni-popup ref="inputDialogPopup" type="dialog">
        <uni-popup-dialog mode="input" :title="inputDialog.title" @confirm="inputDialogConfirm">
          <input v-model="inputDialog.value" type="text" :placeholder="inputDialog.placeholder">
        </uni-popup-dialog>
</uni-popup>
// ----------------------变量
inputDialog: {
        title: "",
        placeholder: "请输入",
        value: "",
        onConfirm: null, // 回调
      }, // 输入弹框
// ----------------------方法
showPopup(key) {
      this.$refs[key].open();
    },
    closePopup(key) {
      this.$refs[key].close();
    },
    showInputDialog(config) {
      if (typeof config.title != "undefined") this.inputDialog.title = config.title;
      else this.inputDialog.title = "";
      if (typeof config.placeholder != "undefined") this.inputDialog.placeholder = config.placeholder;
      else this.inputDialog.placeholder = "请输入";
      if (typeof config.value != "undefined") this.inputDialog.value = config.value;
      else this.inputDialog.value = "";
      if (typeof config.onConfirm != "undefined") this.inputDialog.onConfirm = config.onConfirm;
      else this.inputDialog.onConfirm = null;
      this.$refs.inputDialogPopup.open();
    },
    inputDialogConfirm() {
      this.inputDialog.onConfirm(this.inputDialog.value);
},
// ----------------------使用
this.showInputDialog({
        title: "",
        placeholder: "新名称",
        value: "",
        onConfirm: (value) => {
        },
      });

uni-th 和 uni-td 上不能用v-show ，v-if 倒是可以

微信小程序的位置权限 还需要配置

"permission": {  
  "scope.userLocation": {  
    "desc": "你的位置信息将用于地图导航"  
  }  
}  

v-finger:long-tap 换 longpress事件