收藏
回答

为什么在开发版和体验版没报错,但是线上版就报错了

问题模块 框架类型 问题类型 终端类型 操作系统 微信版本 基础库版本
框架 小程序 Bug 客户端 Android 6.6.7 2.2.2

getPoster: function (event){

var _this=this;

//绘图开始

var ctx_height = _this.data.goods_canvas_height;

var ctx_width = _this.data.goods_poster_width;




var ctx = wx.createCanvasContext('myCanvas')

ctx.setFillStyle('#fff')

ctx.fillRect(0, 0, ctx_width, ctx_height)


//店铺头像填充绘制的圆

ctx.setFillStyle('#000')

ctx.save()

ctx.beginPath()

ctx.arc(ctx_width * 0.14 / 2 + 10, ctx_width * 0.14 / 2 + 10, ctx_width * 0.14 / 2, 0, 2 * Math.PI)

ctx.clip()

ctx.drawImage(_this.data.astore_logo_path, 10, 10, ctx_width * 0.14, ctx_width * 0.14)

ctx.restore()


//店铺名称

ctx.setFontSize(14)

ctx.setTextAlign('left')

ctx.setTextBaseline('middle')

ctx.fillText(_this.data.agent4_info.astore_name ? _this.data.agent4_info.astore_name : _this.data.agent4_info.agent4_name, ctx_width * 0.14 + 20, ctx_width * 0.14 / 2 + 10)


var text_start = 10;

//自营图标


if (typeof (_this.data.ziying_width) == 'undefined') {

var ziying_width = 25;

} else {

var ziying_width = _this.data.ziying_width / _this.data.ziying_height * 12;

}

ctx.drawImage(_this.data.ziying_path, text_start, ctx_width * 0.14 + 20, ziying_width, 12)

text_start = text_start + ziying_width + 5;


//跨境图标

if (_this.data.goods_info.cross_border) {

if (typeof (_this.data.kuajing_width) == 'undefined') {

var kuajing_width = 25;

} else {

var kuajing_width = _this.data.kuajing_width / _this.data.kuajing_height * 12;

}

ctx.drawImage(_this.data.kuajing_path, text_start, ctx_width * 0.14 + 20, kuajing_width, 12)

text_start = text_start + kuajing_width + 5;

}

//商品名换行

ctx.setFontSize(12)

ctx.setTextBaseline('top')

var temp_text_start = text_start;

var chr = _this.data.goods_info.goods_name.split("");//这个方法是将一个字符串分割成字符串数组

var temp = "";

var row = [];


for (var a = 0; a < chr.length; a++) {

if (ctx.measureText(temp).width < ctx_width - temp_text_start - 10-10) {

temp += chr[a];

}

else {

temp_text_start = 10;

a--; //这里添加了a-- 是为了防止字符丢失,效果图中有对比

row.push(temp);

temp = "";

}

}

row.push(temp);


//如果数组长度大于2 则截取前两个

if (row.length > 2) {

var rowCut = row.slice(0, 2);

var rowPart = rowCut[1];

var test = "";

var empty = [];

for (var a = 0; a < rowPart.length; a++) {

if (ctx.measureText(test).width < ctx_width - temp_text_start - 10 - 30) {

test += rowPart[a];

}

else {

break;

}

}

empty.push(test);

var group = empty[0] + "..."//这里只显示两行,超出的用...表示

rowCut.splice(1, 1, group);

row = rowCut;

}

for (var b = 0; b < row.length; b++) {

ctx.fillText(row[b], text_start, ctx_width * 0.14 + 20 + b * 15, 300);

ctx.fillText(row[b], text_start + 1, ctx_width * 0.14 + 20 + b * 15, 300);

text_start = 10;

}

//广告

ctx.setFillStyle('#9B9B9B')

var adv_txt = _this.data.goods_info.goods_advword ? _this.data.goods_info.goods_advword : (_this.data.goods_info.gc_name + _this.data.goods_info.goods_name)

var chr = adv_txt.split("");//这个方法是将一个字符串分割成字符串数组

var temp = "";

var row = [];


if (ctx.measureText(adv_txt).width < ctx_width - 20) {

ctx.fillText(adv_txt, 10, ctx_width * 0.14 + 20 + b * 15)

} else {

for (var a = 0; a < chr.length; a++) {

if (ctx.measureText(temp).width < ctx_width - 20 - 30) {

temp += chr[a];

}

else {

temp = temp + "...";

break;

}

}

ctx.fillText(temp, 10, ctx_width * 0.14 + 20 + b * 15)

}


//商品图片

ctx.drawImage(_this.data.goods_image_path, 0, ctx_width * 0.14 + 20 + (b + 1) * 15+10, ctx_width, ctx_width)

//画线

var left_width = parseInt(ctx_width * 0.5328)

var bottom_height = parseInt(ctx_height * 0.15)

ctx.setFillStyle('#E7E7E7')

ctx.fillRect(left_width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10, 1, bottom_height)


//小程序

ctx.drawImage(_this.data.minipro_code_path, left_width + 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width +5, bottom_height, bottom_height)

ctx.setFontSize(10)

ctx.setFillStyle('#9B9B9B')

ctx.fillText('(长按查看商品)', left_width + 5, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 5 + bottom_height)

//国旗

if (_this.data.goods_info.country_id){

if (typeof (_this.data.country_pic_height) == 'undefined') {

var country_pic_width = 14

} else {

var country_pic_width = _this.data.country_pic_width / _this.data.country_pic_height * 14

}

}else{

var country_pic_width=0;

}

//品牌

ctx.setFontSize(12)

ctx.setFillStyle('#000')

ctx.setTextAlign('right')

var brand_text='';

brand_text += _this.data.goods_info.country_name;

if (_this.data.goods_info.country_name && _this.data.goods_info.brand_name){

brand_text += ' | ';

}

brand_text += _this.data.goods_info.brand_name;

var chr = brand_text.split("");//这个方法是将一个字符串分割成字符串数组

var temp = "";

var row = [];

if (ctx.measureText(brand_text).width < left_width - 20 - country_pic_width) {

} else {

for (var a = 0; a < chr.length; a++) {

if (ctx.measureText(temp).width < left_width - 20 - 24 - country_pic_width) {

temp += chr[a];

}

else {

brand_text = temp + "...";

break;

}

}

}

ctx.setTextBaseline('top')

ctx.fillText(brand_text, left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10)


if (_this.data.goods_info.country_id){

console.log(left_width - 10 - ctx.measureText(brand_text).width - country_pic_width);

console.log(ctx_width * 0.14 + 20 + (b + 1) * 15 + ctx_width);

console.log(_this.data.astore_logo_path);

ctx.drawImage(_this.data.country_pic_path, left_width - 10 - ctx.measureText(brand_text).width - country_pic_width - 5, ctx_width * 0.14 + 20  + (b + 1) * 15 + 10 + ctx_width + 10, country_pic_width, 14)

}


//销量

ctx.setFontSize(10)

ctx.setFillStyle('#5A5A5A')

ctx.setTextAlign('right')

ctx.fillText('销量:' + _this.data.goods_info.goods_salenum + '件', left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10+20)

//价格

ctx.setFontSize(16)

ctx.setFillStyle('#DB2819')

ctx.setTextAlign('right')

ctx.fillText(_this.data.goods_info.goods_agent2price, left_width - 10, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25)

ctx.fillText(_this.data.goods_info.goods_agent2price, left_width - 10-1, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25)

var text_width = ctx.measureText(String(_this.data.goods_info.goods_agent2price)).width;

ctx.setFontSize(10)

ctx.setTextAlign('left')

ctx.fillText('¥', left_width - 10-12 - text_width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25+3)


//市场价

ctx.setFontSize(10)

ctx.setTextAlign('right')

ctx.setFillStyle('#9B9B9B')

ctx.fillText('市场价:' + _this.data.goods_info.goods_marketprice, left_width - 10 , ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25 + 3+15)

//划线

ctx.fillRect(left_width - 10 - ctx.measureText('市场价:' + _this.data.goods_info.goods_marketprice).width, ctx_width * 0.14 + 20 + (b + 1) * 15 + 10 + ctx_width + 10 + 20 + 25 + 3 + 15 + 5, ctx.measureText('市场价:' + _this.data.goods_info.goods_marketprice).width, 1)

ctx.draw()


//绘图结束


_this.setData({pop: { poster: 'active' } });

}


最后一次编辑于  2018-08-09  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • 社区技术运营专员-白柿子
    社区技术运营专员-白柿子
    2018-08-09


    你好,这是需要你配置好的域名信息

    2018-08-09
    赞同
    回复 11
    • θ–θ
      θ–θ
      2018-08-09

      好的,谢谢您。线上版会检查这个吗

      2018-08-09
      回复
    • 社区技术运营专员-白柿子
      社区技术运营专员-白柿子
      2018-08-09回复θ–θ

      是的

      2018-08-09
      回复
    • θ–θ
      θ–θ
      2018-08-09回复社区技术运营专员-白柿子

      好的,感谢

      2018-08-09
      回复
    • 社区技术运营专员-白柿子
      社区技术运营专员-白柿子
      2018-08-09回复θ–θ

      不用客气


      2018-08-09
      回复
    • 卢霄霄
      卢霄霄
      2018-08-09回复θ–θ

      哇。。官方小哥好快。。看了下。。确实是这个问题,另外还有个下头像的地址。。

      http://yudian-pubilc-read.oss-cn-shanghai.aliyuncs.com/

      2018-08-09
      回复
    查看更多(6)
  • Afan
    Afan
    2018-08-15

    楼主看看这个

    https://github.com/AfanSama/esay-canvas

    2018-08-15
    赞同
    回复
  • 卢霄霄
    卢霄霄
    2018-08-09

    这么长一串代码。。完全没耐心看完啊。。要不你做个代码片段吧

    2018-08-09
    赞同
    回复 6
    • θ–θ
      θ–θ
      2018-08-09

      抱歉,我不会用这个代码片段,

      我看了一下那个报错提示,说是indexof没定义,可是,这段代码里,没有写indexof,所以我就不太清楚哪里错了

      2018-08-09
      回复
    • 卢霄霄
      卢霄霄
      2018-08-09回复θ–θ

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      光是看,也看不出个所以然来。。还是要跑起来

      2018-08-09
      回复
    • θ–θ
      θ–θ
      2018-08-09回复卢霄霄

      好的,谢谢您,我去弄一下

      2018-08-09
      回复
    • θ–θ
      θ–θ
      2018-08-09回复卢霄霄

      wechatide://minicode/tnzgNxmk701y

      请您看一下

      2018-08-09
      回复
    • 卢霄霄
      卢霄霄
      2018-08-09回复θ–θ

      下班啦。。明天来帮你看哈

      2018-08-09
      回复
    查看更多(1)