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

1. 页面结构pages.json

"path" : "pages/my/index",

改为

"path" : "pages/my/my",

2. 图片资源目录

"iconPath": "images/tabbar/home.png",

报错.png

改为

"iconPath": "static/tabbar/home.png",

3. template仅包含一个根view
   根节点为 <template>，这个 <template> 下只能有一个根组件。

<template>
    <view>
    </view>
</template>

4. 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>

5. 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"/>

6. 循环渲染

<block wx:for="group" wx:key="{{index}}"></block>

改为

<block v-for="(item,index) in group" :key="index"></block>

7. 样式文件导入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>

8. 微信模拟器运行警告

警告

 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>

9. 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"
},

10. 定义全局函数和变量的位置和语法差异

• 小程序：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);
};

11. 微信小程序模拟器-域名解析错误

• 模拟网络请求：关闭域名校验
• 正式网络请求：添加小程序秘钥(manifest.json)并添加为小程序开发者中的一员

12. 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）都具有异步性，不能确定是否按顺序且是否能执行完毕。

13. 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>

14. 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>

16. 条件渲染

<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>

17. 微信小程序的样式、布局、组件等适配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>

18. 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 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

19. 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>

21. 画布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之图表的实现。

22. 事件绑定
    (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、小程序的区别。

23. 折叠面板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'

24. 弹窗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