小程序（仿微信发布说说功能）

最近在为联想开发一个博客论坛类的小程序，刚刚开发做了几个小功能记录下来。本次记录发布心愿功能基本和我们发布朋友圈差不多。点击加+ 。拍照或者从文件里选择图片上传。

wxml里的代码如下：

<view>

</view>

</view>

</view>

</view>

js 部分：

// 因为wx.chooseImage api只是简单地拍照或者选择图片所以为了达到发布朋友全的效果需要在回调里进行操作

var imgArr = [];//这个数组用来临时存储图片数据

Page({

data:{

latitude:'',

chooseImageUrl:[],//绑定到页面的数据

imgCount: 0,//图片的张数

paizhao:function(){

var that = this

var attach = []

//wx.chooseImage 不多介绍看文档

wx.chooseImage({

sourceType: ['album', 'camera'],

sizeType: ['original'],

count: 9,

success: function (res) {

var tempFilePaths = res.tempFilePaths;

var len = that.data.imgCount + tempFilePaths.length

//len 是此时已有的张数和本次上传的张数的和，也就是本次操作完成页面应该有的张数，因为用户可能会多次选择图片，所以每一次的都要记录下来。

if (len > 9) {

wx.showToast({

title: '最大数量为9',

icon: 'loading',

duration: 1000

})

//超过结束

return false

}

for (var i = 0; i < tempFilePaths.length;i++){

//将api 返回的图片数组push进一开始的imgArr，一定要循环一个个添加，因为用户上传多张图直接push就会多个路径在imgArr的同一个元素里。报错

imgArr.push(tempFilePaths[i]);

}

//将此时的图片长度和存放路径的数组加到要渲染的数据中

that.setData({

imgCount: len,

chooseImageUrl: imgArr

})

}

})

//点关闭按键

Close:function(e){

var mylen = this.data.chooseImageUrl.length;//当前渲染的数组长度

var myindex = e.currentTarget.dataset.index;//当前点击的是第几张图片 data-index

imgArr.splice(myindex,1)//将这张图充存放图片的数组中删除

this.setData({

imgCount: mylen - 1,//长度减一

chooseImageUrl: imgArr//将删除图片后的数组赋给要渲染的数组

})

}

})

转载于:https://www.cnblogs.com/wangercha/p/9378363.html

小程序（仿微信发布说说功能）相关推荐

小程序仿微信聊天按住说话功能
小程序仿微信聊天按住说话功能实现:按住说话有录音动画,上滑可取消发送,松开发送录音录音授权判断 # .wxml <view class="btn {{touchBtn?'hover ...
php按住说话然后播放,小程序仿微信聊天按住说话功能
小程序仿微信聊天按住说话功能实现:按住说话有录音动画,上滑可取消发送,松开发送录音录音授权判断 # .wxml bind:longpress="onLongpress" cat ...
android微信运动页面开发,微信小程序仿微信运动步数排行(交互)
微信小程序仿微信运动步数排行(交互) 发布时间:2020-08-20 00:51:02 来源:脚本之家阅读:101 作者:祈澈姑娘本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自 ...
微信小程序仿微信SlideView组件slide-view
微信小程序仿微信SlideView组件. 使用 1.安装 slide-view 从小程序基础库版本 2.2.1 或以上.及开发者工具 1.02.1808300 或以上开始,小程序支持使用 npm 安装 ...
Java微信运动步数排序设计_微信小程序仿微信运动步数排行(交互)
本文介绍了微信小程序仿微信运动步数排行(交互),分享给大家,也给自己留个笔记,废话不多说了,具体如下: 效果图如下: wxml: {{item.name}} {{item.steps}} wxss: ...
小程序仿微信支付数字键盘，微信支付数字键盘
小程序仿微信支付数字键盘,微信支付数字键盘前段时间在一个小程序中需要写个支付页面,刚开始用input来唤起手机自带的数字键盘,甲方说不好看,然后说微信支付页面做的就比较好....于是就动手写了一个, ...
小程序（十六）小程序仿微信聊天页面及功能
后期打算在小程序中添加即时聊天的功能,但是目前这个还没有考虑好以一种什么样的形势去实现,先接入一个腾讯AI提供的免费闲聊接口.先做一个大概的页面及功能. 腾讯AI地址: https://ai.qq.c ...
微信小程序仿微信功能Day3
仿微信通讯录功能实现右侧一个定位锚点跳转功能. 整体是列表的数据显示. 需要图片资源的请去网盘下载提取码:en17 1.phone.wxml <!-- pages/phone/phone.w ...
微信小程序仿微信功能Day4
点击列表进入用户个人信息如图所示: 当点击了列表信息时候.跳转到用户个人信息的页面,并从js文件中获取值. 1.页面布局PersonalDetails.wxml <!-- pages/Pers ...

小程序（仿微信发布说说功能）

小程序（仿微信发布说说功能）相关推荐

最新文章

热门文章