微信小程序技巧之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 面向对象思想 附源码
Jul 07 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
js代码实现随机颜色的小方块
Jul 30 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
微信小程序API—获取定位的详解
Apr 30 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 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
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
Vue表单实例代码
2016/09/05 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
详解Vue项目在其他电脑npm run dev运行报错的解决方法
2018/10/29 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
2019/12/06 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
[48:48]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python的scipy实现插值的示例代码
2019/11/12 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
python三引号如何输入
2020/07/06 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
草莓网化妆品加拿大网站:Strawberrynet Canada
2016/09/20 全球购物
服务承诺书怎么写
2014/05/24 职场文书
学习十八大的心得体会
2014/09/12 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS