700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 微信小程序仿朋友圈 上传图片 定位

微信小程序仿朋友圈 上传图片 定位

时间:2019-07-20 12:43:21

相关推荐

微信小程序仿朋友圈 上传图片 定位

两个页面 ,,上面是效果图!!!!

以下代码有部分是开发时用到的代码,懒的删了。不需要的自行删除

代码如下 :

//index.wxml 发布页面<form bindsubmit="formSubmit"><view><textarea bindblur="bindTextAreaBlur" auto-height placeholder="这一刻的想法..." name="textarea" /></view><view><view><view><view></view><view><view><view><view><view><view>已选择的照片</view><view>{{imageList.length}}/{{count[countIndex]}}</view></view><view><view><block wx:for="{{imageList}}" wx:for-item="image"><view><image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image></view></block><view><view bindtap="chooseImage"></view></view></view></view></view></view></view></view></view></view></view><view></view><view><view><view bindtap="chooseLocation"><block wx:if="{{hasLocation === false}}"><image src="/api/image/llsq_location_grey.png"></image><text name="address">所在位置</text><image src="/api/image/llsq_location_zk.png"></image></block><block wx:if="{{hasLocation === true}}"><image src="/api/image/llsq_location_green.png"></image><text name="address">{{locationAddress}}</text></block></view></view></view><view><button type="primary" size="mini" form-type="submit">发送</button></view></form>

//index.js

var util = require(../../utils/util.js)var formatLocation = util.formatLocationvar sourceType = [ [camera], [album], [camera, album] ]var sizeType = [ [compressed], [original], [compressed, original] ]Page({data: {imageList: [],sourceTypeIndex: 2,sourceType: [拍照, 相册, 拍照或相册],sizeTypeIndex: 2,sizeType: [压缩, 原图, 压缩或原图],countIndex: 8,count: [1, 2, 3, 4, 5, 6, 7, 8, 9],hasLocation: false,},sourceTypeChange: function (e) {this.setData({sourceTypeIndex: e.detail.value})},sizeTypeChange: function (e) {this.setData({sizeTypeIndex: e.detail.value})},countChange: function (e) {this.setData({countIndex: e.detail.value})},chooseImage: function () {var that = thiswx.chooseImage({//sourceType: sourceType[this.data.sourceTypeIndex],sizeType: sizeType[this.data.sizeTypeIndex],count: this.data.count[this.data.countIndex],success: function (res) {console.log(res)that.setData({imageList: res.tempFilePaths})}})},previewImage: function (e) {var current = e.target.dataset.srcwx.previewImage({current: current,urls: this.data.imageList})},//位置chooseLocation: function () {var that = thiswx.chooseLocation({success: function (res) {console.log(res)that.setData({hasLocation: true,location: formatLocation(res.longitude, res.latitude),locationAddress: res.address})}})},clear: function () {this.setData({hasLocation: false})},//表单提交formSubmit: function(e) {console.error(form发生了submit事件,携带数据为:, e);wx.redirectTo({url: ../index-list,})}})

//index.csspage {line-height: 1.6;font-family: -apple-system-font, "Helvetica Neue", sans-serif;}icon {vertical-align: middle;}.weui-cells {position: relative;margin-top: 1.17647059em;background-color: #FFFFFF;line-height: 1.41176471;font-size: 17px;}.weui-cells:before {content: " ";position: absolute;left: 0;top: 0;right: 0;height: 1px;color: #D9D9D9;}.weui-cells:after {content: " ";position: absolute;left: 0;bottom: 0;right: 0;height: 1px;color: #D9D9D9;}.weui-cells__title {margin-top: .77em;margin-bottom: .3em;padding-left: 15px;padding-right: 15px;color: #999999;font-size: 14px;}.weui-cells_after-title {margin-top: 0;}.weui-cells__tips {margin-top: .3em;color: #999999;padding-left: 15px;padding-right: 15px;font-size: 14px;}.weui-cell {padding: 10px 15px;position: relative;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;}.weui-cell:before {content: " ";position: absolute;left: 0;

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。