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：網絡請求有響應但請求失?。ㄅ紶枺?br>
  網絡通訊有響應-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端

(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