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

           

   两个页面  ，，上面是效果图！！！！

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

    代码如下 :

   

//index.wxml  发布页面

<form bindsubmit="formSubmit">
  <view class="section">
    <textarea bindblur="bindTextAreaBlur" auto-height placeholder="这一刻的想法..." style="margin-top:20rpx;margin-left:20rpx;width:680rpx;" name="textarea" />
  </view>
  <view class="container" style="padding-top:40rpx;float:left;padding-bottom:0;">
    <view class="page-body" style="float:left;">
      <view class="page-section">
        <view class="weui-cells weui-cells_after-title">
        </view>
        <view class="weui-cells">
          <view class="weui-cell">
            <view class="weui-cell__bd">
              <view class="weui-uploader">
                <view class="weui-uploader__hd">
                  <view class="weui-uploader__title">已选择的照片</view>
                  <view class="weui-uploader__info">{
   {imageList.length}}/{
   {count[countIndex]}}</view>
                </view>
                <view class="weui-uploader__bd">
                  <view class="weui-uploader__files">
                    <block wx:for="{
    {imageList}}" wx:for-item="image">
                      <view class="weui-uploader__file">
                        <image class="weui-uploader__img" src="{
    {image}}" data-src="{
    {image}}" bindtap="previewImage"></image>
                      </view>
                    </block>
                    <view class="weui-uploader__input-box">
                      <view class="weui-uploader__input" bindtap="chooseImage"></view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view style="border-bottom:1rpx solid #ccc;width:100%;float:left;margin-left:30rpx;"></view>
  <view class="page-body" style="float:left;width:100%;border-bottom:1rpx solid #ccc;">
    <view class="page-section">
      <view class="page-body-info" bindtap="chooseLocation">
        <block wx:if="{
    {hasLocation === false}}">
          <image src="https://www.caohi.cn/api/image/llsq_location_grey.png" class="page-body-img"></image>
          <text class="page-body-text" name="address">所在位置</text>
          <image src="https://www.caohi.cn/api/image/llsq_location_zk.png" class="page-body-img-zk"></image>
        </block>
        <block wx:if="{
    {hasLocation === true}}">
          <image src="https://www.caohi.cn/api/image/llsq_location_green.png" class="page-body-img"></image>
          <text class="page-body-text" name="address">{
   {locationAddress}}</text>
        </block>
      </view>
    </view>
  </view>
  <view style="float:left;width:100%;">
    <button id="mini-btn" type="primary" size="mini" form-type="submit">发送</button>
  </view>
</form>

//index.js

var util = require('../../utils/util.js')
var formatLocation = util.formatLocation
var 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 = this
    
    wx.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.src

    wx.previewImage({
      current: current,
      urls: this.data.imageList
    })
  },
  //位置
  chooseLocation: function () {
    var that = this
    wx.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.css
page {
   
  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;
  top