用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

微信小程序遇到的坑(持續更新中······)

Rolan 2020-6-10 00:26

最近接手他人開發的微信小程序項目,在學習開發過程中遇到許多問題,這篇文章將不定時更新工作中遇到的一些坑(持續更新中·····) page 和 component 差異性 微信小程序和vue項目不同,vue項目中都是由組件堆積 ...

最近接手他人開發的微信小程序項目,在學習開發過程中遇到許多問題,這篇文章將不定時更新工作中遇到的一些坑(持續更新中·····)

page 和 component 差異性

微信小程序和vue項目不同,vue項目中都是由組件堆積而成,小程序page是頁面,它是由Page({})對象組成,component是組件,它是由Component({})對象組成,所以在原page頁面拆分出component組件時,遇到一系列坑

1、page調用component對象

如果page A 中存在 component B,如果在A中調用B組件中 data、method,可以用「單例模式」獲取B組件實例,例如:

getComponentB () {
    let componentBInstance = this.data.componentBInstance
    return new Promise((resolve, reject) => {
      if (!componentB) {
        this.setData({
          componentBInstance: this.selectComponent('#component_b')
        }, () => {
          resolve(this.data.componentBInstance)
        })
      } else {
        resolve(this.data.componentBInstance)
      }
    })
  },
復制代碼

這種寫法有助于多次調用時,不用重復調用微信小程序方法「selectComponent」(ps:此項不是差異哈,請繼續往下看撒)

2、this引發的問題

在page A頁面直接使用如下代碼片段

let query = wx.createSelectorQuery();
query.select('#component_b').boundingClientRect()
query.exec(res => {
  console.log(res)
})
復制代碼

此時「component_b」還未拆分成組件B,上面的代碼片段一點問題沒有,但是如果已經分離出來,那么打印出來的結果是null,微信官方給的文檔是

?

SelectorQuery.in(Component component)將選擇器的選取范圍更改為自定義組件 component 內。(初始時,選擇器僅選取頁面范圍的節點,不會選取任何自定義組件中的節點) 所以上述代碼需改成

?
let query = wx.createSelectorQuery().in(this);
query.select('#component_b').boundingClientRect()
query.exec(res => {
  console.log(res)
})
復制代碼

2、this引發wx-charts.js

在小程序中可視化操作時,需區分page還是component,在wx-charts.js源碼中使用是「wx.createCanvasContext(canvasId)」,page頁面能正常使用,但是在component中需添加this指向,所以在組件環境下改動如下:


初始化改動

// echarts圖初始化
      let chart = new Charts({
        canvasId: 'columnCanvas',
        type: 'column',
        categories: ['**', '**'],
        column: {
          legendTextColor: '#999'
        },
        series: [{
          name: '**',
          color: "#FFAE00",
          data: [1, 1]
        }, {
          name: '**',
          color: "#368FFF",
          data: [1, 1]
        }],
        xAxis: {
          gridColor: '#E9EFF5',
          disableGrid: true
        },
        yAxis: {
          min: 0,
          gridColor: '#E9EFF5',
          disabled: false,
          format: function (val) {
            return '';
          }
        },
        _that: this   // 添加參數_that,傳入單前組件對象this
      });
復制代碼

wx-charts.js 源碼改動

var Charts = function Charts (opts) {
    opts.title = opts.title || {};
    ......
    this.context = wx.createCanvasContext(opts.canvasId, opts._that || null); // 重點改這兒
    ......
    drawCharts.call(this, opts.type, opts, config$$1, this.context);
};
復制代碼

將源碼「wx.createCanvasContext(opts.canvasId)」 改成 「wx.createCanvasContext(opts.canvasId, opts._that || null)」

3、cavans 新版本兼容問題

新版本canvas 新增type屬性,如下列表

屬性 類型 默認值 必填 說明 最低版本
type string 指定 canvas 類型,支持 2d (2.9.0) 和 webgl (2.7.0) 2.7.0

你如果使用wx.createCanvasContext 就不要加這個type屬性,不然上面wx-charts.js也獲取不到canvas上下文

敬請期待

學習充電中······

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 月翎魂雨 來自: 掘金
梦幻单人赚钱方法 安徽快3软件下载 21点玩法五小龙是什么 北京pk10视频 宁夏11选5买网址 股票买卖手续费怎么算 江苏7位数中奖规则 股票配资官方 湖北快三开奖直播 广东好彩1官网 好的微信股票群