微信小程序转uni-app之实践问题汇总

  1. 页面结构pages.json
"path" : "pages/my/index",

改为

"path" : "pages/my/my",
  1. 图片资源目录
"iconPath": "images/tabbar/home.png",
报错.png

改为

"iconPath": "static/tabbar/home.png",
  1. template仅包含一个根view
    根节点为 <template>，这个 <template> 下只能有一个根组件。
<template>
    <view>
    </view>
</template>

  1. vue之class与style绑定


    vue之class与style绑定.png

  • 静态绑定

  • 动态绑定

eg1:

<view class="topview" :style="{'width':windowWidth+'px', 'height': (windowHeight*2/3)+'px'}"> </view>

eg2:

<view class="item-list" style="height:{{windowHeight-47}}px"></view>

改为:

<view class="item-list" :style="{'height':(windowHeight-47) + 'px'}"></view>

eg3:

<view class='opt-status' style="color:{{item.dept==0?'#999':(item.dept==1||item.dept==99)?'#54b40d':'#000'}}">
    {{item.dept==0?'':(item.dept==99?positionArray[5].text:positionArray[item.dept-1].text)}}
</view>

改为:

<view class='opt-status' :style="{'color':item.dept==0?'#999':(item.dept==1||item.dept==99)?'#54b40d':'#000'}">
     {{item.dept==0?'':(item.dept==99?positionArray[5].text:positionArray[item.dept-1].text)}}
</view>

eg4:

<view v-for="(item,index) in tab.list" :key="id" class="zan-tab__item {{ tab.selectedId == item.id ? 'zan-tab__item--selected' : '' }}" :data-tab="item.id" @tap="handleTabChange">
    <view class="zan-tab__title">{{item.title}}</view>
</view>

改为:

<view v-for="(item,index) in tab.list" :key="id" class="zan-tab__item" :class="[tab.selectedId == item.id ? 'zan-tab__item--selected' : '']" :data-tab="item.id" @tap="handleTabChange">
    <view class="zan-tab__title">{{item.title}}</view>
</view>

eg5:

<view class='item' v-for="(item,index) in orderList.name" :key="key">
    <view :style='{'background-color': orderList.color[index]}' class='color'></view>
    <view class='item-name'>
        <view class='machine-name'>{{item}}</view>
        <view class='machine-sn'>{{orderList.sn[index]}}</view>
    </view>
    <view class='item-num'>￥{{orderList.data[index]}}</view>
</view>

报错:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

改为:

<view class='item' v-for="(item,index) in orderList.name" :key="key">
    <view :style="{'background-color': orderList.color[index]}" class='color'></view>
    <view class='item-name'>
        <view class='machine-name'>{{item}}</view>
        <view class='machine-sn'>{{orderList.sn[index]}}</view>
    </view>
    <view class='item-num'>￥{{orderList.data[index]}}</view>
</view>

eg6:

<view class='step {{item.state=="工作" ? "online" : ""}} {{item.state=="空闲" ? "idle" : ""}} {{item.state=="离线" ? "offline" : ""}}'>
        <view class='desc'>
          <view class='state'>{{item.state}}</view>
          <view class='time'>{{item.bg_time}}</view>
        </view>
</view>

改为:

<view class='step' :class="[item.state=='工作' ? 'online' : '',item.state=='空闲' ? 'idle' : '',item.state=='离线' ? 'offline' : '']">
    <view class='desc'>
        <view class='state'>{{item.state}}</view>
        <view class='time'>{{item.bg_time}}</view>
    </view>
</view>
  1. value双向绑定
<input type="text" class="weui-search-bar__input" placeholder="请输入关键字"  placeholder-style="color:#e2e2e2" value="{{keyword}}"/>

报错

value="{{keyword}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">

改为

<input type="text" class="weui-search-bar__input" placeholder="请输入关键字"  placeholder-style="color:#e2e2e2" v-model="keyword"/>
  1. 循环渲染
<block wx:for="group" wx:key="{{index}}"></block>

改为

<block v-for="(item,index) in group" :key="index"></block>
  1. 样式文件导入App.vue
<script>
    export default {
        onLaunch: function () {
            console.log('App Launch')
        },
        onShow: function () {
            console.log('App Show')
        },
        onHide: function () {
            console.log('App Hide')
        }
    }
</script>

<style>
    /*每个页面公共css */
    @import 'graceUI/graceUI.css';
    @import './commons/uni.css';
    @import './commons/weui.css';
    @import './commons/boot.css';
</style>
  1. 微信模拟器运行警告

警告

 Now you can provide attr `wx:key` for a `wx:for` to improve performance.

定位

<view v-for="(item,index) in group" v-key="index" style="line-height: 50px" data-group-id="item.group_id">{{item.name}}</view>

改为

<view v-for="(item,index) in group" :key="index" style="line-height: 50px" data-group-id="item.group_id">{{item.name}}</view>
  1. pages.json文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等
"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#06a7e2",
    "navigationBarTitleText": "uni-app",
    "navigationBarTextStyle": "white"
},

改为

"globalStyle": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#06a7e2",
    "navigationBarTitleText": "uni-app",
    "navigationBarTextStyle": "white"
},
  1. 定义全局函数和变量的位置和语法差异
  • 小程序：app.js
App({
  // ========== 全局数据对象（整个应用程序共享） ==========
  globalData: {
    sessionKey: 'sess_jk',
  },
  token: null,
  //启动
  onLaunch: function () {
    console.log('onLaunch');
  },

clearSession: function () {
    wx.removeStorageSync(this.globalData.sessionKey);
  }

)}
  • uni-app：main.js
Vue.prototype.sessionKey = 'sess_jk';
Vue.prototype.clearSession = function () {
    uni.removeStorageSync(this.sessionKey);
};
  1. 微信小程序模拟器-域名解析错误
  • 模拟网络请求：关闭域名校验
  • 正式网络请求：添加小程序秘钥(manifest.json)并添加为小程序开发者中的一员
  1. App.vue中进行网络请求
  • 问题1：网络请求无响应
<script>
var _self;
export default {
    data() {
        return {
            token: uni.getStorageSync("TOKEN"),
            
        };
    },
    methods: {
        login:function(){
            console.log('login');
        },
        setLang:function(){
            console.log('setLang');
        }
    },
    //应用生命周期：应用启动
    onLaunch: function () {
        _self = this;
        console.log('App Launch');
        if (this.token == "") {
            this.login();
        } else{
            this.setLang();
        }
    },
    onShow: function () {
        console.log('App Show');
    },
    onHide: function () {
        console.log('App Hide');
    },
    login:function(){
        console.log('login');
        //微信小程序端登录：调用微信login获取code
        uni.login({
            success:function(res){
                console.log("调用微信login获取code成功:" + JSON.stringify(res));
                var code = res.code;//用户登录凭证
                console.log("code:" + code);
                var timestamp = Date.parse(new Date());//时间戳
                console.log("timestamp:" + timestamp);
                uni.request({
                    //通过code请求服务登录验证
                    url: _self.siteBaseUrl + 'user/login',
                    method: 'GET',
                    data: {
                        code : code,
                        token : "login",
                        timestamp : timestamp,
                        device : "wxapp",
                        ver : "1.1.30"
                    },
                    success: res => {
                        console.log("通过code请求服务获取token" + JSON.stringify(res));
                        if (res.data.code == "0") {
                            var data = res.data.data;
                            var token = data.token;
                            uni.setStorageSync('TOKEN',token + '');
                            //session_key = res.data.session_key;
                            //openid = res.data.openid;
                        }else{
                            console.log(res.data.msg);
                        }
                        
                    },
                    fail:function(){
                        console.log("通过code请求服务获取token登录验证失败");
                    },
                    
                });
            },
            fail:function(e){
                console.log("调用微信login获取code失败：" + JSON.stringify(e));
            }
        });
        
    },
    setLang:function(){
        console.log('setLang')
    }
    
    
    
}
</script>

<style>
    /*每个页面公共css */
    @import 'graceUI/graceUI.css';
    @import './commons/uni.css';
    @import './commons/weui.css';
    @import './commons/boot.css';
    @import './commons/public.css';
</style>

原因分析：由于马虎，login()函数定义了2遍，一遍定义在methods中（自定义函数的正确定义位置），一遍定义在生命周期函数的位置。onLaunch()中调用的login()其实是methods中的login()方法。

网络通讯有响应-success.png

  • 问题2：网络请求有响应但请求失败（偶尔）
    网络通讯有响应-fail.png

    原因分析：应用生命周期、网络请求（微信登录API）都具有异步性，不能确定是否按顺序且是否能执行完毕。
  1. Now you can provide attr wx:key for a wx:for to improve performance
    警告:
[WARNING] WXMLRT_$gwx:./pages/order/order.vue.wxml:view:1:2374: Now you can provide attr `wx:key` for a `wx:for` to improve performance. at app-view.js:25

<view v-for="(item,index) in tab.list" v-key="id" class="zan-tab__item" v-bind:class="[tab.selectedId == item.id ? 'zan-tab__item--selected' : '' ]" :data-tab="item.id" @tap="handleTabChange">
    <view class="zan-tab__title">{{item.title}}</view>
</view>

改为

<view v-for="(item,index) in tab.list" :key="id" class="zan-tab__item" v-bind:class="[tab.selectedId == item.id ? 'zan-tab__item--selected' : '' ]" :data-tab="item.id" @tap="handleTabChange">
    <view class="zan-tab__title">{{item.title}}</view>
</view>

  1. wxml布局无法正常显示:二分法查找语法错误的位置


    wxml布局无法正常显示.png
<view class="item-right">
    <text class='letter_item' v-for='(item,index) in letter' v-key='this' catchtap='letterTap' :data-item='item'>{{item}}</text>
</view>

解决:key属性语法错误

<view class="item-right">
    <text class='letter_item' v-for='(item,index) in letter' :key='this' catchtap='letterTap' :data-item='item'>{{item}}</text>
</view>

15 picker-view
eg1:

<picker-view indicator-style="height: 50px;border-top:1px solid green;border-bottom:1px solid green;" style="width: 100%; height: 200px;text-align:center;" :range="positionArray" value="value" @change="bindChange">
    <picker-view-column>
        <view v-for="(item,index) in positionArray" :key="item.id" style="line-height: 50px">{{item.text}}</view>
    </picker-view-column>
</picker-view>

改为

eg2:

<picker mode="multiSelector" @change="bindMonthChange" value="{{year}}-{{month}}" :range="yearMonthArr">
    <view class="picker">{{year}}-{{month}}</view>
</picker>

改为

<picker mode="multiSelector" @change="bindMonthChange" :range="yearMonthArr">
    <view class="picker">{{year}}-{{month}}</view>
</picker>
  1. 条件渲染
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
  1. 微信小程序的样式、布局、组件等适配uni-app的app端和h5端
序号 miniProgram app h5 uni-app适配方案 方案详情
1 icon组件 √ × 拓展组件icon/ColorUI uni-app组件使用注意中的icon图标h5端不支持
2 字体图标 × √ 若使用网络路径字体图标，网络路径必须加协议头https 同上
3 zanui顶部tab √ × 修改tab样式(注释top:0)；注意key值 也可用ColorUI实现
4 modal × × 拓展组件uniPopup 略
5 weui搜索条 √ × 修改搜索条样式 也可用ColorUI实现

(3)zanui顶部tab

  • 微信小程序有赞顶部tab的使用：
<view class="zan-tab">
  <view class="zan-tab__bd zan-tab__bd--fixed">
    <view wx:for="{{ tab.list }}" wx:key="id" class="zan-tab__item {{ tab.selectedId == item.id ? 'zan-tab__item--selected' : '' }}" data-tab="{{ item.id }}" bindtap="handleTabChange">
      <view class="zan-tab__title">{{item.title}}</view>
    </view>
  </view>
</view>

.zan-tab {
  height: 45px;
}

.zan-tab__bd {
  width: 750rpx;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #e5e5e5;
  background: #fff;
}

.zan-tab__bd--fixed {
  position: fixed;
  top: 0;
  z-index: 2;
}

.zan-tab__item {
  flex: 1;
  display: inline-block;
  padding: 0 10px;
  line-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}

.zan-tab__title {
  display: inline-block;
  max-width: 100%;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  word-break: keep-all;
  font-size: 14px;
  color: #666;
}

.zan-tab__item--selected .zan-tab__title {
  color: #06a7e2;
  border-bottom: 2px solid #06a7e2;
}
  • uni-app中有赞顶部tab的使用：
<view class="zan-tab">
     <view class="zan-tab__bd zan-tab__bd--fixed">
        <view v-for="(item,index) in tab.list" :key="item.id" class="zan-tab__item" :class="[tab.selectedId == item.id ? 'zan-tab__item--selected' : '']" :data-tab="item.id" @tap="handleTabChange">
            <view class="zan-tab__title">{{item.title}}</view>
        </view>
     </view>
</view>
        

.zan-tab {
  height: 45px;
}

.zan-tab__bd {
  width: 750rpx;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #e5e5e5;
  background: #fff;
}

.zan-tab__bd--fixed {
  position: fixed;
  /* top: 0; */
  z-index: 2;
}

.zan-tab__item {
  flex: 1;
  display: inline-block;
  padding: 0 10px;
  line-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
}

.zan-tab__title {
  display: inline-block;
  max-width: 100%;
  height: 44px;
  line-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  word-break: keep-all;
  font-size: 14px;
  color: #666;
}

.zan-tab__item--selected .zan-tab__title {
  color: #06a7e2;
  border-bottom: 2px solid #06a7e2;
}
  • uni-app中ColorUI顶部tab的使用：
<scroll-view scroll-x class="bg-white nav">
    <view class="flex text-center">
        <view v-for="(item,index) in tab.list" :key="item.id" class="cu-item flex-sub" :class="[tab.selectedId == item.id?'text-blue cur':'']" :data-tab="item.id" @tap="handleTabChange">
            {{item.title}}
        </view>
    </view>
</scroll-view>

(5)weui搜索条

  • 微信小程序weui搜索条的使用：
<view class="weui-search-bar" >
    <view class="weui-search-bar__form">
      <view class="weui-search-bar__box">
        <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
        <input type="text" class="weui-search-bar__input" placeholder="{{T_D.keyword}}"  placeholder-style="color:#e2e2e2" value="{{keyword}}" bindblur="inputBlur" bindinput="inputTyping" bindconfirm="search" />
        <view class="weui-icon-clear" wx:if="{{keyword.length > 0}}" bindtap="clearInput">
          <icon type="clear" size="14"></icon>
        </view>
        <icon class='iconfont uc-scan search-bar-scan' bindtap='scanCode' wx:else></icon>
      </view>
    </view>
    <view class="search-btn" bindtap="search">{{T_D.search}}</view>
  </view>

.weui-search-bar {
  background-color: #06A7E2;
  position: fixed;
  top: 20px;
  width: 100%;
  z-index:90;
  border-bottom: 0;
  border-top:0;
}
.search-bar-scan{
    line-height:30px;
    width:32px;
    height:30px;
}
.search-bar-scan image{
  width:22px;
    height:22px;
  margin-top:4px;
}
.search-bar-cart{
    margin-left:10px;
    line-height:28px;
    width:32px;
    height:30px;
}
.search-bar-cart-icon image{
    width:24px;
    height:24px;
  margin-top:2px;
}
.weui-search-bar__form{
  background:#06A7E2;
  color:#fff !important;
}
.scan{
  position:absolute;
  right:10px;
  top:0;
  vertical-align:middle;
}
.search-btn {
  width: 50px;
  height: 28px;
  line-height: 28px;
  margin-left: 6px;
  background-color: #06a7e2;
  white-space: nowrap;
  color: #ffffff;
  border-radius: 5px;
  border:1px solid #fff;
  text-align: center;
}
.search-bar-scan {
  font-size:1.3rem;
  color:#e6e6ea;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
}
  • uni-app中weui搜索条的使用：
  • uni-app中ColorUI搜索条的使用：
<view class="cu-bar jk-bg-blue search fixed">
    <view class="search-form radius">
        <text class="cuIcon-search"></text>
        <input type="text" class="weui-search-bar__input" :placeholder="T_D.keyword" v-model="keyword"/>
        <view v-if="keyword.length > 0" @tap="clearInput">
            <text class="text-gray cuIcon-roundclose"></text>
        </view>
        <view v-else @tap="scanCode">
            <text class="cuIcon-scan"></text>
        </view>
    </view>
    <view style="margin-right: 20upx;">
        <button class="cu-btn lines-white" @tap="search">{{T_D.search}}</button>
    </view>
 </view>

  1. app端正常，h5端报错


    image.png
<view class='item' v-for="(item,index) in orderList" :key="key" @tap='bindViewDetail' :data-machine-sn="item.sn">
    <view class="margin-right-xs text-orange">
        <text class='iconfont uc-liebiao'></text>
    </view>
    <view class='item-name'>
        <view class='machine-name'>{{item.name}}</view>
        <view class='machine-sn'>{{item.sn}}</view>
    </view>
    <view class='item-num'>{{item.number}}</view>
</view>

改为

<view class='item' v-for="(item,index) in orderList" :key="item.sn" @tap='bindViewDetail' :data-machine-sn="item.sn">
    <view class="margin-right-xs text-orange">
        <text class='iconfont uc-liebiao'></text>
    </view>
    <view class='item-name'>
        <view class='machine-name'>{{item.name}}</view>
        <view class='machine-sn'>{{item.sn}}</view>
    </view>
    <view class='item-num'>{{item.number}}</view>
</view>

备注：uni-app使用vue的条件渲染时，如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。如不提供:key ，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。:key 的值以两种形式提供:

  • 使用 v-for 循环 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
  • 使用 v-for 循环中 item 本身，这时需要 item 本身是一个唯一的字符串或者数字
    当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

  1. TypeError: Cannot read property 'split' of undefined


    image.png

    定位代码块：注释后编译，之后再取消注释重新编译，不再报错，so strange ！

uni.redirectTo({url:'/pages/binding/binding?backpage='+backpage+'&backtype='+backtype});

20.进度条progress


progress.png
<view class="weui-progress">
    <view class="weui-progress__bar">
        <progress percent="item.use_time" stroke-width="3" />
    </view>
</view>

改为：

<view class="weui-progress">
    <view class="weui-progress__bar">
        <progress :percent="item.use_time" stroke-width="3" />
    </view>
</view>
  1. 画布canvas-图表
<view>
    <canvas canvas-id="ouput-line" class="canvas" :style="{'width':chartWidth + 'px','height':chartHeight + 'px'}"/>
</view>

改为

<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
    <view class="qiun-title-dot-light">班组7天产量折线图</view>
    <!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
</view>
<view class="qiun-charts">
    <!--#ifdef MP-ALIPAY -->
    <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}"
             disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
    <!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
    <!--#endif-->
    <!--#ifndef MP-ALIPAY -->
    <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
             @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
    <!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
    <!--#endif-->
</view>

备注：参考uni-app之图表的实现。

  1. 事件绑定
    (1)为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。
    (2)点击事件无响应
<template>
    <view>
        <view v-for="(item,index) in machineList"  :data-machine-id="item.machine_id" @tap="showBind? '':'showDetail'"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showBind : false,
        }
    },
    methods: {
        showDetail: function(e) {
            var machineId = e.currentTarget.dataset.machineId,
            url = '/pages/machineDetail/machineDetail?machine_id=' + machineId;
            uni.navigateTo({
              url: url
            });
        },
    }
}
</script>

<style>

</style>

改为：

<template>
    <view>
        <view v-for="(item,index) in machineList"  :data-machine-id="item.machine_id" @tap="showDetail" :data-show-Bind="showBind"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            showBind : false,
        }
    },
    methods: {
        showDetail: function(e) {
            var machineId = e.currentTarget.dataset.machineId,
            url = '/pages/machineDetail/machineDetail?machine_id=' + machineId;
            uni.navigateTo({
              url: url
            });
        },
    }
}
</script>

<style>

</style>

参考：html、vue、小程序的区别。

  1. 折叠面板collapse


    collapse.png
<van-collapse :value="active" accordion @change="onChange">
    <block>
        <van-collapse-item :title="T_D.timeChart" name="4" :class="work_time.length > 0 ? 'content' : ''">
            <view class='chart-box' v-if="work_time.length > 0" @tap="chartClick" :hidden="active != 4">
                <!-- <ec-canvas id="mychart-dom-bar" canvas-id="mychart-id" ec="{{ ec }}"></ec-canvas> -->
            </view>
            <view class='item'>
                <icon class='iconfont uc-jinggao' v-if="work_time.length <= 0"></icon>
                <view class='item-name'>
                    <text v-if="work_time.length <= 0">{{T_D.noData}}</text>
                    <view class='btn-link' @tap='chartClick'>{{T_D.moreData}}>></view>
                </view>
            </view>
        </van-collapse-item>
    </block>
</van-collapse>

改为：

<uni-collapse :value="active" accordion @change="onChange">
    <block>
        <uni-collapse-item :title="T_D.timeChart" name="4" :class="work_time.length > 0 ? 'content' : ''">
            <view class='chart-box' v-if="work_time.length > 0" @tap="chartClick" :hidden="active != 4">
                <!-- <ec-canvas id="mychart-dom-bar" canvas-id="mychart-id" ec="{{ ec }}"></ec-canvas> -->
            </view>
            <view class='item'>
                <icon class='iconfont uc-jinggao' v-if="work_time.length <= 0"></icon>
                <view class='item-name'>
                    <text v-if="work_time.length <= 0">{{T_D.noData}}</text>
                    <view class='btn-link' @tap='chartClick'>{{T_D.moreData}}>></view>
                </view>
            </view>
        </uni-collapse-item>
    </block>
</uni-collapse>

需导入

import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'

  1. 弹窗popup


    popup.png
<van-popup :show="popup" :overlay="overlay">
    <view class='popup-wrapper'>
        <view class="icon-wrap">
            <icon class='iconfont uc-yuyinyou scale-icon' :class="scale ? 'scale' : ''"></icon>
            <icon class='iconfont uc-yuyinshibieyouhua' :class="scale ? 'scale' : ''"></icon>
            <icon class='iconfont uc-yuyinzuo scale-icon' :class="scale ? 'scale' : ''"></icon>
        </view>
    </view>
</van-popup>

改为：

<uni-popup :show="popup" :overlay="overlay">
    <view class='popup-wrapper'>
        <view class="icon-wrap">
            <icon class='iconfont uc-yuyinyou scale-icon' :class="scale ? 'scale' : ''"></icon>
            <icon class='iconfont uc-yuyinshibieyouhua' :class="scale ? 'scale' : ''"></icon>
            <icon class='iconfont uc-yuyinzuo scale-icon' :class="scale ? 'scale' : ''"></icon>
        </view>
    </view>
</uni-popup>

需导入

import uniPopup from "@/components/uni-popup/uni-popup.vue";

25 录音


image.png
getRecorderManager:function(){
    var recorderManager = uni.getRecorderManager();
},

改为

getRecorderManager:function(){
    // #ifdef APP-PLUS || MP-WEIXIN
    var recorderManager = uni.getRecorderManager();
    // #endif
},
各平台支持情况.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,772评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,458评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,610评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,640评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,657评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,590评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,962评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,631评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,870评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,386评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,969评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2赞 342