脚本之家

微信小程序小技巧系列《二》show内容展示,上传文件编码问题

上一篇
原创:微信小程序源码解说:石头剪刀布(附源码下载)
下一篇
微信小程序小技巧系列《一》幻灯片,tab导航切换

作者:gou-tian

来自:github

show内容展示

尝试用微信小程序的template组件实现。同时,尝试页面间转跳时传参,在目标页面引入模板文件实现写的更少,做的更多篇幅有限详细代码此处省略

<view class="show-warp">

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

<template is="discuss" data="{{item}}"></template>

<template is="discuss-reply" data="{{item}}"></template>

<template is="discuss-more" data="{{item}}"></template>

</block>

</view>

Page({

data: {

discuss: [],

petAge: 0,

reply: false,

height: 20

},

onLoad: function(){

util.dataList.call(this,{

cb: util.petAge

});

}

});

/*

* 部分公共逻辑页代码

*/

function list(option) {

var opt = {

url: option.url || 'https://api.zg5v.com/index.php/index/show/showindex',

data: option.data || {

uid: 148,

num: option.pageNum || 0

},

update: option.update || false,

cb: option.cb || false,

func: option.func || false

};

// 数据列表

var showList = [];

var objDa = [];

this.data.replyListArr = [];

// 保存/修改 this指向

var self = this;

ajax({

url: opt.url,

data: opt.data,

cb: function(res) {

showList = res.data.data;

// 统一格式

if (!Array.isArray(showList) &&

typeof showList === 'object') {

// 计算评论发布时间

showList.pl.forEach(function(e,i) {

e.cp_chongbirth = e.cp_addtime * 1000;

e.replyTime = opt.cb(e.cp_chongbirth,true);

},showList.pl);

objDa.push(showList);

} else {

objDa = showList;

}

// 更新评论列表

if (opt.update) {

let da = res.data.data.pl,

plDa = self.data.discuss,

i = 0,

j = 0,

len = da.length,

jLen = plDa.length;

for (; j < jLen; j++) {

for (; i < len; i++) {

if (plDa[j].pl.length > 0) {

plDa[j].pl.push(da[i]);

}

}

}

objDa = plDa;

opt.update = !opt.update;

}

if (res.data.status === 1) {

for (var i = 0,len = objDa.length; i < len; i++) {

if (opt.cb && typeof opt.cb === 'function') {

// 计算宠物年龄

objDa[i].petAge = opt.cb(objDa[i].cp_chongbir ||

objDa[i].cp_chongbirth);

}

}

self.setData({

discuss: objDa

});

} else if (res.data.status === 2 || res.data.status === 0) {

self.onLoad();

}

objDa = [];

}

});

}

上传文件编码问题(*)

header 里的数据在真机预览的时候是无效的。那就尝试改变编码进行传输,在uploadFile 的参数中加入

header: {“chartset”:”utf-8”}

或是

header: {"content-type":'application/x-www-form-urlencoded'}

需要改到 formData 中,尝试将编码数据加入formData,但仅仅传输了数据,并没有改变编码.header有问题暂时找不到解决方案,所以编码操作暂时只能手动进行.在 javascript 中,字符串编码函数是 encodeURI,在小程序中尝试可以使用。所以,将代码改为如下:

wx.uploadFile({

url: 'Upload image server path (Must be secure https)',

// 待上传的图片,由 chooseImage获得

filePath: tempFilePaths[0],

name: 'file',

// HTTP 请求中其他额外的 form data

formData: {

// city: '太原',

city: encodeURI('太原'),

// name: 'taiyan',

name: encodeURI('taiyan') // 名称

},

success: function(res) {

console.log("success",res);

},

fail: function(res) {

console.log("fail",res);

}

});

转自:转载地址

以上就是微信小程序小技巧系列《二》show内容展示,上传文件编码问题的全部内容,希望这篇技术文档对大家的学习有所帮助,转发给身边的程序猿朋友,感谢各位大大支持:脚本之家 jb51.cc

微信小程序小技巧系列《二》show内容展示,上传文件编码问题 由脚本之家 jb51.cc 收集整理
本文版权归原作者所有,转载请注明出处并带上本文链接!

上一篇
原创:微信小程序源码解说:石头剪刀布(附源码下载)
下一篇
微信小程序小技巧系列《一》幻灯片,tab导航切换

您可能感兴趣的小程序开发教程

小程序开发

微信小程序中将多个view居中显示的方法

我们在这里要实现的效果是这样的,在小程序中将多个view居中显示 先看一下效果图如下图效果所示:我们需要将“延长收货”,”查看物流”,“提醒发货”,“提醒发货”是四个按钮放在页面最中间,并且间隔适当的

小程序开发

微信小程序如何居中布局?

前段时间小程序上线后就弃坑了,回到网页开发去了,最近又有新项目,再次入坑,难免需要一些demo来重新熟悉,在这个过程中,发现demo中很少有人使用flex布局,今天给大伙稍微讲一下这个布局。 

小程序开发

防止小程序多次点击跳转解决方案

场景在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次):解决办法然后从轻松理解JS函数节流和函..

小程序开发

微信小程序-事件

微信小程序的"事件"挺有意思。看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便。接下来把文档copy过来,原文地址:https://mp.weixin.qq.com