微信小程序技巧之show内容展示,上传文件编码问题


Posted in Javascript onJanuary 23, 2017

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);
    }
  });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript调用XML制作连动下拉列表框
Jun 25 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
jquery使用FormData实现异步上传文件
Oct 25 jQuery
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
javascript实现滚动条效果
Mar 24 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 #Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 #Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 #Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 #Javascript
jQuery弹出层插件popShow用法示例
Jan 23 #Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 #Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 #Javascript
You might like
人族 TERRAN 概述
2020/03/14 星际争霸
php桌面中心(三) 修改数据库
2007/03/11 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP获取QQ达人QQ信息的方法
2015/03/05 PHP
PHP安装memcached扩展笔记
2015/05/28 PHP
php中strtotime函数性能分析
2016/11/20 PHP
php实现QQ小程序发送模板消息功能
2019/09/18 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript new一个对象的实质
2010/01/07 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
django迁移数据库错误问题解决
2019/07/29 Python
python实现的自动发送消息功能详解
2019/08/15 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
网站出售协议书范文
2014/10/10 职场文书
人口与计划生育责任书
2015/05/09 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
前端与RabbitMQ实时消息推送未读消息小红点实现示例
2022/07/23 Java/Android