微信小程序常見問題匯總

自定義 tabbar 字體圖標不顯示問題

問題

在 app.wxss 引入了阿里圖標導入的樣式 iconfont.wxss，但是在自定義 custom-tab-bar 中不顯示

解決

在 custom-tab-bar 的 index.wxss 中導入字體圖標樣式@import "../styles/iconfont.wxss";

自定義 tabbar 字體圖標不顯示問題

真機調試 2.0 中無法顯示 storage 中的數據

解決

改為真機調試 1.0

小程序 中動態設置 tabbar

問題

項目需求根據權限動態設置 tabbar 中的菜單
在自定義 tabbar 中的生命周期中動態設置生命周期中根據權限設置 tabbar 中 data
(按 vue 習慣一般都是在 create 中) 但是實際修改中發現怎么 this.setData 都不生效

解決

根據這篇文章發現 微信小程序底部實現自定義動態Tabbar
需要在 tabbar 對應頁面中調用 this.getTabBar().setData(tabData)

// page
 onShow: function () {
    this.getTabBar().init();
    createDynamicTabBar(this);
 }

 // 創建動態 TabBar
 function createDynamicTabBar(view) {
  let newList = [];
  // ... 權限判斷
  view.getTabBar().setData({
    list: newList,
  });
}

小程序中使用分包

官方文檔

app.json

  "subpackages": [
    {
      "root": "分包名",
      "pages": [
        "pages/xxx/xxx",
      ]
    }
  ],

主包或其他分包跳轉分包頁面

    wx.navigateTo({
      url: '分包名/pages/xxx/xxx',
    });

小程序中使用echarts

官方文檔

Component 構造器構造頁面

參考文檔
官方文檔

Page 構造器適用於簡單的頁面。但對於復雜的頁面， Page 構造器可能並不好用。

此時，可以使用 Component 構造器來構造頁面。 Component 構造器的主要區別是：方法需要放在 methods: { } 里面。

page 的生命周期都放到 methods: { } 里面

Component({
 
  behaviors: [],
 
  // 屬性定義 
  properties: {
    myProperty: { // 屬性名
      type: String,
      value: ''
    },
    myProperty2: String // 簡化的定義方式
  },
 
  data: {}, // 私有數據，可用於模板渲染
 
  lifetimes: {
    // 生命周期函數，可以為函數，或一個在methods段中定義的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },
 
  // 生命周期函數，可以為函數，或一個在methods段中定義的方法名
  attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
  ready: function() { },
 
  pageLifetimes: {
    // 組件所在頁面的生命周期函數
    show: function () { },
    hide: function () { },
    resize: function () { },
  },
 
  methods: {
    onLoad: function(options) {
      // 頁面創建時執行
    },
    onPullDownRefresh: function() {
      // 下拉刷新時執行
    },
    // 事件響應函數
    viewTap: function() {
      // ...
    },
    onMyButtonTap: function(){
      this.setData({
        // 更新屬性和數據的方法與更新頁面數據的方法類似
      })
    },
    // 內部方法建議以下划線開頭
    _myPrivateMethod: function(){
      // 這里將 data.A[0].B 設為 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {
 
    }
  }
 
})

常見網絡錯誤提示

請求超時

{"errno":5,"errMsg":"request:fail timeout"}
{"errno":600001,"errMsg":"request:fail errcode:-118 cronet_error_code:-118 error_msg:net::ERR_CONNECTION_TIMED_OUT"}